Showing Disqus comment count in a DIV or SPAN - not <a href>

Question

We currently have our Disqus comment counts showing on each post on our homepage inside an <a href> tag, and we see this is updated by some javascript which detects whether #disqus_thread is present on the link.

How do we show the comment count outside of an tag though?

Is this possible?

We're not interested in having a direct link to the comments, so we'd like to remove the link and just show the count alone.

Answer 1

Update 11/3/2014:

We now have a method for using comment counts on any element you want. The regular count.js script will now work if you:

• Use a disqus-comment-count class AND
• Use a data-disqus-url OR data-disqus-identifier attribute

So now either of these elements would work:

<span class="disqus-comment-count" data-disqus-url="http://example.com/path-to-thread/"> <!-- Count will be inserted here --> </span>

and

<span class="disqus-comment-count" data-disqus-identifier="your_disqus_identifier"> <!-- Count will be inserted here --> </span>

Old Answer (don't do this anymore)

The count.js script is fairly inflexible when it comes to the types of tags its looking for (it must be an a tag), so you'll need to use the API to accomplish this.

This API call returns an array of thread data (you're looking for the "Posts" integer) for any number of threads that you specify: http://disqus.com/api/docs/threads/set/

Because of API limits you'll ideally run this server-side and cache the counts to serve to the clients. However, unless you have a very busy site, doing it client-side is usually fine. You can email developers@disqus.com if you need more than 1000 requests/hour for your application.

EDIT

Here's a quick example of how you could do this with jQuery. This assumes that you have several empty div's that look like this:

<div class="my-class" data-disqus-url="http://example.com/some-url-that-matches-disqus_url/"></div>

le javascript:

$(document).ready(function () {

        var disqusPublicKey = "YOUR_PUBLIC_KEY";
        var disqusShortname = "YOUR_SHORTNAME";
        var urlArray = [];

        $('.my-class').each(function () {
            var url = $(this).attr('data-disqus-url');
            urlArray.push('link:' + url);
        });


        $('#some-button').click(function () {
            $.ajax({
               type: 'GET',
               url: "https://disqus.com/api/3.0/threads/set.jsonp",
               data: { api_key: disqusPublicKey, forum : disqusShortname, thread : urlArray }, // URL method
               cache: false,
               dataType: 'jsonp',
               success: function (result) {

                    for (var i in result.response) {

                        var countText = " comments";
                        var count = result.response[i].posts;

                        if (count == 1)
                           countText = " comment";

                        $('div[data-disqus-url="' + result.response[i].link + '"]').html('<h4>' + count + countText + '</h4>');

                    }
                }
        });

});

Answer 2

No jQuery Solution:

var gettingCount = false;
var countCallerCallback = null;
function countCallback(data) // returns comment count or -1 if error
{
    var count = -1;
    try {
        var thread = data.response[0];
        count = thread === undefined ? "0" : thread.posts;  
    }
    catch (ex) {
        console.log("FAILED TO PARSE COMMENT COUNT");
        console.log(ex);
    }

    // always do this part
    var commentCountScript = document.getElementById("CommentCountScript");
    document.getElementsByTagName('head')[0].removeChild(commentCountScript);
    countCallerCallback(count);
    gettingCount = false;
    countCallerCallback = null; // if this got reset in the line above this would break something
}
function getCommentCount(callback) {
    if(gettingCount) {
        return;
    }
    gettingCount = true;

    var script = document.createElement('script');
    script.id = "CommentCountScript";
    var apiKey = "api_key=MY_COOL_API_KEY";
    var forum = "forum=MY_FORUM_SHORT_NAME"
    var thread = "thread=" + "link:" + window.location.href;
    script.src = 'https://disqus.com/api/3.0/threads/set.jsonp?callback=countCallback&' + apiKey + "&" + forum + "&" + thread;
    countCallerCallback = callback;
    document.getElementsByTagName('head')[0].appendChild(script);
}
getCommentCount(function(count){alert(count);});