Twitter: raymondcamden


Address: Lafayette, LA, USA

Example of a JavaScript Disqus Recent Comment Widget

03-21-2014 4,450 views JavaScript 5 Comments

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.

5 Comments

  • Commented on 03-21-2014 at 5:24 PM
    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.
  • Commented on 08-06-2014 at 8:35 PM
    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.
  • Commented on 08-06-2014 at 8:44 PM
    I'm sorry, but I don't understand what you are saying.
  • Commented on 08-08-2014 at 9:09 AM
    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.
  • Commented on 08-27-2014 at 5:55 AM
    thanks sir, i'll try to practice tutorial above

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty