jQuery Blog Learning jQuery

On April 16th, 2007, Google announced the Google AJAX Feed API. This is a pretty cool thing as it facilitates feed mashups by providing the server component. This means that developers can easily mash feeds on the client by simply including Google's new API script. And Google has provided a nice Developer's Guide which shows how to get started.

To simplify this even more for jQuery developers, I've created a small plugin which performs the task of unobtrusively converting an element, such as an <a>, into a <div> element which holds feed content.

Update: On May 8th, Google announced the Feed Control. As a result, this plugin has been updated (and simplified!) to use the new Google control.

This page demonstrates the plugin by converting the markup displayed below into the feed content displayed in the sidebar to the right.

<div id="feeds">
    <a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>
    <a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a>
</div>

Using the Google API, each anchor is converted to a series of semantic <div> elements which can be styled to your liking using CSS. The CSS structure of the generated markup is detailed here: http://code.google.com/apis/ajaxfeeds/documentation/reference.html

The following script is included in the head of this document:

<!-- include Google Feed API -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=[your API key]"></script>

<!-- include this plugin -->
<script type="text/javascript" src="jquery.gfeed.js"></script>

<script type="text/javascript">
    // when the DOM is ready, convert the feed anchors into feed content
    $(document).ready(function() {
        $('a.feed').gFeed( { target: '#feeds', tabs: true } );
    });
</script>

Options

Options can be passed to the gFeed method using an object literal. The following options are supported:

target

jQuery selector which identifies where the feed content should be inserted on the page.

title

Allows you to provide a specific feed title to override the markup.

url

Allows you to provide a specific url for the feed (which means you don't have to use anchors).

max

Identifies the maximum number of feed items to display for a given feed. The default is 5.

tabs

true if feeds should be rendered using Google's tabbed drawing mode.

Using the options argument we can limit each feed to only 3 items like this:

$(document).ready(function() {
    $('a.feed').gFeed( { max: 3 } );
});

Manually Adding a Feed

Rather than convert existing elements to feeds, we can easily add feeds on the fly like this:

$(document).ready(function() {
    // add a feed manually
    $('#alistapart').gFeed({ 
        url: 'http://www.alistapart.com/feed/rss.xml',
        title: 'A List Apart Feed (Added by Brute Force)'
    });    
});