Displaying RSS feeds easily using Google Ajax Feed APIDisplaying RSS feeds from other sites (ie: CNN or Digg) on your own is a nice way to show constantly updated content automatically. However, for the novice web developer, setting this up can be daunting, requiring both knowledge from you and your server's ability to host remote files. Google's Ajax Feed API changes all that, by basically enabling any webmaster to display RSS feeds on their sites using some JavaScript 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.In this tutorial, I'll show you how to harness Google Ajax Feed API to fetch a RSS feed and display it on your site. Here are a few examples: |
<script>
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
