Using Google Ajax Feed API
The Google Ajax Feed API is a JavaScript API for displaying RSS feeds. This is not something new, but this API is very easy to use and has a rich set of features. I will in this article show you how to do some basic feed consuming using the Google Ajax Feed API.
Related links
Related files
samples-google-feed-api.zip (3 KB)
Samples used in Google Ajax Feed API article.
Introduction
Displaying RSS feeds that is updated automatically is not for the novice web developer. Google's Ajax Feed API changes all that, by basically enabling any with a limited set of JavaScript knowledge to display RSS feeds on their sites using some code. It hosts the desired RSS feeds on their servers for you, caches them, and returns the data in either JSON or XML format for you to utilize. All that's left is for you to use some JavaScript to parse this data and output it on your page.
Because Google's Ajax Feed API takes care of the most gruelling work for you, your job is stripped down to learn how to use JavaScript to access and display the consumed information. All tasks that you want to do uses the same approach:
- Get your own Google API key. This is used to allow access to the services. Go to this page to get the key.
- Once you have recieved the API key, you insert the key into the loading of the script as a parameter: http://www.google.com/jsapi?key=KEY_HERE.
- Now you can use the Google Ajax Feed API on your page. The functions you can use is defined in the documentation.
Consume a Feed
To illustrate how to consume a feed, I will display news from Enonic. Enonic has a RSS feed on http://www.enonic.com/rss url and this shows all currently fronted news articles. The following example displays the feed:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");
function display(result) {
var markup = "";
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
markup += "<div><a href='" + result.feed.entries[i].link +
"'>" + result.feed.entries[i].title + "</a></div>";
}
document.getElementById("myfeed").innerHTML = markup;
}
}
function initialize() {
var feed = new google.feeds.Feed("http://www.enonic.com/rss");
feed.setNumEntries(5);
feed.load(display);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="myfeed">Loading...</div>
</body>
</html>
It is very easy to embed the feed displaying into a Vertical Site object. Just create an object xsl that produces something similar to the above source.
Another way to consume the feeds using Google Ajax Feed API is the FeedControl. This is much easier than the other approach, but is more limited to the way it can look. The FeedControl is designed so that it can have multiple feeds displaying at the same time.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var control = new google.feeds.FeedControl();
control.setNumEntries(5);
control.addFeed("http://www.enonic.com/rss", "Enonic");
control.addFeed("http://rss.slashdot.org/Slashdot/slashdot", "Slashdot");
control.draw(document.getElementById("myfeed"));
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="myfeed">Loading...</div>
</body>
</html>
To render the FeedControl using a more simple view, use another option when drawing:
control.draw(document.getElementById("myfeed"), {
drawMode : google.feeds.FeedControl.DRAW_MODE_LINEAR
});
The CSS style can also be set to be more in context with the page that should hold the feeds. Refer to the class reference for what styles are available.
Displaying Images
Another great feature of the Google Ajax Feed API is the inclusion of GFslideShow. This is a very easy to use slideshow component that uses a feed for the basis of what to display. In the example below I use the Picasa album of another Enonic employee. Credits to Jørund Skriubakken for the great photos.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>
<style type="text/css">
#slideshow a img {border : none;}
#slideshow {
width: 288px;
height: 216px;
color: #dddddd;
background-color: #000000;
}
</style>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var rss = "http://picasaweb.google.com/data/feed/base/user/jvskriubakken/albumid/5130573469356480177?kind=photo&alt=rss&hl=no";
var options = {
displayTime: 2000,
transistionTime: 600,
fullControlPanel : true,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(rss, "slideshow", options);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="slideshow">Loading...</div>
</body>
</html>
Change to mobile version
Comments
If you want to comment on this article you need to be logged in.