Google Buzz button for your Blogger blog

Update: GXG has a wonderful update to this approach, which includes Google Analytics tracking. See his post here.

In case you hadn’t seen the news, the Buzz team announced the release of a set of buttons to make it easier for your readers to share your content with their friends via Google Buzz. You can go to buzz.google.com/stuff to generate your own button, but when I did that, the button that showed on my site used the URL of the page for all instances of the button – which doesn’t work when multiple posts show up on the page (like the homepage). Turns out, there’s just a little bit of work needed to seamlessly integrate this into your Blogger template.

Navigate to ‘Edit HTML’ in your Layout: Click “Layout” then “edit HTML”, then click “expand widget templates” to view the full layout for your blog.

Find the post-header-line-1 div in your Layout: In your browser, click ctrl-f to find the following line:

:

Insert the following text:

What this does is pass the Blogger variable “data:post.url” to the Buzz button which is the permalink of the post, so that even on pages where multiple posts appear, the button will be connected to the post, not the entire page. For appearances sake, I enclosed this all in a div that has the text aligned around it; you can alter the presentation of the button by adjusting the CSS variables. Here’s how it looks like on the blog:

Each time one of your reader clicks the button, the counter goes up by one, and your posts are shared through to that reader’s Buzz stream (and out to their followers). Pretty slick!

Thanks to Bloggerstop.net for the original idea, now that there’s an official Buzz implementation, it was easy to incorporate the Buzz URLs into Bloggerstop’s approach to get the exact end result I wanted.