[Dot] Code Dump » AJAX http://www.dotcodedump.com Just another WordPress weblog Wed, 06 Jan 2010 12:27:53 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Creating a simple Twitter AJAX widget using Google Feeds API http://www.dotcodedump.com/2009/02/creating-a-simple-twitter-ajax-widget-using-google-feeds-api/ http://www.dotcodedump.com/2009/02/creating-a-simple-twitter-ajax-widget-using-google-feeds-api/#comments Mon, 16 Feb 2009 05:32:00 +0000 admin http://blog.lintnernet.com/?p=47 I was doing some research into making API calls to Twitter using JavaScript. The one problem I ran into was calling remote domains. One quick solution I found was to use the Google Feed API. Google provides a really easy and simple interface for accessing feeds via JavaScript.

A quick how to:

To start out you must import the api using your Google API key. 

<script src="http://www.google.com/jsapi?key=[Your Google API Key]"></script>

This is script was taking from the Google AJAX API Playground, I just added in the call for Twitter, the full script is below.

First the Google feed object is instantiated with the call to the Twitter API via RSS. 

var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/ianlintner.rss");

The Google feed API is great way to access and work with remote feeds, and APIs using just JavaScript. This also an asynchronous call, so it should play well with other AJAX solutions.

The full listing, with my changes. 

<!--Copyright (c) 2008 Google Inc.

You are free to copy and use this sample.License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license-->

<!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 Search API Sample</title><script src="http://www.google.com/jsapi?key=[Google Key]"></script><script type="text/javascript">/**  How to load a feed via the Feeds API.*/

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

// Our callback function, for when a feed is loaded.function feedLoaded(result) {  if (!result.error) {    // Grab the container we will put the results into    var container = document.getElementById("content");    container.innerHTML = '';

    // Loop through the feeds, putting the titles onto the page.    // Check out the result object for a list of properties returned in each entry.    // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON    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);    }  }}

function OnLoad() {  // Create a feed instance that will grab twitter  var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/ianlintner.rss");

  // Calling load sends the request off.  It requires a callback function.  feed.load(feedLoaded);}

google.setOnLoadCallback(OnLoad);</script></head><body style="font-family: Arial;border: 0 none;"><div id="content">Loading...</div></body></html>
]]> http://www.dotcodedump.com/2009/02/creating-a-simple-twitter-ajax-widget-using-google-feeds-api/feed/ 1