https://github.com/JayChase/angular2-disqus

A DISQUS integration for Angular2
https://github.com/JayChase/angular2-disqus

Last synced: 2 months ago
JSON representation

A DISQUS integration for Angular2

• Host: GitHub
• URL: https://github.com/JayChase/angular2-disqus
• Owner: JayChase
• License: mit
• Created: 2016-06-30T01:46:54.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-07T11:02:45.000Z (over 7 years ago)
• Last Synced: 2024-08-22T17:11:32.837Z (5 months ago)
• Language: JavaScript
• Size: 94.7 KB
• Stars: 12
• Watchers: 5
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license.md

Awesome Lists containing this project

• awesome-angular-components - angular2-disqus - A DISQUS integration for Angular2. (Uncategorized / Uncategorized)

README

        
## angular2-disqus

[DISQUS](https://disqus.com/) integration with Angular.

#### Quick links

[Plunker template](http://embed.plnkr.co/mIv6Fy/), 

[Disqus developer help](https://disqus.com/api/docs/)

### Install

```bash

npm install --save angular2-disqus

```

### Setup

#### Add the DISQUS script

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

  demo app

  

  

  

  

  

  

  

  

  

  

  

      System.import('demo').catch(function(err){ console.error(err); });

    

  Loading...

  

```

#### SystemJS

In the SystemJs config file (systemjs.config.js) add a mapping for the package

```javascript

var map = {

    ...

    'angular2-disqus': 'node_modules/angular2-disqus/lib'

};

```

and add the package to the list of packages

 ```javascript

var packages = {

    ...

    'angular2-disqus': { main: 'disqus.module.js', defaultExtension: 'js' }

};

```

### or for angular-cli

Just install the package and then import the module as below.

### Usage

At the relevant level for your app add import the **DisqusModule**.

For example in **app.module.ts**

```javascript

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 stuff

        BrowserModule,

        FormsModule,

        //src module

        DisqusModule,

        //material modules

        MdCardModule,

        MdToolbarModule,

        MdButtonModule,

        MdInputModule

    ],

    declarations: [

        AppComponent

    ],

    bootstrap: [

        AppComponent

    ]

})

export class AppModule { }

```

To add a comments section add it as a nested component on your component and set the pageIdentifier and the pageUrl.

```html

```

The comments section will be reset everytime either **page-identifier** or **page-url** are updated and both have a value. Note to avoid [issues](https://help.disqus.com/customer/en/portal/articles/662547-why-are-the-same-comments-showing-up-on-multiple-pages-) with comments showing up on the wrong page always set both. 

### Future

Add support for comment counts??

https://help.disqus.com/customer/portal/articles/565624-tightening-your-disqus-integration