No Stress RSS with the Google Feed API

In Craig’s recent series on Ajax data formats, we learned about JSON, a clean and efficient format for dealing with data in your Ajax pages. But if you’re dealing with blogs, news sources, or common content management systems, RSS is still the de facto standard and JSON may be unavailable. You could hack your sources to spit out the data you need in JSON, or you could write a piece of middleware to convert RSS for you, but sometimes that’s impossible or impractical.

If that’s the case, why not check out Google’s Feed API? It’s a fast and easy way to grab RSS feeds and use them right away as JSON objects: no mess or fuss or weird parsing effort on your part! You’re retrieving Google’s cached copy of the RSS, so it’s quick and reliable; it’ll also cause less impact on the site serving up the feed, to boot. To show you how easy it is, we’ll build a quick JavaScript headlines widget using the latest news from SitePoint’s RSS feed.

First, you’ll need to grab a Google API key. It’s optional, but quick and easy, and Google strongly encourages that you do so.

To begin using the Feed API in our pages, we’ll need to include the Google loader in the head of the document. Add that API key as a variable on your script’s src URL:

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

Next, in our own script, we’ll load up the Google Feed API like so:

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

This line specifies the module we want (feeds) and the version, which at this stage is still version 1. Does this google.load stuff look familiar? If you’ve seen this before, it’s probably because you’ve spent some time using Google Maps in your application, or perhaps you like to use the Google-hosted JavaScript libraries or Web fonts. There are quite a few different modules available, so if you are using more than one, you could go ahead and load them all up together, like so:

    google.load("feeds", "1");
    google.load("jquery", "1.5.1");
    google.load("maps", "2");

Next, we’ll need to specify a function to execute once the document is completely loaded — we do this using google.setOnLoadCallback. Just for something unusual, I’ll show my feed using a function called showFeed:

google.setOnLoadCallback(showFeed);

showFeed will be where all the action takes place, and where we can look into a few of the options that the Google Feed API can offer us. Our first point of order is to set up a new object, called feed. It needs just one argument, a URL:

function showFeed() {
  var feed = new google.feeds.Feed("http://blogs.sitepoint.com/feed/");
}

By default, the API will give us only four items from the feed. Using the setNumEntries method, we’ll ask for some more — let’s say ten:

function showFeed() {
  var feed = new google.feeds.Feed("http://blogs.sitepoint.com/feed/");
  feed.setNumEntries(10);
}

There’s a setResultFormat method that allows us to specify a format: one of XML, JSON, or a combined result with both. Since the API serves up JSON by default, it’s unnecessary to actually specify it as such; if you’re curious, though, it would look like this:

feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);

If you’d like to dig up older RSS entries, Google can return its stored copies of previous items in the feed. That’s a neat trick! SitePoint’s feed contains enough entries for us to use, so we can skip it in our script, but you’d use it like so:

feed.includeHistoricalEntries();

We’ve set up all we need to grab the feed — now let’s go ahead and load ‘er up. We’d like each RSS entry to appear as a list item in a list with an ID of headlines, showing each item’s title, link, and author. The API can deliver all that, and more — content, categories, published date, and media. Of note is the ability to automatically create a snippet of each entry’s content for us, which is a nice touch. Let’s throw that in there as well!

The .load method asks for the feed and delivers a result. In that result, we’ll receive a nice, fat JSON object, or an error code and message if it fails. The callback acts on that result: if successful, we’ll loop through each item in the JSON object, and insert a list item for each. Otherwise, we’ll fail politely with a link to SitePoint:

feed.load(function(result) {
  if (!result.error) {
    var container = document.getElementById("headlines");
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var li = document.createElement("li");
      li.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a>' + <cite>by ' + entry.author + '</cite></h3>';
      li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
      container.appendChild(li);
    }
  } else {
    var container = document.getElementById("headlines");
    container.innerHTML = '<li><a href="http://sitepoint.com">Get your geek news fix at SitePoint</a></li>';
  }
});

That’s it! You can see a complete example of this script in our demo. All up, it took just a couple of minutes to put together — that’s much shorter than the amount of time it took to explain it in this post!

We’ve seen just a part of what the Feed API can deliver, but there’s plenty more to be found in the Feed API documentation. Here’s to stress-free feed parsing!