In a previous post I discussed using Twitter and FeedBurner to create collaborative podcasts. This post will also detail a way you can expand the reach of your tweets using FeedBurner: we’ll be creating a custom Twitter “widget” for your blog or website using FeedBurner’s “BuzzBoost” feature.

The first thing we need to do is get our tweets into FeedBurner. This can be accomplished by simply burning a feed of the following format:

http://[UserName]:[password]@twitter.com/statuses/user_timeline.atom

This will return your last 20 tweets. If you want a different number of tweets you may set the count parameter. You could also use a URI of the form:

http://twitter.com/statuses/user_timeline/[UserNameorID].atom

however this returned a 400 error for me each time I tried it (suggesting that FeedBurner’s servers are being rate limited). More information about getting info from Twitter’s API can be found at the Twitter API Wiki.

Once our feed has been successfully burned we probably want to set a few options. The first thing is to set “NoIndex” under the Publicize tab which will stop search engines trying to index your tweets. The second thing is to turn BuzzBoost on (also under publicize). I chose to not display anything but the title (the tweet) and to only show 1 tweet. Now we can stick the script FeedBurner spits out on our webpage or blog and we’ll be able to see our tweets! However, there are still a few optimizations we might want to make.

The current list of tweets is a bulleted list which is not very nice looking. Luckily, it is easy to change that with some CSS. Something like this will get rid of the bullets:

#[FeedURI] ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

You can find out more about the exact structure of BuzzBoost’s HTML snippets and how to customize them on this help page. We also probably want to get rid of the annoying “UserName:” before every tweet. This can be accomplished with a bit of javascript:

var i, arr = document.getElementsByTagName("span");
for (i = 0; i < arr.length; i++) {
  if (arr[i].className == "headline") {
    var alink = arr[i].getElementsByTagName("A")[0];
    alink.innerHTML = alink.innerHTML.substring(alink.innerHTML.indexOf(':')+2, alink.innerHTML.length);
  }
}

While all of this could easily be done server side with half the hassle and twice the compatibility it’s sometimes more fun to hack away at a problem using existing web services. If you use this on your own site at all let me know how it turns out for you; good luck!

P.S. Before anyone points it out: yes I know Twitter already provides similar functionality (in fact I use it on this blog). It’s just more fun to do it yourself sometimes, not to mention that it allows for more customization, analytics, etc.