Make your own Google Buzz feed widget with HTML and JavaScript

The Google Buzz API was released in Labs recently and I felt like distracting myself with some fun. In a matter of 2 hours I had my own little Buzz feed widget going. Here’s the code I’m currently testing with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h2>My Buzz Feed</h2>
<ul id="content"></ul>
<script type="text/javascript">
function handleResponse(response) {
        for (var i = 0; i < response.data.items.length; i++) {
        var item = response.data.items[i];
         
         if (item.verbs=='post') {
             var verbed = 'posted';
         } else if (item.verbs=='share') {
            var verbed = 'shared';
         } else {
             var verbed = item.verbs;
         }
         
         document.getElementById("content").innerHTML += '<li>';
          if (item.actor.profileUrl) document.getElementById("content").innerHTML += '<a href="' + item.actor.profileUrl + '"><img src=' + item.actor.thumbnailUrl + ' border="0" height="20" width="20" alt="Jason Rundell profile picture" /></a>';
          document.getElementById("content").innerHTML += '<img src="http://www.codeblink.com/images/buzz.png" height="20" width="20" alt="Buzz icon" /> On ' + item.updated.substring(0,10) + ', I ' + verbed + ':<br />';
          if (item.object.content) document.getElementById("content").innerHTML += item.object.content;
          if (item.object.attachments && item.object.attachments[0].links.preview) document.getElementById("content").innerHTML += '<br /><img src=' + item.object.attachments[0].links.preview[0].href + ' alt="' + item.object.attachments[0].type + '" />';
        }
      }
    </script>
    <script src="https://www.googleapis.com/buzz/v1/activities/jasonrundell/@public?alt=json&callback=handleResponse"></script>

View the working demo HERE.

Just make sure to change ‘/jasonrundell/’ on line 23 with ‘/[your buzz name]‘ and you’ll have a widget that will display your public Buzzes on any page.

Aside from the several object properties I’m using in this example widget, there are many more available to you to use and manipulate. Let me know what you come up with ;)

  • http://chirpir.com/2010/05/29/make-your-own-google-buzz-feed-widget-with-html-and-javascript/ Chirpir News | Make your own Google Buzz feed widget with HTML and JavaScript …

    [...] Read full story [...]

  • http://www.jasonrundell.com/ Jason Rundell

    Looks like my code needs tweaking! JS error if object is null. Will fix!

  • http://www.jasonrundell.com/ Jason Rundell

    Added in some checks. Should be working now.

  • http://www.javascriptbank.com// Javascript Examples

    that's all cool & great js tips, thank you very much for sharing.