Thursday, April 26, 2007

Programming Mashups using Google Ajax Feeds -- Part 1 of 2

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.
Example: Retrieving Google News Using AJAX Feed API:
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:


<!-- 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=""Key_u_got_from_google"


<!-- 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 =
";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");;

div.appendChild(document.createTextNode(entry.contentSnippet)); feed_container.appendChild(div);
} google.setOnLoadCallback(newsInit);
</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.


What is web 2.0 ?

Web 2.0 is a term coined to explain conceptual amalgamation of technologies, specialised applications, community collaboration and overall change of user experience on Internet observed by everyone. Right from Google Maps to Wikipedia or WordPress to Drupal come under the umbrella of Web 2.0. They share the fraternity under the fatherhood of web 2.0. This term has nothing to do with any updates in technological specification of WWW or HTTP, Its just a term to express advancements in internet applications which has definately changed the way Internet is used and perceived by us.

Web 2.0 as a Amalgamation of Technologies:
AJAX has been a buzz word since 2005 and has really proved its potential in bringing out the paradigm changes to User Interfacing. Web Portals are no Longer some dead pages with some business logic at backend waiting for a user request, It has transformed into a complete software killer applications deployed over the Internet. Best Example I can think of such kind of transform is google docs and spreadsheets and all this is made possible by AJAX and other supporting technologies.

Why Amalgamation ?
AJAX is not a technology in itself, but a collection of other technologies arranged in a way to deliver stunning highly responsive GUI applications on Internet.

Component Technologies of AJAX :
XMLHttpRequest or ActiveX Object capability of browsers
DOM Manipulation (By JavaScript)
CSS Manipulation (By JavaScript)

RSS/Atom is another technology which eases information dissemination and has become dominant on internet in the name of feeds.Businesses can reach potential customers using these feeds which serves as a boradcast message.RSS/Atom is based on XML which is open standard and human readable, Feeds can be used to create mashups based on your interest or the interest of your potential users. You can mix and match and really make a information rich web portal.

Web 2.0 as an amalgamation of special applications:
Wiki, CMS, blogs, forums,social networking are special internet applications which have changed the way user look for information on internet. Moreover these are easily pluggable applications which attach themselves to your web site and help the administrator to maintain large information base in a clean way. Most of these applications are open sourec and can be integrated for free with little or no configuration, some of the good examples being drupal, wikimedia, wordpress, joomla etc. Community Wiki's can be exploited to create a large information base of some particular area and hence create specialised wiki's. Please read here to find out how wiki works.

Web 2.0 from the perspective of Clustering information:
Social bookmarking, tagging (folksonomy), permalink etc are ways to give an order to information spread
across internet. A single institution can not do it, so the job is taken up by common users who tag information into labels that interest them. These labels help bring order to the information on internet, Sometimes these tags can also be used to search information on internet. Users also share there information in terms of bookmarks which is now popularly called social bookmarking ( .These tags can be very useful when you are looking for information on internet.

I hope it gives you some information as to what are we looking at !! Puprose of this blog is to expose ways of creating such applications practically and to use all aspects of web 2.0 to create a information rich and attractive web portal. We would look at technologies like AJAX, RSS/Atom web services in great depth and from practical point of view .