- Notifications
You must be signed in to change notification settings - Fork4
A DISQUS integration for Angular2
License
JayChase/angular2-disqus
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
DISQUS integration with Angular.
Plunker template,Disqus developer help
npm install --save angular2-disqus
Add the DISQUS embed in the body of your main page (index.html) making sure to change the url to your disqus site url.
Breaking change as of v3 the embed script must now be in the body of the page not the head
<html><head><title>demo app</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><basehref="/"><linkhref="../node_modules/@angular2-material/core/style/core.css"rel="stylesheet"><!-- Polyfill(s) for older browsers --><scriptsrc="../node_modules/core-js/client/shim.min.js"></script><scriptsrc="../node_modules/zone.js/dist/zone.js"></script><scriptsrc="../node_modules/reflect-metadata/Reflect.js"></script><scriptsrc="../node_modules/systemjs/dist/system.src.js"></script><scriptsrc="../public/js/systemjs.config.js"></script><script>System.import('demo').catch(function(err){console.error(err);});</script></head><body><demo-app>Loading...</demo-app><scriptsrc="//angular2disqustest.disqus.com/embed.js"></script></body></html>
In the SystemJs config file (systemjs.config.js) add a mapping for the package
varmap={ ...'angular2-disqus':'node_modules/angular2-disqus/lib'};
and add the package to the list of packages
varpackages={ ...'angular2-disqus':{main:'disqus.module.js',defaultExtension:'js'}};
Just install the package and then import the module as below.
At the relevant level for your app add import theDisqusModule.
For example inapp.module.ts
import{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';import{FormsModule}from'@angular/forms';import{AppComponent}from'./app.component';import{DemoComponent}from'./demo.component';import{DisqusModule}from'angular2-disqus';import{MdCardModule}from'@angular2-material/card';import{MdToolbarModule}from'@angular2-material/toolbar';import{MdButtonModule}from'@angular2-material/button';import{MdInputModule}from'@angular2-material/input';@NgModule({imports:[//A2 stuffBrowserModule,FormsModule,//src moduleDisqusModule,//material modulesMdCardModule,MdToolbarModule,MdButtonModule,MdInputModule],declarations:[AppComponent],bootstrap:[AppComponent]})exportclassAppModule{}
To add a comments section add it as a nested component on your component and set the pageIdentifier and the pageUrl.
<disqus-thread[page-identifier]="pageIdentifier"[page-url]="pageUrl"></disqus-thread>
The comments section will be reset everytime eitherpage-identifier orpage-url are updated and both have a value. Note to avoidissues with comments showing up on the wrong page always set both.
Add support for comment counts??https://help.disqus.com/customer/portal/articles/565624-tightening-your-disqus-integration
About
A DISQUS integration for Angular2
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.