Ember Disqus

ember-disqus provides an easy way to integrate Disqus comments and comment counts with your Ember CLI app.

This Ember addon also lazy-loads only the required parts of the Disqus API to improve performance of your app.

Installation

ember install ember-disqus

Then add your Disqus forum's shortname to your config/environment.js file:

module.exports = function(environment) {
  var ENV = {

  /* ... */

    disqus: {
      shortname: 'your-shortname-here'
    }
  }
}

Usage

• Displaying comments
• Displaying comment counts

Displaying Comments

Disqus' main functionality is to display comments relating to a particular page - that being a 'thread' of comments. Disqus highly reccomends each thread be identified using a unique identifer instead of other means like the URL incase your URLs should change or you want to show the same thread on multiple routes.

Thus, this addon maintains those standards and requires a unique thread identifier to be passed to the comment component.

To render the comment thread for any topic:

{{disqus-comments identifier=post.title}}

It's as simple as that!

For advanced functionality, you can pass an optional title argument, which makes working with threads on Disqus.com a bit easier. By default Disqus will use the identifier or the page URL for the thread title. However, you can override this functionality using the title argument. For example:

{{disqus-comments identifier=post.id title=post.title}}

The {{disqus-comments}} component also accepts a categoryId property. This is used by Disqus to assign specific threads to categories. This is also optional. Please note, Disqus only supports the use of categories once you have manually added them in your Disqus options.

{{disqus-comments identifier=postId categoryId=category.id}}

For more information on the individual configuration variables please see the Disqus docs.

Displaying comment counts

Like the other Disqus implementations in this plugin, the {{disqus-comment-count}} requires an identifier argument. For example:

{{disqus-comment-count identifier=post.title}}

This identifier must be the same identifier used to display the comment thread you are referencing

By default, this component will render the comment count for the specified comment thread in a lowly <span>. Simple!

Disqus automatically renders the result with an associated noun. For example 8 Comments or 1 Comment. However, you can turn off this functionality and just show the digits by setting the removeNoun property to true:

{{disqus-comment-count identifier=post.title removeNoun=true}}

For advanced customization of the text see your Disqus Admin --> Settings page.

Lazy Loading

This addon tries to improve page performance by waiting to request Diqsus' assets until they are needed and the current document has finished loading.

In addition, this addon only loads the parts of the Disqus API that you need. If you don't use the comment count features then you won't load the comment count API!

You can disable the lazy loading functionality by passing an additional option in your config/environment.js file:

module.exports = function(environment) {
  var ENV = {

  /* ... */

    disqus: {
      shortname: 'your-shortname-here',
      lazyLoad: false
    }
  }
}

Development

• git clone https://github.com/sir-dunxalot/ember-disqus.git
• ember s
• ember test or /tests route