Beginner’s Guide to Google AJAX Feed API

For those that don’t know, the Google AJAX Feed API is a JavaScript tool that you can use to handle your AJAX requests, and is particularly useful for reading in feed data from external websites. After searching for all kinds of plug-ins and tools, I landed on Google’s answer, and found exactly what I needed – a JavaScript-only feed parsing script.

This tutorial will provide you with a very basic script to start using this great tool and covers what you need to get started.

First off, check out the Feed API demo that you will be creating.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<ul id="container"></ul>
 
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
var undefined;
var items = {};
var container = document.getElementById("container");
function Initialize(){
	var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/41298392.rss");
	feed.setNumEntries(5);
	feed.load(function(result){
		if(!result.error){
			items = result.feed.entries;
		}
	});
}
google.load("feeds", "1");
google.setOnLoadCallback(Initialize);
setInterval(function(){
	if(items[0] != undefined){
		var ipop = items.pop();
		var text = '<li>' + ipop.title + '</li>';
		container.innerHTML += text;
	}
},1000);
</script>

If it seems overwhelming, don’t worry. I’ll go over it bit by bit, it’s really easy to pick up.

Initialize

This is a custom method that takes in some data using the code from the first <script> tag.

The first line inside of this function declaration stores feed data into the feed object. Setting the parameter in the Feed method call will change what RSS data you use.

Line two sets how many items you want it to display, and the final section tells the script what to do once the data has been loaded into the variable. In this case, we want it to check that there are no errors and store our list of entries into the items variable.

load and setOnLoadCallback

The load method tells the Google API that we want to use the Feed functions, so we give it the parameters “feed” and “1″. The “1″ part is only used for collecting version numbers and isn’t too important.

setOnLoadCallback calls our Initialize method from earlier and processes it.

The fancy setInterval stuff

This section is just for eye candy and isn’t actually essential to using the API. It’s used to make the feed items display a second after each other in a list.

To start off we check if the item can be used, by checking if it isn’t undefined. We then remove an item from our list of items with pop and store this into ipop. The title attribute of this is then used as the text for the list item and added to our container list.

Finishing up

There we go, hopefully as simple as I said it would be.

Just remember that before you use this script, you should sign up for an API key and replace YOUR_API_KEY in the script tag with the key you’re given.

What I really like about this script is that it’s all handled (on our end at least) by one HTML document, and Google’s speedy servers handle the rest of it for us.

This is not a service to be abused however, as it has huge possibilities and there are millions of ways that applications could be built using it. With the issue of bandwidth and server load costs affecting a lot of amateur developers with big ideas, this is one less thing to worry about.

Note

The code above may only work if you have a properly formatted HTML document (i.e., all the header, doctype and body stuff). If you do have problems, try copying the code from the demo’s page source.