Mottr.am

Weblog Comments via Twitter

on

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, 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 or Intense Debate to add commenting to their sites, but, like jekyll user Benjamin Thomas, I find both services a wee bit over the top.

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

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

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

---
title: Weblog Comments via Twitter
layout: post
category: basic
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 post template looks like this (only without those backslashes):

<section>
<header><h1>Comments</h1></header>
<p>Add a comment by tweeting with the hashtag #mot_\{\{ page.short \}\}</p>
<div id="tweets"></div>
</section>

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, stick it in your scripts directory, and add it in the <head> 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: "<em>There are no comments on this post, yet...</em>",
	});
	});

Replace page.short with the Liquid template tag that matches your YAML Front Matter, and note that you’ll need to URL encode 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, 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 <?php the_ID(); ?> 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!