Adding comment count links to your home page

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.

  1. Paste the following is the 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>
  2. Change the shortname variable from EXAMPLE to whatever the shortname is of the forum you’re using. Your shortname can also be found on your forum’s Admin > Settings > General page.
  3. 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>

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 settings at Settings > Appearance

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.

January 9, 2018

0 responses on "Adding comment count links to your home page"

Leave a Message

Your email address will not be published. Required fields are marked *

Jupiter2000 © All rights reserved.
X
Skip to toolbar