uvshock

Something I’ve been wanting to build for a while is a homepage tool that displays what you’ve been doing around the web. For example, your Twitter feed, del.icio.us/ma.gnolia (or maybe not) bookmarks and things like that.

The trouble I had when constructing such a tool were that syndication feeds come in two flavours - RSS and Atom. The first challenge is that they’re different syntactically. While they’re easy enough (although not obviously) to differentiate between it gets tricky when you start to realise there’s different versions of those two flavours. The obvious solution here is to use a prebuilt library to handle feeds but I’m still looking for one I like using.

I stumbled across the Google AJAX Feeds API when looking for the JavaScript libraries hosting. The Feeds API does two things - it handles the caching side of things using Google’s FeedFetcher service (the same that runs behind Google Reader) and it parses the RSS/Atom into either XML or JSON. While the caching does mean feeds are only refreshed every hour or so the rest of the service is brilliant.

It’s also very simple to use. First, you need to sign up for an API key if you don’t already have one, and then include the Google JavaScript API into your page:

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>

Next, we need to load the Feeds API, get data from some feeds and output it to the page:

There are some more interesting features of the API, one of which I’m using on uvshock: the FeedControl. This simple to use control outputs your feed data in a HTML template that’s very customisable by CSS. Here’s an example of how I’m using it:

FeedControl imports it’s own base stylesheet which sometimes needs to be overridden (as in line 16 of the CSS snippet). I suggest using Firebug as well as the stylesheet for this.

All in all, this is a very useful tool if you’re looking to create a quick ‘active’ homepage.

Tweet This Post