Some time ago I reworked my home page to feature content from various other sites I post to (blogs, flickr, delicious) by using some JSON tricks to pull in their feeds. I blogged about how to do this with Feedburner's JSON API, so that my actual page was just static HTML and all the work was done client-side.
Last week I decided to revisit this using Google's new AJAX feeds API. Feedburner's API never seemed to be well supported (it came out of a hackathon) and it forced me to serialize my requests. In the process I neatened up a bunch of the code.
Google's API is pretty straight-forward. It uses a loader model that is similar to Dojo's dojo.require, so you load the main Google library:
<script src="http://www.google.com/jsapi?key=YOURAPIKEY" type="text/javascript"></script>and then ask it to load their feed library:
google.load('feeds', '1');
They have a handy way of setting a callback to be called when the
libraries are loaded:
google.setOnLoadCallback(function () { /* just add code */ });
By putting all three of these together we have a straight-forward way to
execute code at the right time.
I refactored the code that inserts the feed data into the page a lot. I fleshed out the concept of input filters from simply filtering the title to filtering the whole item objects. This allows for a more flexible transformation from the information that is presented in the RSS feeds to information that I want to present to visitors to my page. In practice I only used it to remove my name from Twitter updates. Instead of hard-coding the DOM node creation like I did in the previous version of the code I moved to a theme model. The theme function takes a feed entry and returns a DOM node to append to the target DOM node.
The flexibility of Google's API let me abandon my separate code path for displaying my Flickr images. Previously I used Flickr's own JSON feed API but since Google's feed API supports returning RSS extensions I used the Flickr's MediaRSS compliant feeds to show thumbnails and links. They even provide a handy cross-browser implementation of getElementsByTagNameNS (google.feeds.getElementsByTagNameNS) for us to use.
I'm tempted to write a client-side implementation of Jeremy Keith's lifestream thing using this API.
Take a look at the code running on my home page or check out the script.