How to Display Disqus Comment Count

Disqus is a comment system that has proven it's efficiency among many blogs and websites. Many of sites have now switched to Disqus comment system as it is fast, easy and simple to use, but sometime it can be frustrating when you don't see the comment counts in homepage until you go all way down to open the post. Comment counts are best way to prove to readers that your blog has a value of being viewed thus increasing you impression.

Okay saying that let's see how we can add the disqus comment count on your homepage. However you should note Disqus no longer supports import and syncronize for comment through blogger platform this is because Google has updated it's application that authenticate the access logged data with the latest OAuth 2.0 since April 2015.

Anyways you should not worry to much as I will be giving you tips on how to bring up the number of Disqus comments on the index page or your post.

First and most importantly be sure to get a disqus account.

If you haven't install disqus in your blog already please follow these steps:
1. Log in to Disqus profile > then click the Settings icon> Admin> Settings> Install> Universal Code> Then scroll to the bottom and find the phrase 'How to display the comment count'. Then copy the code immediately before the </body>

Please follow the step below 

Go to Blogger -> Template -> Edit HTML.

Place this Javascript code above </body>.

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'blogakona';
   
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

Replace the blue background text above to your Disqus shortname example: blogakona from blogakona.disqus.com is the shortname.

2. The next step you should look for comment markup something like this (This code is taken from Blogger's default template, for the rest match the template comment markup you use)

<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>

Then replace all the above code with the code below:

<span class='post-comment'><a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments'/></span>

In case the above code doesn't function in you template, you might want to use the code below instead. This is because some template have different comment functions.

Find this code:

<b:if cond='data:post.allowComments'>
              <span class='comment-info'>
              <i class='fa fa-comments-o'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>
              </a>
              </span>
            </b:if>

And replace with the one below:

 <b:if cond='data:post.allowComments'>
              <span class='comment-info'>
              <i class='fa fa-comments-o'/> <a expr:href='data:post.url + &quot;#disqus_thread&quot;' expr:onclick='data:post.addCommentOnclick' title='Comments'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>
              </a>
              </span>
            </b:if>

Save you template and reload to see the effect. There you are done, check me if you need more help

Share: