Utilizing Google API: Using AJAX Feed API

I’m a fan of google. In fact i thought i couldn’t live without google. Google has been my best buddy specially when i am programming and i thought id make a saying out of it. And so, “With Google, nothing is impossible” (when programming that is)

I am enjoying a lot of client side programming lately and thought about utilizing some of the powerfull web services that google has came up with. So in these series of blogpost, i will try to share to you my enthusiasm on these existing web services from the big guys hoping we could find them significantly useful. So first stop AJAX Feed API.

What is AJAX Feed API?

“With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API.

The Google AJAX Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. Making it easy to quickly integrate feeds on your website, as shown below.” - code.google.com

Ok before you proceed on experimenting with the API, you must make sure that you have your own API key from google. Do that here http://code.google.com/apis/ajaxfeeds/signup.html. This key is for AJAX Feed API only. This key is use to identify request to and from the server. Also if you are experiencing a problem with your scripts and you need support, google can easily identify you using your API key. These technologies assume we already know javascript and a bit of how the REST architecture works and a domain or a website.

1. Basic Example (The Script)

    <script type="text/javascript"
        src="http://www.google.com/jsapi?key=YOUR_KEY_HERE“>
    </script>
    <script type=”text/javascript”>

    google.load(”feeds”, “1″);

    function initialize() {
      var feed = new google.feeds.Feed(”http://genusproject.com/feed”);
      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));
            div.appendChild(document.createTextNode(entry.link));
            div.appendChild(document.createTextNode(entry.contentSnippet));
            div.appendChild(document.createTextNode(entry.publishedDate));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>

2. The HTML element container

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

The bolded text are the data fetched by the google feed API in JSON format. The API can also return XML or combined JSON/XML Result. The next thing would be to style the divs created by the script that holds the data like the title, link, date published and the description. You have an instant ATOM or RSS aggregator/reader without worrying on detecting which format is used by the source.

3. Using the Custom Feed Controls

Google Feed API has another option to display feeds, using the feed control. It is much more straightforward and easy to use. Look at the shortened code below as an example.

    <script type="text/javascript">

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

      function initialize() {
        var feedControl = new google.feeds.FeedControl();
        feedControl.addFeed("http://genusproject.com/feed", "GenusProject");
        feedControl.addFeed("http://rss.news.yahoo.com/rss/tech", "Yahoo");
        feedControl.draw(document.getElementById("feedControl"));
      }
      google.setOnLoadCallback(initialize);

    &lt/script>

You can add feeds to display by calling feedControl.addFeed(url,title) then tell the browser to output the HTML by calling feedControl.draw(container) where container is a valid HTML element/node in a page.

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

The feed control exposes a few methods to manipulate the behavior of the control. To name a few, we can use feedcontrol.setNumEntries(2) where 2 is the number of feed entries we want to display. We can also use feedcontrol.setLinkTarget(google.feeds.LINK_TARGET_BLANK) where google.feeds.LINK_TARGET_BLANK is a contant that make links for a particular feed to open in a new window. To know more about feedcontrol exposed methods see this link http://code.google.com/apis/ajaxfeeds/documentation/reference.html#FeedControl. Thats about it, we only need to expirement with the script to come up with a settings or style that fits our needs. A little styling up and we can create a pro like feed aggregator.