FeedControl update to Google AJAX Feed API

FeedControl was added recently by google to AJAX feed API which works like GSearchControl in Google AJAX Search API. This class makes it easier to add multiple feeds and to draw them up by basic predefined google CSS which can be overidden as needed.

FeedControl constructor doesnt take any argument and has three methods associated with it

1. addFeed(url,title)
2. draw(element,options)
3. setNumEntries(num)
4. setLinkTarget(Target)

There are already very good examples given by google AJAX API group which covers almost all methods and options of this new class. I specially liked to see the tabbed feed drawoption one, which looked very fancy and can be used effectively in creating neat and clean mashups.

Please look at the reference of this class to find out more on these methods but I will give a brief introduction of these methods although they dont require much explaination.

addFeed(url,title) : to add a new feed to your feedcontrol object and the second argument is used to give it a label which is displayed accordingly by the CSS attached to it.

draw(element,options): To load the feed and draw on the page, It takes the DOM element as its argument which will act as the container of the feed and also it takes a optional second argument which can instruct of other options of drawing, currently there is one option called DrawMode which can take two value

google.feeds.FeedControl.DRAW_MODE_TABBED
google.feeds.FeedControl.DRAW_MODE_LINEAR.

setNumEntries(num): Num of entries to be pulled when draw is called.

setLinkTarget(target): where should the link open when clicked. Default is the same window, Pl check the documentation for possible values.

ADVANTAGES:

few advantages that can be observed by addition of feedControl in feed API are:
>Simpler programming model
>Drawing is done by the API itself, which can be controlled by overidding the CSS
>Title now contains the link to the entry too :)
>Default CSS which can be used where no sophisticated layout is needed.

3 Examples are given by the Google team, which can be accessed from here

Read More...

Summary only...

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

Deviating from default:
In the previous part we learned how to pull a feed into a mashup using bare bones of the AJAX feed API.In this part we will see what customization is possible in the API and how !!

Things That can be changed:

• Number of entries in default pulling is 4, this can be changed
• Result format by default is JSON, this can be changed to XML

Changing Number Of Entries:
This can be changed by calling setNumEntries method of feed object. the argument of this methods is number of entries you wanna pull in each result object. This is a important method and would come in handy in almost all mashup programming.

feed.setNumEntries(7);

This method should be called before calling load.

Changing Result Format:
Like Number of entries this can also be changed by calling a method on the feed object, Method of interest in this regard is setResultFormat(format). Format can take one of the three values
1> google.feeds.Feed.JSON_FORMAT (default)
2> google.feeds.Feed.XML_FORMAT
3> google.feeds.Feed.MIXED_FORMAT

feed.setResultFormat(google.feeds.Feed.XML_FORMAT)

Example Mashup:
In this example we will try to use all the concepts learned till now, This will contain a mashup of 2 feeds, one pulled as JSON and other pulled as XML. More of number of entries will also be different in both the feeds. This should suffice the usage of all API's present in the armour.

Function to pull a feed with result in JSON format:

function pull_json(feed_url,container_id,num_entries)
{
var feed = new google.feeds.Feed(feed_url);
feed.setNumEntries(num_entries);
feed.load(function(result) {
if (!result.error) {
var feed_container = document.getElementById(container_id);
for (var i = 0; i <= result.feed.entries.length; i++) {
var entry = 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);
}
}
});
}


Function to pull a feed with result in XML Format:

function pull_xml(url,container_id,entries)
{
var feed = new google.feeds.Feed(url);
feed.setNumEntries(entries);
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
var feed_container = document.getElementById(container_id);
if (!result.error) {
var items = result.xmlDocument.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var titleElement = items[i].getElementsByTagName("title")[0];
var title = titleElement.firstChild.nodeValue;
var linkElements = items[i].getElementsByTagName("link")[0];
var link_url = linkElements.firstChild.nodeValue;
var descElements = items[i].getElementsByTagName("description")[0];
var desc = descElements.firstChild.nodeValue;
var div = document.createElement("div");
var link = document.createElement("a");
link.href=link_url;
link.innerHTML=title div.appendChild (link);
div.appendChild(document.createElement("br"));
div.appendChild(document.createTextNode(desc));
feed_container.appendChild(div);
}
}
});
}


Full Source with minimal layout can be found here
Sample Demo Of above mashup can be viewed here

Conclusion:
Mashup programming is made easy by Google AJAX Feed API, and we learned how !! This 2 article series covered the API with examples and I will soon put a cool sample mashup using google AJAX API as soon as I get time.

Read More...

Summary only...

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.

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:

<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;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.

Read More...

Summary only...