The occasional scrivener

I’ve started using Disqus, these are the steps I went through to integrate it into my Blosxom installation.

Prerequisites

Blosxom plugins:

• interpolate_fancy
• pagetype

Register at Disqus. When at the blog integration, stage, choose “other”.

You’ll get 3 pieces of generated code:

1. a javascript snippet that handles input and display of comments. This should go in your individual story page.
2. a snippet that’s a link to the comments, this should appear near your story in category and date views.
3. a JavaScript function that will populate the above link with the number of comments.

In your story.$flavour template, add the commenting section:

<?$pagetype::pagetype eq="story">
<div id="disqus_thread"></div><script type="text/javascript"
     src="http://disqus.com/forums/<username>/embed.js"></script>
<noscript>
<a href="http://<username>.disqus.com/?url=ref">
     View the forum thread.</a>
</noscript>
</?>

In conjunction to your story meta information (permalink etc) add the following:

<?$pagetype::pagetype ne="story">
<span class="comment-link">
&nbsp;<a href="$url$path/$fn.html#disqus_thread">Comments (View)</a>
</span>
</?>

The value of the href tag should essentially be the same as your permalink value.

Near the end of your foot.$flavour template:

<?$pagetype::pagetype ne="story">
<!-- disqus comment count code -->
<script type="text/javascript">
[ ... rest of code in item 3 above ... ]
<!-- end disqus code -->
</?>

Unclear? Leave a comment!

Update 2007-12-13: there’s an entry on the Disqus site discussing how to style Disqus elements with CSS.