Google AJAX Feed API
Demo and tutorial on how to use the Google AJAX Feed API.
Demo
On load, the "feed control" below will be populated by the Digg and TechCrunch feeds. Update the feed control by specifying the URL of a valid feed in the form and pressing "Get it!" A tutorial on how to implement this is lower on the page.
Feed control
Tutorial
HTML
The first thing is getting our HTML on the page:
<form id="frmFeed" action="/" method="get" onsubmit="">
<fieldset>
<legend>Google AJAX Feed API Demo</legend>
<label>Feed <abbr title="Uniform Resource Locator">URL</abbr>:
<input type="text" id="txtFeed" name="txtFeed" style="width:300px;" value="http://themechanism.com/blog/feed/" />
</label>
<input type="submit" value="Get it!" />
</fieldset>
</form>
<h3>Feed control</h3>
<div id="feedControl">Loading ...</div>
This code defines our form (note—we included an onsubmit handler that is purposefully empty right now) and a div that has the "feedControl" id.
For this example, we won't need any custom CSS.
Once this markup is on your page, we'll spend the rest of the time writing JavaScript and working with the Google AJAX Feed API.
JavaScript
Prior to using the Google AJAX Feed API (GAFA), you'll need to get a free API key from http://code.google.com/apis/ajaxfeeds/signup.html. Once you have your key, add the following line to your document after the "feedControl" div (replace "your-key-here" with your key first!):
<script type="text/javascript" src="http://www.google.com/jsapi?key=your-key-here"></script>
Right below the call to the API, start another script element with the following code:
<script type="text/javascript">
google.load('feeds', '1');
</script>
The first script element makes the google.load function available and the second loads version one of the GAFA. Both of these steps are necessary, because "Google is moving to a new model of loading AJAX APIs to make it easier to include multiple Google APIs on your pages."
Now that the API is loaded, directly after the last line of code (but still within the second script element, add:
gAjaxFeed = {
init: function() {
},
load: function(url) {
}
}
google.setOnLoadCallback(gAjaxFeed.init);
The setOnLoadCallback function takes one required parameter: the name of a function to be called after the page is completely loaded. In this case, we pass it the init method of our global gAjaxFeed object.
Add the following code within the init method of the gAjaxFeed object:
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed('http://www.digg.com/rss/index.xml', 'Digg');
feedControl.addFeed('http://feeds.feedburner.com/Techcrunch', 'TechCrunch');
feedControl.draw(document.getElementById('feedControl'), { drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED } );
The init uses the higher level google.feeds.FeedControl class to display a collection of feeds. We store the object in the local variable feedControl and then call the addFeed method of the FeedControl class. This method takes two parameters: a URL which specifies the feed added to the control and a section header label.
After the feeds are added to the feedControl object, we render them using the draw method, which takes the DOM Node that contains the resulting entries. The draw method can also be provided with an optional opt_options argument that determines how the control displays the results. This argument is an anonymous object which currently supports a single property called drawMode which can have a value of either google.feeds.FeedControl.DRAW_MODE_TABBED or google.feeds.FeedControl.DRAW_MODE_LINEAR.
While the FeedControl is powerful and easy to use, for the load method of gAjaxFeed, we're going to use a different class: google.feeds.Feed. So, add the following code to our load method:
if (!url) { return false; }
var feed = new google.feeds.Feed(url);
feed.setNumEntries(25);
feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById('feedControl');
container.innerHTML = '';
var len = result.feed.entries.length;
for (var i = 0; i < len; i++) {
var entry = result.feed.entries[i];
var p = document.createElement('p');
if (entry.title) {
p.innerHTML = '<a href="' + entry.link + '">' + entry.title + '</a> ';
}
container.appendChild(p);
}
}
});
Since our load method expects to be passed a parameter, we first check to make sure that one has been passed. If so, we instantiate the google.feeds.Feed class and store it in the local variable feed. Next we use the setNumEntries method to limit the number of feed entries to 25. Be default, it's set to four. The setResultFormat method can be set to one of google.feeds.Feed.JSON_FORMAT, google.feeds.Feed.XML_FORMAT, or google.feeds.Feed.MIXED_FORMAT.
The load method takes one required parameter: a callback function. It downloads the feed from Google's servers and calls the given argument when the download completes. The callback function is passed the feed result, which depends on the format specified.
We test to make sure there was no error loading the feed; if not, we get our "feedControl" DOM node and empty its current contents. We then loop through the feed entries, creating a new p element for each entry and setting its innerHTML property to a link containing the title of each each.
Last update—24 July 2008
