Integrating Disqus with dasBlog

I got a ping this weekend from a dasBlog user who was attempting to integrate Disqus with dasBlog. Disqus, for the uninitiated, is one of the more popular discussion systems available, it  centralizes and simplifies the management of comments on your site.

The problem we faced revolved around the fact that Disqus did not seem to mesh well with the home page. The default configuration of dasBlog displays multiple posts, and each post is laid out with a simple dynamic template (*.blogtemplate) and within each template is the reference to the Disqus integration scripts, unfortunately this is where the problem starts.

You see for each blog post and the associated Disqus comment thread requires two pieces of information, the disqus_identifier (blog unique Id) and disqus_url (blog url), but unfortunately these javascript variables are global and thus each page can technically only have one Disqus thread loaded. This is fine on each individual post (which uses the same template), but breaks down on the main page.

dasBlog Integration

For this to work by default the home page should not load any comments but you can click on a link to load comments for any single item, additionally when each individual post loads it should automatically pull up the related comments.

This how I accomplished it.

• Use the dasBlog Macro to fill out Disqus variables
  • disqus_identifier => <%itemGuid%>,
  • disqus_url => <%permalinkurl%>.
• Use an existing dasBlog Macro to determine if we are on the main page or on an individual post.
  • I am using <% DrawPostPagingPrevious() %> [this is hack, I will need to develop a new Macro for this]
• Use the Disqus AJAX call to reset and load different comments based on what was clicked or which post was loaded.

Step 1: We want to add the following script to the main template, as in homeTemplate.blogtemplate. This script allows us to integrate with our individual Disqus threads, and also provides a function that we can use to reset that thread to alternate threads via AJAX. You should change the default values (disqus_shortname, disqus_url) to those associated with your blog.

Step 2: In the template designed for individual post (itemTemplate.blogtemplate) we want to be able to load the comments automatically if this is indeed a single post (not your home page). Unfortunately there is no Macro that makes that distinguishes between the two types of pages so I had to use the following hack:

addEventListener is just a standard method that will run when the page loads.

Finally if you also want to load the comments from each post on your home page by clicking on, say, a comments link you could add the following link with an onclick event.

Comments

Obviously the above code is not really necessary, you could just put a link directly to the comments on the individual page, but I like the idea of providing the ability to interact with multiple posts from one location.

So that is it, I committed the complete Disqus theme here! This does remind me that dasBlog continues to need our collective attention, maybe Facebook comments integration should be next.