Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Pure Javascript solutions usually incorporate the JSON format [The Fat-Free Alternative to XML] since it is lightweight, very easy to traverse. However, since Google Buzz was launched last Tuesday they still haven’t offered a JSON format of the Buzz feed yet.

Google Buzz API provides your buzz stream in Atom format. But, under the "same origin policy" you can’t pull data (like Atom) from another domain without using JSONP [a complement to the base JSON data format]. So, that’s when another Google service comes to the rescue: Google AJAX Feed API, a proxy that downloads your Atom/RSS feed and converts it into JSON format.

View DEMO

Now let’s go through the implementation steps:

1. CSS First

Buzzes will be added as unordered list. So, these are few CSS lines to clear margin and padding on the unordered list element and style buzz items to looks like rows.

/* ul list */
ul.gb{
   padding:0;
   margin:0;
}

ul.gb li{
   border-bottom:silver 1px solid;
   float:left;
   margin:1px 0 1px 0;
   padding:2px;
   list-style-type:none;
   height:48px;
   overflow:hidden;
   width:100%;
}
/* Buzz date */
ul.gb span.gb-meta {
   display:block;
   margin:3px 0 0 0;
}
ul.gb span.gb-meta a{
   font-size:95%;
   color:green;
   text-decoration:none;
}

2. Include jQuery

We’ll include jQuery library from Google’s high speed content distribution network.

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

3. Call When Ready

Then call the jQuery function when "document ready", to start executing the function when the DOM is fully loaded. This will ensure that Javascript will find the referenced HTML elements.

$(document).ready(function(){
   getGoogleBuzz('mikedotmore', 5, $('#my-buzz'));
});

The function takes 3 parameters: Google username, Number of entries to return, and jQuery Object of the placeholder.

4. The Function’s Process…

  1. The function code starts by specifying few parameters for the Google Feed API as such: getGoogleBuzz( ‘Buzz feed username‘ , number of entries , $(‘#id of placeholder‘) );
  2. Call jQuery AJAX function and define a function to be called when the JSON data is returned.
  3. Show error message if Google Feed API couldn’t retrieve the Buzz stream.
  4. Append a hidden unordered-list to the placeholder.
  5. Loop each Buzz entry of the entries array, and…
    • Parse publishedDate into a Date object.
    • Convert links that start with "http" or "https" into hyperlinks.
    • Append List item element with Buzz content.
function getGoogleBuzz(username,n, div){
   // params for Google Feed API proxy : Buzz Feed URL, Number of Entries 
   var data = {q:'http://buzz.googleapis.com/feeds/'+username+'/public/posted' 
            ,num:n
            ,output:'json'
            ,v:'1.0'};
   // call Google Feed API
   $.ajax({
      url:'http://ajax.googleapis.com/ajax/services/feed/load'
      ,data:data
      ,dataType:'jsonp'
      ,success:function(json){
         // json from Google Feed API was returned successfully..

         // error with Google Buzz feed ?
         if(json.responseStatus!=200) {
            div.html('<b style="color:red">'+ json.responseDetails +'</b>');
            return; 
         };
         // Buzz entries array
         var entries= json.responseData.feed.entries;
         var length= entries.length;
         // no entries!
         if(length==0) return; 

         // start output by appendding a hidden unordered list
         var ul = $('<ul class="gb" style="display:none"></ul>').appendTo(div.html(''));

         // loop buzz entries
         for(var i=0; i<length; i++){
            // parse published-date string
            var pDate = new Date(entries[i].publishedDate);
            // using entry snippet version
            var snippet = entries[i].contentSnippet;
            // convert links that start with http to hyperlinks using regular expression
            snippet = snippet.replace(/\b(https?\:\/\/\S+)/gi,' <a href="$1">$1</a>');
            // append buzz to UL
            ul.append('<li>'
               +'<span class="gb-content">'+ snippet +'</span>'
               +'<span class="gb-meta">'
                  + '<a href="'+ entries[i].link +'">'+ pDate.toLocaleString() +'</a>'
               +'</span>'
            +'</li>');
         };

         // now show-in the unordered list
         ul.show('slow');
      }
   });
}

5. Add a Placeholder

This is the div element that will hold your buzzes with id set to "my-buzz"

<div id="my-buzz">loading...</div>

View DEMO

Be alert though! Google Buzz is still brand new, and the rules of the game may be changed later. So, stay tuned…