Publishing a del.icio.us RSS feed with the Google AJAX Feed API

Enough buzzwords in that headline? :)

With the newly launched Google AJAX Feed API, you can now publish any RSS feed to a webpage all with client-side scripting. (Previously, server-side techniques like CaRP have been the tool of choice.) I’ll demonstrate how we implemented the AJAX Feed API to take a collection of links that our Experience Design team thought interesting, and transform them into a short truncated link list.

First, include the API javascript with the API key that was provided to you when you sign up:

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

Then we’re going specify what feed we’re going to publish and how many entries to show. We’re using the RSS feed from all items in del.icio.us tagged with molexd.
Then we create markup to wrap each feed item as a LI, all inside of a UL. In the end, all this new content is inserted into a div with the id=”feeds”.

<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
  var feed = new google.feeds.Feed("http://del.icio.us/rss/tag/molexd");
  feed.setNumEntries(10);
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      var ul = document.createElement("ul");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var li = document.createElement("li");
        var a = document.createElement("a");
        li.appendChild(a);
        a.href = entry.link;
        a.appendChild(document.createTextNode(entry.title));
        li.appendChild(document.createTextNode(entry.publishedDate.substr(5,12)));
        ul.appendChild(li);
      }
      container.appendChild(ul);
    }
  });
}
google.setOnLoadCallback(initialize);
</script></script>

This will actually make use of the feed retrieval and caching system that is managed by Google Reader and Google Blogsearch. On the client-side, it’s only making a call to Google which has previously retrieved this feed.