Programming Mashups using Google Ajax Feeds -- Part 1 of 2
Mashups
Mashups are information rich portals which pull data from different sources and present at one logical accessible place like a website. Mashups can be ideally created from feeds which follow RSS/Atom Specification. RSS/Atom is a XML stream or file which can be parsed by a SAX or DOM parser to obtain the content desirable for your site.
Google AJAX Feed API:
Google some days ago launched AJAX feed API which does all the dirty work behind the scenes for you to retrieve feeds and make the data available in JSON or XML format in a feed object. This object can be iterated over to extract information and display on your web site. You can pull more than one feed and place in different containers governed by your CSS style, Hence giving birth to a mashup.
Preliminaries of AJAX Feed API:
The API has only one public class called google.feeds.Feed, Constructor of this class take the feed url as parameter. The object returned contains the feed information and elements in the field. The default format for the feed content is JSON but it can be set to XML as we will see later. We associate a callback function to handle the XmlHttpResponse with feed object by calling load function which takes a callback function as the argument.
To summarise preliminaries of AJAX Feed API:
- Feed Object is created by passing the feed url as parameter to the feed class.
- CallBack Function is Associated with feed by calling google.feeds.Feed.load(callback())
- Data Format can be shifted between JSON and XML, by default its JSON.
Lets do some pulling with the Feed API. In this example we will pull data from google news
and display it on our portal, This is a bare bone skeleton example that should get you started on using the Feed API. Designers should apply their creativity to layout data from different feeds to attract users. We Will use the default JSON format to represent data but that is implicit to the feed object.
Here is the Code To get You started:
<html>
<head>
<!-- This is the place where you call the google API source file by
supplying your API Key after ?Key= Do not forget to Close the script tag -->
<script type="text/javascript" src=" http://www.google.com/jsapi?key="Key_u_got_from_google"
</script>
<!-- Local Logic to Instantiate feed Object and use it to pull data -->
<script type="text/javascript">
// This is Google AJAX API function which says that you
// that you are loading the feed API and the version of the API is 1
google.load("feeds", "1");
// Function that needs to be called when the AJAX request returns
function newsInit() {
var feedurl = "http://news.google.com/?output=rss&amp;ned=:ePkh8BM9E8JmByvQDgMWHLYAAJLIBto " ;
// make the feed object var newsFeed = new google.feeds.Feed(feedurl);
// Assign a Callback function
newsFeed.load(function(feed_result) {
if (!feed_result.error) {
var feed_container = document.getElementById("newsFeed");
// Display by Manipulating DOM
for (var i = 0; i < feed_result.feed.entries.length; i++)
{
var entry = feed_result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement("a");
link.href=entry.link;
link.innerHTML=entry.title;
div.appendChild(link);
div.appendChild(document.createElement("br")); div.appendChild(document.createTextNode(entry.contentSnippet)); feed_container.appendChild(div);
}
}
});
} google.setOnLoadCallback(newsInit);
</script>
</head> <body>
<div id="newsFeed"> </div>
</body> </html>
This Should fetch 4 entries from google news. You can layout newsFeed div element to display news feed nicely and cleanly.
Note: Google uses feedFetcher to crawl and pull feeds at the backend, accoring to google policy it refreshes the feed value in about an hour, therefore the websites whose feed changing frequency is pretty high, the entries will not be refreshed.
In next Part I will show how to configure options of retrieval and how to use XML as a data model. We Will also create a web Page with more than 2 feeds pouring in data.
