I’ve finally had a chance to work with the new Google AJAX Feed API and found it quite useful.

I wanted to be able to read in a single feed that pulls all of my blog, twitter, del.icio.us and digg posts. Not many of them need summaries so I’ll pull in just titles and style the buttons depending on which site they refer to.

Get a Key

Sign up for a the Google AJAX Feed API and don’t lose it. When choosing the directory from your site to assign the key, don’t go with a subdirectory. You may change where you have to use it and you can always use it in multiple instances.

Create the Script

There are so many different ways to go about writing the script to display the feeds on the page. The easiest approach was to create a div for each item, have the div contain a p tag that would contain the link and title.

There are two lines you should adjust in the following code. The one that references the xml file of the feed and the one below it that adjusts the number of items to display. Place this into a script tag in the header or into a separate file.

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://www.google.com/yourfeed.xml");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var para = document.createElement("p");
var link = document.createElement("a");
var title = document.createTextNode(entry.title);
container.appendChild(para);
para.appendChild(link);
link.appendChild(title);
link.href = entry.link;
link.className = "feedentry";
}
}
});
}
google.setOnLoadCallback(initialize);

Call the Script

In the header of your html doc, you’ll need to hit the google key. Put in a link to the script, replace the key below with your own:

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

You’ll also need to place a div into your document that the js will find and execute the code on:

<div id = "feed"></div>

In order for your feed to degrade nicely, place something useful in between the div tags for those rare people that don’t use javascript.