13

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.

overthink
  • 23,985
  • 4
  • 69
  • 69
pixelkicks
  • 866
  • 2
  • 11
  • 23

2 Answers2

34

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>');

                    }
                }
        });

});
Ryan V
  • 3,100
  • 1
  • 17
  • 11
  • Cheers Ryan. I find it very strange why it has to be an A tag - seems like a big oversight to me. Our site receives approx 25-30k visitors today so yes it is very high traffic - which might put it in the 1000+ requests per hour category? It had 73k page views yesterday. – pixelkicks May 03 '13 at 07:08
  • 1
    Email us at developers@disqus.com - we can up the limit, we just want to make sure we've made contact to ensure everything works smoothly :-) – Ryan V May 05 '13 at 04:47
  • Hi Ryan, we've just tried emailing but we got a bounceback saying we don't have permission or the Google group doesn't exist? – pixelkicks May 10 '13 at 13:42
  • Sorry about that, try ryan@disqus.com then – Ryan V May 10 '13 at 22:11
  • 2
    It currently shows "# Comments", but is there a way to show only the number of posts? The article on disqus.com mentions to edit Settings>General, but wouldn't that remove the word "Comments" for all other instances? – Timofey Drozhzhin Dec 12 '14 at 07:23
  • It would remove it for all instances, yes - but you should be able to enter HTML into that string, so you can assign it a class that you can target with your own CSS. – Ryan V Dec 17 '14 at 19:19
0

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);});
user875234
  • 2,399
  • 7
  • 31
  • 49