Getting Twitter Updates On My Blog
Yes, I have started Twittering or Tweeting or whatever you call it (you can see my Tweets here) and immediately I wanted to update my blog to [a] show a "Follow Me" link and [b] show my latest tweets. As I'm hosted on blogs.msdn.com, I don't have much control over my blog. Essentially I can override the Title, News and Header, apply a different Skin and add some CSS Overrides. What I can't do is directly modify the skin content so a little effort is required to, for example, add something to the navigation.
What we need is a little Javascript to modify the DOM (after it's loaded but ideally we don't want to wait for images to load) and add some extra elements in the appropriate place. I thought this would be a good opportunity to have a play around with some of the Javascript frameworks out there. I started with jQuery.
I have to say those guys have done a brilliant job with documentation and conceptually it's easy to pick up and be productive quickly. The $(document).ready(function) function allows me to hook up my code so it starts to execute when the DOM is ready to go. It didn't take me long to piece together enough bits to add the "Follow me on Twitter" link into the navbar above.
At that point I decided I also wanted to incorporate Lightbox2, a very cool way to overlay images on the page (click the image on the right and a higher res image will open with Lightbox2). Lightbox2 however, makes use of Prototype and Scriptaculous. For one thing I was starting to have a dependency on a lot of JS libraries and for another I had a conflict. jQuery.noConflict( ) sorted out my conflict problem but I realised that, as I needed Prototype for Lightbox2, I should probably just make use of it for everything else. Bye bye jQuery (sorry jQuery, I liked you). Hello Prototype.
I'll be honest, I don't think the docs for Prototype are quite as good as jQuery and it took me a little longer to get going but the things I'm doing aren't radically different in the two so it didn't take me long to port my code. Just for reference, Prototype uses document.observe("dom:loaded", function) to hook DOM ready.
That was the easy bit over. Next I wanted to display my recent Tweets and I stumbled across the excellent Twitter.js script from Remy Sharp. This implements a similar mechanism to jQuery for determining when the DOM is loaded so in fact it's overkill in my case (as I don't call it until I know the DOM is ready). I might get around to sorting this out one day but for now it'll do. The script is very neat and allows you to set various parameters and a template that will be populated with your tweets. The Twitter API is less neat. There seems to be no way to specify that you only want specific items or fields so you end up transferring a very heavy JSON lump to the client and throwing about 95% of it away in my case.
At this point I had tweets on my blog. However I soon I noticed that all was okay in Firefox but things were less reliable in IE. Often the tweets would never load. Much head scratching and debugging ensued and eventually I ended up staring at Fiddler traces trying to figure out why one worked and one didn't.
I got a bit lucky here as I quickly spotted a header that existed in the IE call but not in the FF one: If-Modified-Since. Twitter was responding with a 200 OK (rather than a 304 Not Modified) and an empty response body. A bit odd - the way the Twitter.js script works is, the response is supposed to contain a JS function call that renders the JSON payload. So empty response = no function call = no tweets. I then spotted the following in the Twitter API documentation for the user_timeline call (my colouring):
"Parameter: since. Optional. Narrows the returned results to just those statuses created after the specified HTTP-formatted date. The same behavior is available by setting an If-Modified-Since header in your HTTP request. Ex: http://twitter.com/statuses/user_timeline.rss?since=Tue%2C+27+Mar+2007+22%3A55%3A48+GMT"
The If-Modified-Since header is being interpreted as the "since" parameter on the user_timeline API call giving me only the tweets since the last time IE visited. Not really what I wanted. To fix this I appended a since paramater and set it to a date one week in the past. Now I have both IE and Firefox working happily.
