Google Feed API Tutorial

May 18, 2007

I’ve finally had a chance to work with the new Google AJAX Feed API and found it quite useful.

I wanted to be able to read in a single feed that pulls all of my blog, twitter, and digg posts. Not many of them need summaries so I’ll pull in just titles and style the buttons depending on which site they refer to.

Get a Key

Sign up for a the Google AJAX Feed API and don’t lose it. When choosing the directory from your site to assign the key, don’t go with a subdirectory. You may change where you have to use it and you can always use it in multiple instances.

Create the Script

There are so many different ways to go about writing the script to display the feeds on the page. The easiest approach was to create a div for each item, have the div contain a p tag that would contain the link and title.

There are two lines you should adjust in the following code. The one that references the xml file of the feed and the one below it that adjusts the number of items to display. Place this into a script tag in the header or into a separate file.

google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var para = document.createElement("p");
var link = document.createElement("a");
var title = document.createTextNode(entry.title);
link.href =;
link.className = "feedentry";

Call the Script

In the header of your html doc, you’ll need to hit the google key. Put in a link to the script, replace the key below with your own:

<script type="text/javascript"src=""></script>

You’ll also need to place a div into your document that the js will find and execute the code on:

<div id = "feed"></div>

In order for your feed to degrade nicely, place something useful in between the div tags for those rare people that don’t use javascript.

Share the Love: | digg | magnolia


Share Your Comment

You must preview your post and then hit submit.

If you haven't looked already check out my articles, my tutorials or my portfolio. If you need something else, please feel free to chat with me.

All content of this website (unless marked otherwise) is © copyright bradley j. cooper 2006-2008

Brad's AvatarI'm Brad Cooper a web designer/front-end programmer with a passion for actualizing visions. I try to create a piece of art in each site that I put together both visually and technically. I currently work outside Philadelphia and live in Marlton, New Jersey.

You can find me online:

Twitter | FriendFeed | Flickr | Delicious

Or keep up to date and:

Feed Icon Grab My Feed.

If you have a question or need some help, feel free to Chat with Me.

Recent Articles

» New Window Script Redux

» Magnolia - How social bookmarking should be - social!

» My Affinity for Color 2

» Pained by Invalid Code

Recent Tutorials

» Unobtrusive Expand and Collapse Navigation

» Forcing New Windows on Users Script

» Shorten document.getElementById

» Google Feed API Tutorial