Last Updated: September 27, 2021
·
3.244K
· afterdesign

Disqus - last 10 comments linked to posts.

I'm using disqus with jekyll generated blogs. After using it for a while I started looking for options like "last top 10 comments box".
But disqus is not giving any widgets or something similar. So I started playing with disqus API. I wanted to do this on the client site with jsonp because generating blog every 5 minutes is not a good option.

Usage

  1. First thing what you need to do is register app for api use http://disqus.com/api/applications/. This is the place where you get public key, secret key and all of that stuff.

    Remember to set correct Domains because without this your jsonp requests are not going to work.

  2. Prepare configuration. I'm using only one global object (as namespace) and I'm writing configuration like:

    var app = (function (parent) {
        parent.settings = {
            api_key: "API_PUBLIC_KEY",
            forum:  "DISQUS_SHORT_NAME",
            limit: "HOW_MANY_COMMENTS_YOU_WANT"
        };
    
        return parent;
    })(app || {});
  3. Gettings comments is easy. We just need to make request to URL https://disqus.com/api/3.0/posts/list.jsonp (api docs) with paramaters from the previous step.

    This API request is returning object. In this object I was interested in authors name, and url to post. Unfortunately URL to post is not binded with comments. But there is thread and this is ID which we can use in next step to get URLs to posts.

    Below is fragment (with info I needed) of object returned from API.

    {
        "response" : [
            {
                "thread" : "THREAD_ID",
                "author" : {
                    "name" : "AUTHOR_NAME"
                }
            }
        ]
    }

    To see what the full return from API go to api docs for this API call

  4. Getting the URLs for comments I got fortunately was quite easy. I just had to make another API call to URL https://disqus.com/api/3.0/threads/list.jsonp (api docs) with data:

    {
        api_key : app.settings.api_key,
        thread : [ARRAY_OF_THREAD_IDS]
    }

    Below is fragment (with info I needed) of object returned from API.

    {
        "response" : [
            {
                "link" : "THREAD_ID"
            }
        ]
    }
  5. Combine those data and display them.

Caveats

Disqsu API has limitations so using that method on popular blogs can be problematic (I don't know what limits are for paid accounts).

I used jQuery with jquery-ajax-localstorage-cache and modernizr (because it is dependency of localstorage cache plugin) to make less requests.

2 Responses
Add your response

This is useful. I am also using Jekyll and Disqus combo and was looking for a widget that lists recent comments. Will try to implement this one.

over 1 year ago ·

It's quite easye to implement to be honest. 50-60 lines of code and it's done.

over 1 year ago ·