Page 2 of 3   « previous page   next page »

With Google's AJAX Feed API, however, pulling down Internet feed data and integrating it into your Web pages has never been so easy! It's like Google's Maps API, where all you need is a bit of JavaScript code on your page and you instantly have a usable Map. With a bit of JavaScript on your page, you can easily integrate Internet feed data into your Web pages.

In Figure 1, the Blogroll and Photos content on the right is derived from Internet feeds. This is easily doable in just a few lines of JavaScript. Before jumping into examples of Google's AJAX Feed at work, let's review a bit the Feed API's architecture.

The AJAX Feed API's Architecture at a Glance
Google's AJAX Feed API is a combination of a hosted service provided by Google along with a lightweight JavaScript client API that allows for the easy integration of public RSS and Atom feeds into any Web page via JavaScript. At its core, the AJAX Feed API relies on a Google service known as FeedFetcher that continuously scours the Internet for feeds and caches them on Google's worldwide servers, similar to how Google caches all other Internet data. Since feed data is constantly updated, the FeedFetcher is constantly refreshing its caches with fresh data.

As the feed data is cached on Google's servers, the AJAX Feed JavaScript API provides an easy way for a client Web page to make requests and pull down any feed data. The API does this by injecting a script tag onto the client page, which then makes the feed data request directly from Google without violating the same origin security policy. The API has provisions for the user to specify a callback function so when the request is complete it will call the provided callback function that can render the feed data. The user-provided callback function can either be low-level JavaScript code that iterates through the raw feed data and updates the user interface via DOM methods, or it can be just a few lines calling one of the available higher-level controls such as the FeedControl or the feed SlideShow. The overall AJAX Feed architecture is displayed in Figure 2.

The AJAX Feed API provides flexible ways to display feed data. At a low level, it provides both JSON and/or XML output to the Web page. The JSON output is a unified, or canonicalized, output of data from the original RSS or Atom feeds. Why is it canonicalized? This is done to provide a single way of extracting feed data as opposed to having to parse the different feeds separately because of their different RSS and Atom specifications. With the unified feed elements, it's easy to work with multiple feeds of multiple formats using the same code. (Figure 3)

Using the AJAX Feed API
To get a feel for how to work with the AJAX Feed, let's review some basic examples for starters. As mentioned earlier, the AJAX Feed API is a JavaScript API that communicates with Google's worldwide servers to provide feed data to your client Web page. As with the other JavaScript APIs that Google provides, one first has to get the API key that's issued after agreeing to a Terms of Services document. Once you have your API key, you can begin coding in JavaScript and build your first example such as a HelloWorld. In fact, Google provides some initial examples to help you get started.

An AJAX Feed HelloWorld Example
There's a simple HelloWorld example in Listing 1 that illustrates how to download an Internet feed from digg.com and display some of its data on a Web page.

In that example, we see how to load the AJAX Feed API using the new common loader syntax by specifying both the name of the API ("feeds") and its version ("1"). Incidentally the other AJAX APIs, AJAX Search and Google Maps also support this syntax.

After loading the Feed API, a function called initialize( ) is defined. This function creates a new google.feeds.Feed instance and specifies that it should load the feed located at www.digg.com/rss/index.html. The remainder of the function establishes an in-line callback function to process the returned data. Since no data type is specified, the default data is in JavaScript's native JSON format and is loaded into the result object. The remainder simply iterates through the data in the result object and uses the DOM methods, createElement( ), createTextNode( ), and appendChild( ) to write the returned feed data directly to the parent document by putting it inside of the empty <div> element with id="feed."

Figure 4 shows how the HelloWorld example will render in a browser.

Extending the HelloWorld Example - Displaying Multiple Feeds
As you get more familiar with the AJAX Feed API, you'll find it quite easy to display the returned data in more interesting ways. For example, here's an example that illustrates how multiple feeds in different formats will display in the same manner. This page is merely an extended version of the HelloWorld example above that lets the user select or enter his own Feed URL. In stepping through this demo, you see how the AJAX Feed API provides unified access to any supported RSS or Atom feed without having to parse them independently.

As you can see in Figure 5, it displays the BBC's RSS News Feed. Figure 6 shows the same Web page but pointing to a different feed URL. In this case it's Yahoo's Weather Feed.

Creating a page that displays feed data this way is relatively straightforward. We have a portion of the relevant code from this example. Aside from a standard HTML form on the page, there's an empty portion beneath the form that's populated dynamically by calling the JavaScript function showFeed( ). This function accepts a feed URL passed from the HTML form.

The code that populates the lower part of the page is in Listing 2.

You can see in the code that, as the showFeed( ) function is executed, it first creates a new Feed object with the chosen feedURL passed to it from the HTML form. The rest of the code works to display the feed data using DOM methods. First it displays core feed information such as the title, link, description, and author. These are attached to an existing <div> with id = "banner-div." It then generates an HTML table dynamically to display the repeating feed data from the entries array and attaches it to an existing <div> with id="feed-div."

Displaying Feed Data More Compellingly - GeoCoded Photos on a Google Map
Dumping feed data into an HTML table is somewhat interesting, however there are more interesting and compelling ways to display feed data. For example, it's possible to use the AJAX Feed API to extract geo-encoded data and then display it on a Google Map.

Here's a fun mash-up where the AJAX Feed API extracts geo-encoded photos from a feed and then uses the Google Maps API to display the data.

As shown in Figure 7, this example displays photos that correspond to one or a set of tags. In this case the single tag, "Paris," is used as a query parameter to the Flickr photo feed: http://api.flickr.com/services/feeds/photos_public.gne?tags=geo,paris&georss=true

Also notice that an additional parameter, "georss=true," is also provided. This triggers the feed to supply only photos that are geo-encoded in the feed.

The raw data with the pertinent parts highlighted as it is returned from the feed is in Listing 3. You'll see that this feed contains a series of entries that have both HTML snippets in <content> tags and latitude and longitude information encoded in a <geo:Point> tag.

Page 2 of 3   « previous page   next page »