Comments are the life blood of a blog. Whether from regulars or people just passing through, having a say is the essence of blogging. In this post, I review the various methods for getting your most recent comments into the sidebar of your blog, where they belong. I also unveil a new hack, Hearsay, which helps format and display your readers' comments.

Motivation

After writing up a few entries on comment feeds for the Blogger Hack Wiki, I thought I'd road-test a few methods to get it up and running on my own blog.

My brief was simple. I wanted "near-real-time" comments (say, 10 minute delay), displayed on each page along with a timestamp, the author and a link to the original post. I also wanted to show the first few lines of the comment and have control over the number of comments displayed. Any code should be lightweight and not stress my diskspace, bandwidth or the user-experience. Some AJAX-stuff might be nice. Oh, and did I mention it had to be free, secure and entirely lacking in hassle?

Dead Ends

The first method I looked at was Blogger's own recent comments "hack" (I use the term begrudgingly). They point out that this will only display comments for posts on the front page, in the order of posts. On my blog, most comments are on past posts and I only keep three on the front page (long articles), so this is useless.

Next, I tried the Farrago Recent Comment Hack (as featured here on Freshblog). I found this suffered from the same limitations as the Blogger one, albeit formatted a little better.

It dawned on me that formatting wasn't the issue; getting my hands on a comment feed (preferably RSS) was the thing. But how?

I moved onto one I was hopeful about: Singpolyma's Mailbucket hack. This involves setting up your email account to forward your comment notification messages to a Mailbucket email address, which in turn publishes it as an RSS feed. It is a mail2rss application and took all of two minutes to get up and running. Very cool.

Unfortunately, the HTML of each comment gets "lost in translation", so important information - like the URL of the post! - disappears while the rest is mangled. It can be recovered on HTML pages that Mailbucket provide, but then I'd have to scrape those so ... what's the point of getting it as RSS? I don't mind telling you that this was a big blow, and I even got underway a still-born effort to cobble something together with iframe elements pointing to Mailbucket's HTML page. (That is one hack will stay locked up in my dungeon lab, never to see the light of day.)

So I tried a variant of this approach, using Shantanu's Google Groups hack. The idea is to forward comment notification emails to a special Google Group setup for the purpose, and then tap it via RSS. A little more hassle to setup - fortunately I had a Google account - but the result was the same disappointment as with Mailbucket. Messages were truncated. Stuff got chopped out. Bits were missing.

I toyed with Thom Shannon's excellent Blogger Comment Feeds hack. Good as this is, it requires a BlogID and PostID to fetch all comments for a particular post. I doubted that this could be re-purposed to get recent comments across all posts. Not without doing something really, really, ugly. And regretable.

A Path Clears

OK - that left me with one option: Amit Argawal's Comment Feed Using Another Blog hack. The implementation was a breeze: create a new blog, strip out most of the template and set it up to receive (and publish) emails from my Gmail account. Then, setup my Gmail account to forward comment notifications (as above) to the new blog. Now I can securely and automatically capture comments and get the comments as HTML, RSS, email - and it took about six minutes! Brilliant.

[NB: Call it superstition, but I'm uncomfortable about search engines finding a large repository of content word-for-word identical with big chunks of my blog. I figure it would count against me in search engine rankings and something could accidentally get labelled a splog. For that reason, I try to keep the location of my comment group and blog a secret, using the various "do not publish/ping" type options ... I suggest you do the same too.]

One Hurdle ...

Now, I was getting fully-fledged RSS and Atom feeds, replete with well-formated HTML and important timestamp and other info. I pumped the resulting comment feed through good ol' Feedburner, to collect stats and other goodies. Now, for the display: Feedburner's RSS-to-HTML service was a problem in that the fields referred to the comment blog, not the post blog. That is, the titles of all the "posts" (actually, comments) were like this:

[The AFL Player Spectator] 7/11/2006 05:19:22 PM

the URLs pointed to my comments blog (instead of my "real" blog) and the author was always me (since the comments were forwarded from my Gmail account). This problem would also afflict the RSS-to-JavaScript solutions out there too. Fortunately, the required information about URLs, timestamps, authors etc was in the bottom of the RSS description field (as Blogger kindly put it in the footer of the notification email).

What's needed was a script to extract the info from the feed and make a nice presentable chunk of HTML for display. This would also mean you could publish multiple comment feeds from different blogs on any page - not just blogs. Mull that over!

The Way Out

Enter "Hearsay". This is a legal term for (roughly) repeating what someone else said. I call it this because comments go from Blogger, to Google, back out to Blogger, to Feedburner, to Ning and finally to the reader. (Honestly, I find it's best not dwell on it.)

Anyway, this script grabs the RSS feed of your comment blog (perhaps via Feedburner, perhaps not), runs it through Singpolyma's XOXOtools Ning app for conversion to JSON for some poor-man's AJAX-style asynchronous rendering, based on my backlinker hack. (No, I'm not just mashing my fist on the keyboard - these are all real words.)

Long story short, if you want recent comments in your sidebar, setup a Comments Blog, then put this in your main blog's template header:

<script type="text/javascript" src="http://ghill.customer.netspace.net.au/hearsay/hearsay-v01.js">
</script>

And put this in your sidebar where you'd like your really most recent comments to magically appear:

<div id="recent-comments" ><center><br/><br/><br/>Please wait ... <BR/>loading comments.<BR/><BR/><img src="http://ghill.customer.netspace.net.au/snake_transparent.gif"/>
</center></div>
<script type="text/javascript">
hearsay("http://feeds.feedburner.com/MyCommentBlogRSSFeed", "recent-comments");
</script>

Replace the URL with your comment blog's RSS feed. That is, not the atom feed (atom.xml) - the RSS one (rss.xml). That's it. You can check it out in action at The Speccy - scroll down and look for comments in the sidebar. (I apologise in advance if any of you blanch at the level of venom in the comments; it's the nature of my blog.)

It displays a list of comments, including a description comprising of the author, "friendly" elapsed time, title of the post and URL of the post. You also get a short summary and, on mouseclick, the full text of the comment. (Formerly mouseover - thanks Johan, for the advice.)

Of course, you can tweak it. (Hey, this is Blog Hacking, not Blog Cut'n'Paste!) You can set the number of comments (default is 5) and the maximum number of characters (truncated to the last whole word) by putting this in the script above, just before the hearsay(...)

comCount=5; comSize=100;

You can also add styles in your style sheet. The description has class="hearsay-descr", the summary is "hearsay-summary" and the full text is "hearsay-full". You might like to add some CSS like this:

.hearsay-full
{
border: solid black 0.2em;
padding: 0.2em;
margin: 0.2em;
color: #222;
}

to make a border appear around the expanded comment.

Lastly, I added a little button that will "grow" your list of comments:

<div id="more-comments"><center><span style="font-style: italic; padding: 0.5em;" title="Display next five comments"><a onClick='comCount+=5; HSProcQuery(JSONfeed);'>Older Comments</a></span></center></div>

You can change the 5 to what ever you like. Eg comCount*=2 will double the list with each click. Based on similar logic, you could make the summary size grow or shrink too.

Please feel free to use the hack (human-readable source code here) and make any modifications you like (it's licensed under Creative Commons). I'm still feeling my way with this stuff, so I'd be delighted to hear of any suggestions about the code or presentation; what would you want to see in a sidebar comment solution? Drop us a note below ... who knows where your comment might end up.

Filed In: comments blogger blogtech webtech feeds