Blog :: Disqus Integration

After the recent reorganization I realised I had a little problem with my comments. Comments on this blog are provided by Disqus using their Javascript integration method. Disqus was a Y Combinator funded startup that uses Django to provide remote hosting for comments. They have an API to provide more advanced integration options and provide plugins and templates for specific enviroments like Wordpress and Blogger, but it's easy to just step through the "Generic Integration" option and paste a few Javascript snippets in your HTML. Voila - comment counts on links to specific posts and comments and a comment submission box at the bottom of each post.

Until I moved my urls around. I know, I know - cool urls shouldn't change! In my defense I'm using HTTP 301 redirects to catch the old urls and redirect to the new locations. At any rate Disqus uses the URL as the key to load a comment thread - so change the URL and you lose the attached comments.

This was no good - I didn't want to lose all 17 comments this blog has received - but I did want to take numeric PK's out of the url for blog posts and separate my tech blog from my personal/theology blog. A quick poke through the Javascript disqus provides showed how to keep comments working at their new locations.

The generic installation instructions has you add some javascript where you want the comments widget to appear:

<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/metapundit/embed.js"></script>
<noscript><a href="http://metapundit.disqus.com/?url=ref">View the discussion thread.</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by 
<span class="logo-disqus">Disqus</span></a>

This code doesn't have any obvious dependencies on the current location (it's referenced in the embed.js file) so we can't fix our problem. Fortunately the team at Disqus anticipated our problem and provided a few variables to customise the Javascript embed (see the JSEmbed docs for details). Adding a quick line of javascript defining a variable to the template for individual blog posts allows me to refer back to the old PK-style urls:

<script type="text/javascript">
var disqus_url = "http://metapundit.net/sections/blog/242";
</script>

The other problem is getting the comment count to show up on links to individual blog posts. Disqus lets you display this data by adding an identifying anchor (#disqus_thread) to the links you want modified and than add some more javascript to your post list page:

<script type="text/javascript">
<script type="text/javascript">
//<![CDATA[
(function() {
		var links = document.getElementsByTagName('a');
		var query = '?';
		for(var i = 0; i < links.length; i++) {
			if(links[i].href.indexOf('#disqus_thread') >= 0) {
				query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
			}
		}
		document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/metapundit/get_num_replies.js' + query + '"></' + 'script>');
	})();
//]]>
</script>

This injects your comment count into the text of the link. Now that my links aren't pointing to the canonical location (as far as Disqus is concerned) I needed to modify the Javascript. Adding the old numeric key value to the id element of the links allowed me to make a minor modification:

if(links[i].href.indexOf('#disqus_thread') >= 0) {  
    query += 'url' + i + '=' + encodeURIComponent('http://metapundit.net/sections/blog/' + links[i].id.split("_")[1]) + '&';
}

and build the old url to send back to Disqus...

Posted on July 6th 2009, 12:00 PM

blog comments powered by Disqus