Buzz feed widget for your blog

Google Buzz has a JavaScript API that lets you do several things with Buzz.  What I needed was a widget on my blog that would show my recent Buzz activity.  I spent a few hours and hacked up one myself.  Thought of sharing the code with others. (This code doesn't come with any sort of expressed or implied warranty. You can do with this code whatsoever you like.)

The widget shows your 6 recent activities on Buzz.  It links to your Google Buzz profile at the bottom.  For each post, it adds a link to the Buzz item and shows number of likes and comments.  This was my feed at the time of posting:

You can use this form to quickly add the widget to your blog:

Buzz User ID		What's my user id?
Number of activities to show

For now, I am sharing the code here.  I should build some simple UI where you would specify the parameters like no. of items to show, your Buzz user id, etc. and get the code customized for you automatically.  I should also upload the code to someplace prominent, maybe Google Code.  But I would take some time before I do all this.

If you are adding this widget to your blog, don't forget to replace all occurrences of BUZZ_USER_ID with your own Buzz user id.  If you want to add this to your Blogger blog, but you are not sure how to do it, About.com has an article showing how to add any such widget to Blogger.  This is all HTML, JavaScript, and CSS.  So, you should be able to toss this code into any blog or web page and it should work.

If you don't use Blogger, you can use the following code to get the widget on your blog.  (Don't forget to replace all occurrences of BUZZ_USER_ID with your own Buzz user id.)

<style type="text/css">
#buzz-widget {
  width: 95%;
  padding: 2px;
}
#buzz-header {
  text-align: center;
}
#buzz-footer {
  text-align: right;
}
#buzz-footer a {
  text-decoration: none;
  font-weight: bold;
}
.buzz-feed {
  padding: 0;
  margin: 0;
}
.buzz-feed .buzz-entry {
  list-style-type: none;
  text-indent: 3px;
  border-bottom: 1px dotted gray;
  padding: 0.5em 0 0.5em 0;
  background-image: none;
}
img.buzz-icon {
  vertical-align: text-bottom;
  width: 16px;
  height: 16px;
}
</style>

<div id="buzz-widget">
<div id="buzz-feed"></div>
<div id="buzz-footer"><img src="http://goo.gl/TmmA" class="buzz-icon" /> <a href="http://www.google.com/profiles/BUZZ_USER_ID">View all buzz &raquo;</a></div>
</div>
<script type="text/javascript">
function getVerb(verb) {
  verbs = {
    'post': 'Posted',
    'share': 'Shared'
  };
  return verbs[verb] || 'Posted';
}

function normalizeTitle(title) {
  var MAX_LEN = 30;
  if (title.length > MAX_LEN) {
    return title.substr(0, MAX_LEN - 3) + '...';
  } else {
    return title;
  }
}

function getAttachmentHtml(attachments) {
  for (var i = 0; i < attachments.length; ++i) {
    var atch = attachments[i];
    if (atch.type == 'photo' || atch.type == 'video') {
      return '<img src="' + atch.links.preview[0].href + '">';
    }
  }
  return '';
}

function getItemHtml(item) {
  var html = getVerb(item.verbs[0]);
  var linkUrl = '';
  if (item.links.alternate[0]) {
    linkUrl = item.links.alternate[0].href;
    html += ' <a href="' + linkUrl + '">' +
        normalizeTitle(item.title) + '</a>';
  } else {
    html += normalizeTitle(item.title);
  }
  html += ' on ' + item.source.title;
  if (item.object.attachments) {
    var attachmentHtml = getAttachmentHtml(item.object.attachments);
    if (attachmentHtml) {
      if (linkUrl) {
        html += '<br><a href="' + linkUrl + '">' + attachmentHtml + '</a>';
      } else {
        html += '<br>' + attachmentHtml;
      }
    }
  }
  
  var numComments = item.links.replies[0].count;
  if (numComments > 0) {
    html += '<br><img src="http://goo.gl/Y4eU" class="buzz-icon"> ' +
        numComments + (numComments > 1 ? ' comments' : ' comment') + '&nbsp;&nbsp;';
  }
  
  var numLikes = item.links.liked[0].count;
  if (numLikes > 0) {
    if (numComments > 0) {
      html += '&nbsp;&nbsp;'
    } else {
      html += '<br>';
    }
    html += '<img src="http://goo.gl/0l9D" class="buzz-icon"> ' +
        numLikes + (numLikes > 1 ? ' likes' : ' like');
  }
  return html;
}

function showFeed(response) {
  var entries = [];
  var items = response.data.items;
  for (var i = 0; i < items.length; ++i) {
    entries.push(getItemHtml(items[i]));
  }
  document.getElementById('buzz-feed').innerHTML =
      '<ul class="buzz-feed"><li class="buzz-entry">' +
      entries.join('</li><li class="buzz-entry">') +
      '</ul>';
}
</script>
<script type="text/javascript"
    src="https://www.googleapis.com/buzz/v1/activities/BUZZ_USER_ID/@public?alt=json&max-results=6&callback=showFeed">
</script>