Pin Me

Using Google Code: Pt. 3 - AJAX Feeds API

written by: •edited by: Michele McDonough•updated: 10/11/2010

Did you know that you can add current news to your web application? Did you know that Google Code APIs make it easy to integrate relative information to your web presence? This "how to" article walks you through the process and presents sample code to get you started in adding your RSS\Atom feeds.

  • slide 1 of 5

    Feeding the Beast

    You have probably heard about or encountered a feed service at some point. Feeds can provide you the latest news headlines, sports scores, weather or a myriad of other information. You can add feeds to your website, using Google Code and APIs, that relate to your content. There are two kinds of feeds that Google allows you to implement using their AJAX Feed API. They are Atom and RSS. The following list shows the supported feed formats as of January 11th, 2010.

    • Atom 1.0 and Atom 0.3.
    • RSS 2.0, RSS 1.0, RSS 0.94, RSS 0.93, RSS 0.92, RSS 0.91 and RSS 0.9.

    You don't have to know anything about the format of the feeds to add them to your web pages. All you really need is the URL to the feed and some knowledge of JavaScript,

    A number of the basics for using Google AJAX APIs are covered in Part 1 of this series. You will need to have your own API key for instance.

  • slide 2 of 5

    A Tale of Two Formats

    Google's Feed API can be implemented in environments other than Javascript. It does so by providing a RESTful integration that returns JSON results. Additionally, XML results can be delivered in place of, or in addition to, the JSON results. JSON is the default. The non-Javascript methods are not included in this article but information can be found in the Google Code AJAX Feed API Developer's Guide. Examples can also be found at http://code.google.com/intl/en/apis/ajaxfeeds/examples.html.

    Additionally, you can create a text feed or a slideshow feed based on the RSS/ATOM target of your code and a few simple modifications to the code. These feeds and slideshows can be combined in mashups along with Google's Search and Maps APIs.

  • slide 3 of 5

    A Few Basics and What to Watch For

    As is the case when integrating any of the AJAX APIs, you must include the appropriate script tag(s) and call google.load as shown in this example:

    <script type="text/javascript" src="http://www.google.com/jsapi?

    key="YOUR_KEY_GOES_HERE"></script><script type="text/javascript">

    google.load("feeds", "1");

    </script>

    The parameters for the google.load call are ("script tag", "version"). In this case feeds is the tag and "1" is the version. The Google team strives to eliminate bugs and enhance all APIs. Changes are posted at Google Code and in the AJAX blog. Subscribing to the blog is encouraged. Old versions are left functional for a month in most cases.

    To specify your feed choices you have to set var feed=new.google.feeds.Feed("YOUR_TARGET_URL_GOES HERE") using the initialize function as shown below.

    function initialize() { var feed = new google.feeds.Feed("http://www.ketv.com/news/topstory.rss");

    You can add a number of features such as the FeedControl and methods to find feeds using google.feeds.findFeeds and google.feeds.lookupFeed. The number of options and mashups are virtually unlimited. This article just begins to touch on the possibilities that can be added to the sample code to refine and enhance your web presence.

    Again, the code discussed here is the bare bones minimum to get a feed into your web pages. There are a number of optional controls we haven't discussed that will control crawl rate, position, appearance and so on. You should review the information at Google AJAX APIs if you really want to make your web devices unique.

  • slide 4 of 5

    General Troubleshooting

    If you are having problems getting the API to run on your site consider the following (in order):

    1. Double check you have entered the correct API key and that it is valid.
    2. Use a script debugger.
    3. Check for typographical errors. I am notorious for "fat fingers" on the keyboard. Also, Javascript is case sensitive.
    4. Review the documentation to see if you missed something in a var or call.
  • slide 5 of 5

    Sample Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Google AJAX Feed API - Simple Example</title>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {

    var feed = new google.feeds.Feed(http://www.ketv.com/news/topstory.rss);

    feed.load(function(result) {

    if (!result.error) {

    var container = document.getElementById("feed");

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

    }

    }

    });

    }

    google.setOnLoadCallback(initialize);

    </script>

    </head>

    <body>

    <div id="feed"></div>

    </body>

    </html>

    <! http://www.ketv.com/news/topstory.rss -->

Using Google Code

Do you want to bring your web pages to life? Add robust, interactive features to your web pages. This series of how-to articles walks you through adding Google APIs, simply, to your applications. Code samples in HTML & JavaScript included.
  1. Using Google Code: Part 1 - Search
  2. Using Google Code: Pt. 2 - Maps
  3. Using Google Code: Pt. 3 - AJAX Feeds API
  4. Using Google Code: Pt. 4 - Book Search