Disqus Migration - part 2 - Latest Comments widget
One of the things that I've always liked to have on my blogs over the years is a "latest comments" widget. I like to leave all my blog posts open for comment indefinitely, and this gives users a way to see the latest comments, even if they are on very old blog posts.
Disqus doesn't have a "drop-in" JavaScript snippet to do this, but Disqus does have an extensive HTTP API that allowed me to build my own.
The terminoloy that Disqus uses was a little confusing for me, but by reading some of the docs and trying a few tests in Fiddler, I was able to see that the forums/listPosts API endpoint was the one I wanted. You'll need to make sure that you have a public key generated in order to use the endpoint. Here's the widget I wrote:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| var commentDiv = $("#latestComments"); | |
| if (!commentDiv || commentDiv.length <= 0) | |
| return; | |
| var url = "https://disqus.com/api/3.0/forums/listPosts.json?forum=[your forum name]&limit=10&related=thread&order=desc&api_key=[put your own API key here]"; | |
| $.get(url, function (res, code) { | |
| var html = ""; | |
| if (res.code === 0) { | |
| if (res.response.length <= 0) { | |
| html += "There are no comments."; | |
| } else { | |
| html += "<ul class=\"list-group\">"; | |
| for (var i = 0, len = res.response.length; i < len; i++) { | |
| var post = res.response[i]; | |
| html += "<li class=\"list-group-item\"><strong>"; | |
| html += post.author.name; | |
| html += "</strong> on <a href=\"" + post.url + "\">"; | |
| html += post.thread.clean_title; | |
| html += "</a></li>"; | |
| } | |
| html += "</ul>"; | |
| } | |
| } else { | |
| html = "Unable to load latest comments."; | |
| } | |
| commentDiv.html(html); | |
| }); | |
| }); |
Some notes:
- Disqus rate limits you to 1000/requests per hour. For my blog, that's probably more than enough.
- This script depends on jQuery, but you can use something else for your DOM manipulation, even plain JavaScript if that's your jam.
- I was at least partially inspired by Raymond Camden blogging about something similar.
