Feed widget with YQL & jQuery

Over on my other site (Salathe, just a single page site) I felt that keeping the page static was a little bit boring: it needed some life injected into it. That life, I decided, would be a summary of my recent blog posts on here. They don’t come all too often but I figured it would be nice to syndicate them across there and maybe help people find out a bit more about me if they land on the Salathe site.

Preamble

I could’ve gone the server-side route; use PHP to grab the feed from here (well, Feedburner actually), parse it (probably with SimpleXML for simplicity) and display it with my desired HTML. And that’s a perfectly acceptable approach. However, since the feed content is only really an added extra I didn’t want to add the feed content to the HTML page and have that overwhelm the main content on there (the introduction and contact info). Because of that, I decided to take the client-side approach using JavaScript to grab, parse and inject our feed into the page.

The Feedburner feed, as is usual for feeds, comes in XML format and due to the security restrictions of browsers I can’t just go and grab that with JavaScript. Besides, I didn’t want the whole feed anyway: who wants to load in a 38kb feed just to grab some headings? (What I do end up grabbing is around 4kb.)

Introducing YQL

To grab only what I want, and to provide a format that I can actually get at, as well as to satisfy a niggling urge to put it into some practical use, I headed over to Yahooland and made use of the awesome tool that is YQL. YQL provides a SQL-like syntax for getting at the structured data (feeds are structured data!) around the web. It allows me to ask for specific items of data from the web, such as “give me the title and permalink for the last 10 items from Yahoo news” for example. There’s a huge range of data that YQL can get its hands on (stopping just short of the entire web) but that’s beyond the scope of this blog entry. The service also allows me to get responses in XML or JSONP, the latter being important because I can grab this from a remote domain name without the security restrictions coming into play.

Querying for data

So to get at my feed, I can simply issue the query:
Try it yourself

For my little widget, I don’t really need everything brought back by that query. Firstly, I only want the latest 5 items instead of the 10 that Feedburner provides. Secondly, I only really need the title, date, link and excerpt for each blog entry. The Feedburner feed provides extra information like the comments link, tags, and the full HTML content of the entry. Grabbing only what I need shrinks down the size of the data coming down the pipe and results in things getting done faster. I mentioned before that I wanted the results in JSONP format which is a simple enough task: just click the JSON radio button in the YQL console, or add “format=json&callback=cbfunc” (where cbfunc is your callback function name) to the REST query URL. So to grab only what I want, the following YQL query is used: Try it yourself

Aside: the (0,5) limits YQL to the first 5 items in the Feedburner feed.

Right, now we have the data that we want and can get it in JSONP format. How do we go about doing that exactly? JavaScript time!

Retrieving the JSONP with jQuery

I really like using jQuery for adding in extra goodness to sites and I was already using it for a little piece of DOM manipulation on the page (interesting but not to be covered in this post). Plus, jQuery makes grabbing JSONP content very, very simple indeed using its jQuery.getJSON (docs) function. Basically we provide that function with an URL to the JSON document and a callback function to execute once jQuery has grabbed it. See the docs for examples.

Creating a widget

Generally, there’s a logical structure to creating a widget like this one. Steps involve grabbing the required data, parsing it, building the HTML and attaching it to the page. Since this would take an inordinately long time to explain step by step (perhaps some other intrepid blogger has already done it) I’ll just show you with code. Below is the JavaScript—in jQuery plugin form though that isn’t particularly necessary or important (just means it’s all wrapped up neatly and only concerned with itself). There are a number of variables to hold HTML, the YQL URL and a number of functions which parse the JSON object into HTML form and a little bit of effects to fade in the HTML block when it’s all ready. There’s also a function to parse the dates from “Mon, 05 Jan 2009 16:28:34 +0000″ into “5 Jan” form.

Put simply, the widget code just says, “when the page is loaded, ask YQL for the filtered feed, parse the response items into a HTML list and inject it into my page just above the footer.”

The widget code

As well as the HTML to display the feed items, the widget also adds a CSS stylesheet to add a little bit of formatting: link. The widget code itself (which may change in the future) can be found here.

End result

What we’re left with is a neat little list of my last 5 blog entries.

Salathe.co.uk before/after widget