@codemotion/angular-disqus

1.0.0 • Public • Published

angular-disqus Build Status

Getting started


(1) Add angular-disqus to required modules list:

const myApp = angular.module('myApp', [require(`@codemotion/angular-disqus`)]);

(2) Register your shortname:

This is the unique identifier assigned to your Disqus app, can be found on disqus.com > Admin. https://shortname.disqus.com

myApp.config(function($disqusProvider){
	$disqusProvider.setShortname(shortname);
});

(3) Add comments to threads by using the disqus directive:

<!-- directive can be used as an attribute -->
<div disqus="id" title="title"></div>

<!-- directive can be used as a class attribute -->
<div class="disqus: id, title: title"></div>

Additional Changes


(1) Change hashPrefix: Disqus will only work on sites which use hashbang ( #! ). A valid url looks like this, http://localhost:8000/#!/home/comments/10

Update config block liks this:

myApp.config(function($disqusProvider, $locationProvider){
	$locationProvider.hashPrefix('!');
})

This changes your link from http://localhost:8000/#/home/comments/10 to the valid form above.

(2) Register your user with SSO(Single Sign-On):

Single sign-on (SSO) allows users to sign into a site and fully use Disqus Comments without again authenticating with Disqus. SSO will create a site-specific user profile on Disqus so as not to clash with existing users of Disqus. See more: https://help.disqus.com/customer/portal/articles/236206-single-sign-on

myApp.run(function(disqusService){
	disqusService.setSso({
		remote_auth_s3: 'YOUR REMOTE AUTH',
		api_key: 'YOUR PUBLIC KEY'
	});
});

Disqus identifiers


Disqus identifiers must be passed to the directive as as expressions. If the plan is to pass a variable then one must make sure that the variable is wrapped in ' apostrophes (disqus="'id'")

Comment count


Angular-disqus will display comment using the data-disqus-identifier attribute.

Normal Link:

<a href="#!/home/comments/10" data-disqus-identifier="randomString"></a>

UI-Router:

<a data-ui-sref="home.comments.view({id: video.id})" data-disqus-identifier="randomString"></a>

This will replace the content of the anchor tag with given comment count.

There is some talk of this in the disqus spec

API


  1. $disqus#getShortname getter for the current shortname
  2. $disqus#comment will reset comments (or generate comments if needed)
  3. $disqusProvider#setShortname setter for shortname
  4. $loadCount initiates the thread comment count loading (generally should not be used)
  5. disqusService#setSso authenticate your user in the Disqus platform

Readme

Keywords

none

Package Sidebar

Install

npm i @codemotion/angular-disqus

Weekly Downloads

3

Version

1.0.0

License

MIT

Last publish

Collaborators

  • uffo
  • nyanev
  • nikolay_543