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…