Weblog Comments via Twitter

Update: The following no longer applies to this weblog, but as far as I know will still work on a Jekyll-powered site.

This weblog is powered by [jekyll][1], a static website generator–it’s a great way to publish a site with minimal effort, but it can’t handle comments. A lot of folk with static sites opt to use [Disqus][2] or [Intense Debate][3] to add commenting to their sites, but, like jekyll user Benjamin Thomas, I find both services a wee bit over the top.

One [Disqus][2] feature I do like, though, is the ability to track conversations about a weblog post taking place on [Twitter][4]. So I decided to copy it.

Thanks to the [Juitter][5] plugin for [jQuery][9], it turned out to be a piece of cake.

First, you’ll need to add some [YAML Front Matter][10] to your posts that can be used to generate a hashtag, like so:

---
title: Weblog Comments via Twitter
layout: post
short: tw
description: Add comments from Twitter to your jekyll blog.
tags:
 - jekyll
 - juitter
 - twitter
---

(Since I'm already generating short URLs for posts to my site, I'm reusing the 'short' chunk of YAML Front Matter, but you can call it whatever you like.)

Then, add a `div` somewhere in your post template where you'd like your comments to display, and a note to inform readers that they can tweet comments to your weblog. The relevant part of my [jekyll][1] post template looks like this (only without those backslashes):

Comments

Add a comment by tweeting with the hashtag #mot_\{\{ page.short \}\}

As you can see, I’ve decided my hashtag will always begin #mot_, followed by the letters I’ve chosen in the YAML Front Matter–this results in a pretty odd string of letters, which should hopefully avoid the problem of displaying any irrelevant tweets that happen to have the same hashtag). Next, download [Juitter][5], stick it in your scripts directory, and add it in the `` of your site template. Finally, add something like the following snippet of JavaScript–again, without those pesky backslashes–on pages where you want the Twitter comments feature to work:
$(document).ready(function() {
$.Juitter.start({
	searchType:"searchWord",
	searchObject:"%23mot_\{\{ page.short \}\}",
	placeHolder:"tweets",
	loadMSG: "There are no comments on this post, yet...",
	});
	});
Replace `page.short` with the Liquid template tag that matches your YAML Front Matter, and note that you’ll need to [URL encode][11] the `#` to `%23`. You could also add, say, a post’s tags to Juitter’s `searchObject`, if you wanted to include general discussion on Twitter around the topic of your post. Of course, though the instructions above apply to [jekyll][1], this will work with pretty much any weblogging system, as long as you can generate a unique string for your hashtag (WordPress users, for example, could make use of the [``][8] tag.) It’s no match for a full-fledged commenting system–for one thing, comments are limited to 140 characters, and potential commenters to Twitter users–but I thought it’d be a fun way to let visitors have their say. Good idea? Bad idea? Fire up your Twitter client and let me know! [1]:http://wiki.github.com/mojombo/jekyll [2]:http://disqus.com/ [3]:http://www.intensedebate.com/ [4]:http://twitter.com [5]:http://juitter.com/ [6]:http://www.ubervu.com [7]:http://www.backtype.com/ [8]:http://codex.wordpress.org/Template_Tags/the_ID [9]:http://jquery.com/ [10]:http://wiki.github.com/mojombo/jekyll/yaml-front-matter [11]:http://en.wikipedia.org/wiki/URL_encoding#Percent-encoding_reserved_characters “It would be nice if Juitter mentioned this on their site!”