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.


14 thoughts on “Beginner’s Guide to Google AJAX Feed API

  1. Superb! Generally I never read whole articles but the way you wrote this information is simply amazing and this kept my interest in reading and I enjoyed it. You have got good writing skills.

  2. Stephen,
    You might be impressed with this so called API feed from Google,but there are others like myself who are really fed up with getting messages which are unasked for delivered to my computer from people like Google telling me that i have to have this stuff on MY computer.Perhaps you can tell me how i can stop them doing this as it is stopping me from going to my usual websites.It is an intrusion of privacy.Thank you.

    1. I’m not quite sure what you mean, but in any case Google shouldn’t be sending you emails or asking that you download anything to your computer – especially if it’s stopping you from visiting websites. Perhaps you should look into this a bit more.

    1. Btw, there is nothing wrong with the rss-feed im trying to embedd, for example google reader accepts the feed just fine, i just dont get it to work with the google ajax feed api.

      1. Ps.

        even when i use your own bloggs url at the top of the page on google Dynamic Feed Control Wizard i get the same error message: “No URLs found”

        1. The box at the top of that page collects feed URLs based on search terms, that’s why “People, E-Online, TMZ” is in there to start off.

          So for example if you type in “Stephen McIntyre feed” it will find my RSS feed, but directly typing in the URL won’t.

          Alternatively you can copy the generated code into your page and replace the URLs in the “feeds” array with the ones you want to use.

          Good luck :)

  3. Stephen,
    It works well for me, but how can I parse the image url from our rss? I’m trying to display image thumbnail instead of list of titles. Please advise.

    Rgds,

    1. It all depends how your own feed is set up, and may even require some regular expressions if the data isn’t sent back in a nice format.

      JavaScript strings have a search method that is used to look for matches against certain expressions, but you may need to look around a bit for a strong query that finds image tags.

      Good luck :)

  4. hi,

    I want the same example to display the tweets by displaying a textbox
    and the user should enter any keyword and depending upon keyword
    the tweets should be displayed can u please help me with this

Comments are closed.