Most websites implementing Disqus will want a way to display the comment count for each page with comments, on their home page. We offer an easy to use JavaScript code snippet which displays the number of comments for pages with Disqus embedded.
Paste the following code at the bottom of the your index or home page, right before the closing
</body>
.<script id="dsq-count-scr" src="//EXAMPLE.disqus.com/count.js" async></script>
On the index or home page, append
#disqus_thread
to the end of each article URL which appears inside the href tag for the article comments link. This will tell Disqus which links to look up so it can return the correct comment count.Example: <a href="http://example.com/article2.html#disqus_thread">Second article</a>
. See Counts for non-link elements below if you're not using<a>
tags.
Using an identifier
By default Disqus looks up the count using the comment count link's href
attribute. However, the count can also be looked up using a Disqus identifier. To do this:
Add a special attribute data-disqus-identifier
to your links.
Note: This requires having set a Disqus identifier on the comment threads themselves. Typically this is done using the this.page.identifier
variable. See our JavaScript configuration variables for implementation steps.
If you are unable to use Disqus identifiers with your Disqus install that's okay. By simply not adding this attribute Disqus will look up threads by their associated URLs using the href
attribute in comment count links on your site. However, since URLs can change we highly recommend using the Disqus identifier.
For the following link, Disqus will fetch the comment count by the identifier: article_1_identifier
Example: <a href="http://example.com/article1.html#disqus_thread" data-disqus-identifier="article_1_identifier">First article</a>
Counts for non-link elements
To add comment counts to <span>
and <div>
elements, add the class disqus-comment-count
as well as the attribute data-disqus-identifier
or data-disqus-url
.
Example:
<span class="disqus-comment-count" data-disqus-identifier="article_1_identifier">First article</span>
<span class="disqus-comment-count" data-disqus-url="http://example.com/article1.html">First article</span>
Updating counts
By default, Disqus will reload the most recent comment count with every new page load that includes count.js
. Once count.js
is loaded, you call the following function if you'd like to poll and update the comment count dynamically:
DISQUSWIDGETS.getCount({reset: true});
One common use case of this function is to update elements on the page that were not available via the initial load of count.js
.
Customizing comment count link text
Comment count link text can be customized at your Disqus Admin > Settings > Community page.
Example scenario: Some websites show comment counts in a small circle or square and thus remove everything but the integer from their comment count links.
Note: the comment count text customization above only applies to links on your homepage or any other page that you load count.js ββ it is not possible to edit the comment count that displays above the comment embed.