June 01, 2010

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>

7 comments:

  1. I don't blog but, I like, Very nice!

    ReplyDelete
  2. Great, works better than anything else I've tried for this purpose.

    ReplyDelete
  3. I have been surfing around the web alot to find a nice and simple buzz widget that would show pictures and videos too! Thanks so much for sharing this code! made my day! :)

    ReplyDelete
  4. Rob, I like how the widget looks on your site :)

    ReplyDelete
  5. Hi,
    The only thing that appears on my blog once I add this widget is "View all buzz »"

    It does not show actual posts from Google buzz...

    Any idea how to solve this?
    Thanks!
    ~maya

    ReplyDelete
  6. Hi Maya, from what I have seen, this occurs when you have two instances of the widget on your blog. Share the URL with me if you want me to take a look at your blog; I'll be happy to.

    ReplyDelete