Use jQuery to get Disqus comment count

Disqus is a handy social commenting system, it`s a plugin that you can easily integrate with your own
website or blog, besides the account of Disqus itself, it also supports the account From Facebook、
Twitter and Google+. We will show you how to get Disqus comment count using jQuery.

Disqus installation instruction shows you that you have to put the script below before </body> tag in your page.
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * 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>
then you crate a hyperlink, inside this hyperlink there is a href attribute, you have to fill href value with the url where
you have Disqus commenting plugin installed and add #disqus_thread in the end of url, this tells Disqus to return 
comment count and show it in the hyperlink.
<a href="http://www.pureexample.com/pagewithcomment.html#disqus_thread">MyPage</a>
the output will be like this 51 Comments .

That is all you have to do to show Disqus comment count in your hyperlink, and of course you can add #disqus_thread 
in the end of all your urls manually, but it`s a bit of hassle, so we can use jQuery to help us do all that.

Let`s say your links HTML is like below, and you want them all to show Disqus comment count.
<div id="link-block">
    <a href="http://www.pureexample.com/article1.html">Article 1</a>
    <a href="http://www.pureexample.com/article2.html">Article 2</a>
    <a href="http://www.pureexample.com/article3.html">Article 3</a>
    <a href="http://www.pureexample.com/article4.html">Article 4</a>
    <a href="http://www.pureexample.com/article5.html">Article 5</a>
</div>
we can use jQuery script like below.
$(document).ready(function () {
    $("div[id='link-block']").find("a").each(function () {
        var url = $(this).attr("href");
        $(this).attr("href", url + "#disqus_thread");
    });
});
We use jQuery selector to find a div tag with an id attribute "link-block", then use .find() to find all hyperlinks and use
.each() for traversing hyperslinks object, and append #disqus_thread in the end of href attributes, this way Disqus
will return the comment count.

output will be like this
<div id="link-block">
    <a href="http://www.pureexample.com/article1.html#disqus_thread">2 Comments</a>
    <a href="http://www.pureexample.com/article2.html#disqus_thread">15 Comments</a>
    <a href="http://www.pureexample.com/article3.html#disqus_thread">5 Comments</a>
    <a href="http://www.pureexample.com/article4.html#disqus_thread">22 Comments</a>
    <a href="http://www.pureexample.com/article5.html#disqus_thread">1 Comments</a>
</div>



 
comments powered by Disqus