Example of a JavaScript Disqus Recent Comment Widget

This post is more than 2 years old.

I've made great use of Disqus on a few sites now and am planning on converting my 50K+ comments here some day soon. One of the features I'm interested in is building a way to list out recent comments per site. Disqus has a pretty complex API but oddly, I wasn't able to find many examples of JavaScript clients for the API. I suppose with the API limits and the inherit concern about including keys in your code it may limit the uses, but I was able to build a simple "Recent Comments" pod pretty easily. This is ugly, but hopefully it will be useful to others.

To start, you need to create an Application. You do not do this in the Admin or Dashboard. Instead must click on the API link first. Since I wasn't building a real application I simply called my app "CFLibJS" as a way of making it clear what I was building. (For this demo I used CFLib for my source.) I set the application to read only, which I'd recommend strongly. I don't think folks can do anything naughty with just the API key you will need in the code, but better safe than sorry. Finally, use the referrers setting to specify where your code is allowed to run. I began with "localhost" and then added raymondcamden.com for the demo. Once you've built your application, make note of your public key.

While there are a number of different API calls you can make, I wanted forums/listPosts. Disqus considers a site as a forum (well, in theory you could have multiple per site) and posts are your comments. Make note of the various arguments you can pass to this API. For my demo two were important. First, I wanted a smaller number of results so I used limit=10. Secondly, the default results do not provide a way to get back to the original URL where the comment may be seen. Use related=thread to get thread data (and again, for a simple site one thread is one page) which will include the URL.

And that's it. The rest is simply looping over the array and printing your crap. In my demo below I didn't bother with a JS template so it is a bit uglier than normal, and I spent a grand total of 5 minutes on the design, but you get the idea.

<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.comment {
	background-color: #c0c0c0;
	border-style: solid;
	border-width: thin;
	width: 500px;
	margin-bottom: 10px;
}

.postRef {
	font-size: 12px;
	font-style: italic;
	text-align: right;
}
</style>
<body>

<div id="comments"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>

$(document).ready(function() {

	$commentDiv = $("#comments");
	
	$.get("https://disqus.com/api/3.0/forums/listPosts.json?forum=cflib&limit=10&related=thread&api_key=vSK5ndtqzaZGn4aEsYsR9xCrV1z656kxT0VODoLLbCOQvFQezy6wtBWNe9Jy3GW4", function(res, code) {
		//Good response?
		if(res.code === 0) {
			var result = "";
			for(var i=0, len=res.response.length; i<len; i++) {
				var post = res.response[i];
				console.dir(post);
				var html = "<div class='comment'>";
				html += "<img src='" + post.author.avatar.small.permalink + "'>";
				html += "<a href='"+ post.author.profileUrl + "'>" + post.author.name + "</a>";
				html += "<p>"+post.raw_message+"</p>";
				html += "<p class='postRef'>Posted at " + post.createdAt + " on <a href='"+ post.thread.link + "'>" + post.thread.title + "</a></p>";
				html += "</div>";
				
				result+=html;
			}
			$commentDiv.html(result);
		}
	});
});
</script>
</body>
</html>

You can view a live version of this in all its glory here:

The Disqus API is rather forgiving in terms of rate limits. You get 1000 calls per hour. My blog gets 4-6K visits per day, so this should be more than enough. Obviously you add a nice error message to the display if the comments didn't return for any reason.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Ty Whalin posted on 3/22/2014 at 2:24 AM

Well that is a cool way to make use of Disqus. Did not ever think about utilizing Disqus this way. Looked at the demo and looks like it would be something easy to implement or add on to.

Comment 2 by Spybubble posted on 8/7/2014 at 5:35 AM

To begin, you need to create an Program. You do not do this in the Administration or Dash panel. Instead must basically simply select the API weblink first. Since I was not creating a actual application I basically known as my app "CFLibJS" as a way of creating it obvious what I was developing. (For this trial I used CFLib for my resource.) I set the applying to study only, which I'd suggest highly. I don't think people can do anything sexy with just the API key you will need in the rule, but better secure than sorry. Lastly, use the referrers establishing to specify where your rule is permitted to run. I started with "localhost" and then included raymondcamden.com for the trial. Once you've designed you, write down your community key.

Comment 3 by Raymond Camden posted on 8/7/2014 at 5:44 AM

I'm sorry, but I don't understand what you are saying.

Comment 4 by Ty Whalin posted on 8/8/2014 at 6:09 PM

I must agree Ray, not sure what he is talking about. If I had to guess, it sound as if he is trying to find a way to secure the Disqus Plugin.

Comment 5 by Amira Rasiyah posted on 8/27/2014 at 2:55 PM

thanks sir, i'll try to practice tutorial above

Comment 6 by Mariya posted on 11/14/2014 at 4:50 AM

i just know about that, thanks for this tutorial

Comment 7 (In reply to #6) by Гетман posted on 12/23/2014 at 8:56 PM

+ 1)

Comment 8 by Matias Morales posted on 3/28/2017 at 12:37 AM

wow

Comment 9 (In reply to #8) by Raymond Camden posted on 3/28/2017 at 1:02 AM

I know, right?

Comment 10 (In reply to #6) by raju posted on 1/23/2018 at 10:59 AM

good

Comment 11 (In reply to #9) by raju posted on 1/23/2018 at 11:00 AM

good tutorial

Comment 12 by CarolJames posted on 2/15/2018 at 3:16 PM

Good Job!

Comment 13 by Amna Sheikh posted on 5/31/2018 at 7:33 AM

Excellent tutorial, Now I can use Disqus API on my personal blog.

Comment 14 by Soups posted on 12/25/2018 at 12:14 PM

Good information.