Tossing the Disqus

Or how I overcame Disqus and Blogger and by sheer force of will installed the Disqus commenting system on my remotely hosted, FTP published, highly customized Blogger blog template.

Whew.  OK, listen up ’cause I’m gonna tell you a sad story.

I have been watching Disqus for months, and considering trying to install it here at Newsome.Org.  Since I have a remotely hosted, FTP published, highly customized blog template and a Leopard-Skin Pillbox Hat (not really, but I’m punch drunk), both one of which I publish via Blogger, it was hard.  Now when I say it was hard, what I mean is that is was really, absolutely, just about impossibly, freaking hard.

So here’s how I did it.  All of this assumes you have registered at Disqus and have an account to use.  If this confuses you, move to Step 2 and skip Steps 1 and 3-7.

Step 1: Unsuccessfully Seek Help

First I tried the various options suggested by the Minimalist-inspired Disqus help pages.  I tried to manually upload my template, which I knew wouldn’t work.  I tried to manually add the code via these instructions.  No go.  I googled around looking for something to show me the way.  Nada.

Next I emailed Disqus to see if there was any other documentation I could look at.  I got a prompt response, telling me I should use a different blog template, thereby simultaneously experiencing both an epic instance of the tail trying to wag the dog as well as another reminder that I’m not as cool as my friend Louis.  I know that, of course, but I generally blame it on age.  Whatever the half-life of cool is, I have to be 2-3 half lives older than him.  If Dave Winer had invented the internet back when I was a young man, I’d be Robert Scoble and Louis Gray combined, baby.  Of course if I’d had the internet as a kid, I’d also be degreeless, homeless and living under a bridge somewhere.  In fact, the only technology we had when I was a kid were tractors and the phone.  And both got me in lots of trouble lots of times.  Generally when I should have been walking those four snowy miles to and from school.  And all that.

Anyway, after respectfully passing on Disqus’s suggestion that I demolish my blog and rebuild it just so I could use their application and pulling my bruised ego together, I got to work.

Step 2: Drink Some Bourbon

Locate a bottle of bourbon.  Open it, take a big gulp.  Place it within easy reach of your keyboard.

Step 3: Add the Standard Disqus Header

Add the standard Disqus header right before the </body> tag:

<!– Begin Disqus Header–>
<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/myusername/get_num_replies.js&#8217; + query + ‘”></’ +

‘script>’);
})();
//]]>
</script>
<!– End Disqus Header->

Step 4: Create the New Comment Link

Here’s where I had to start figuring stuff out on my own.  I changed the code at the end of the blogPost <div> to:

<$BlogItemBody$>
<div class=”byline”>
Posted by <$BlogItemAuthorNickname$> @ <$BlogItemDateTime$> |
<a href=”<$BlogItemPermalinkURL$>”>Permalink</a> |
<a href=”<$BlogItemPermalinkURL$>”>Leave Comment</a>

I did it that way so it would show both a Permalink and an obvious “Leave a Comment” link.  Yes, they go to the same place, but I want to make it easy for people to find the place to write a comment.

Step 5: Display the Comment Count

In my “Discuss” links, I changed the code to:

Discuss:
<a class=”comment-link” href=”<$BlogItemPermalinkURL$>#disqus_thread”>View Comments</a> |
<BlogItemCommentsEnabled><a class=”comment-link” href=”<$BlogItemPermalinkURL$>#comments”><$BlogItemCommentCount$> Pre-Disqus Comments</a></BlogItemCommentsEnabled> |
<a href=”http://search.blogger.com/blogsearch?q=link:<$BlogItemPermalinkUrl$>” target=”_blank”>Inbound Links</a>
<br />

The <BlogItemCommentsEnabled>/Pre-Disqus Comments part was required to preserve my existing comments (see Step 6 below).

The only other change was to add the required #disqus_thread after the Permalink URL.

NOTE: This is before the <ItemPage> tag.  I want new commenters to use Disqus.

Step 6: Preserve Your Existing Comments

That got me up and running, with one gigantic problem.  I have lots and lots of existing comments, and inexplicably there doesn’t seem to be a ready-made way to import Blogger comments into Disqus.  Obviously, Disqus should spend some of that mad coin to write one.  I saw some roundabout ways that might work, but they were on the wrong side of the possible benefit – time required – likely result calculation.

So I needed to preserve my existing comments in place.

After some trial and horror, I ended up with this:

<ItemPage>
<BlogItemCommentsEnabled>
<a name=”comments”></a>
<h4><$BlogItemCommentCount$> Comment(s):</h4>

<BlogItemComments>
<a name=”<$BlogCommentNumber$>”></a>

<p class=”comment-body”>
<$BlogCommentBody$>
</p>

<p class=”comment-data”>
By <$BlogCommentAuthor$>, at
<a href=”#<$BlogCommentNumber$>”>
<$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
<br />
**************************
</p>
</BlogItemCommen
ts
>

</BlogItemCommentsEnabled>
</p>

<div id=”disqus_thread”></div><script type=”text/javascript” src=”http://disqus.com/forums/newsome/embed.js&#8221;></script><noscript><a href=http://myusername.disqus.com/?url=ref>View the discussion thread.</a></noscript>
</div></div>
</ItemPage>

All of that brain damage does three things.  It displays my previous comments (recall the “Pre-Disqus Comments” code I added in Step 5).  It’s not ideal to have two Comments linkcounts, but you need to let people know those previous comments are still in place.  It removes (i.e., doesn’t contain) the code that creates the Blogger “Leave a Comment” link (because I want new commenters to use Disqus).  And it displays the Disqus comment box and comments underneath the previous comments.

NOTE:  All of this is within the <ItemPage> tags, because we only want the comments and the Disqus comment box to appear on the item pages, which are sometimes referred to as post pages.  Or, in the case of uninspired writing, ghost towns.

Step 7: Update Your Blog Via Blogger

After updating my blog, which takes forever (come on Blogger, please get a handle on the disintegrating Blogger/FTP experience), I have Disqus comments, while preserving my previous comments.

If needed, repeat Step 2.

So there you have it.  I hope this is helpful to someone.

Now, why not leave a comment and reward an old, un-cool man’s effort!