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.