Add Google Buzz button (with counter) below post

Google Buzz, yet another social networking service, has been launched in February. And yes, yet another post sharing button to be added to your blog -Google Buzz button.

The function is of course similar to those of Facebook’s Share button or Twitter’s “Tweet This” button -to share you articles/posts, thus increasing their exposure.

You can test the live example of this button in my widget showcase blog.

Now let’s do this:

 

1. Configure your button

Go to Google Buzz button configuration page.

 

1. You can select button style and whether to include counter or not. Language is selectable too.
2. This one is important: Make sure you set URL to post to “Containing page”.

 

2. Modify the button code

The purpose of this step is to enable buzzing of individual post, from any page. (If you skip this step, the button will share the containing page, i.e. if you click it while on homepage, it will share your homepage, not the intended post).

1. Copy the code from configuration page and paste it in Notepad. The actual code varies depending on how you configured the button. Anyway, it should more or less look like this:
   

   <a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
   <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

2. Add this code after the opening <a tag:

    expr:data-url='data:post.url'

   making the code look like so:

   <a expr:data-url='data:post.url' title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
   <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

3. Adding code into template

We will add the button in the footer area of each post.

1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Tick the  Expand Widget Templates check box on top right of the HTML window.
4. Look for following lines in your HTML:

    <data:post.body/>

   or

    <p>data:post.body/></p>

5. Paste the code below the line in step 4, and wrap it in a div, like so:

   <data:post.body/>
   <div id="buzz">
   PLACE THE MODIFIED BUZZ BUTTON CODE HERE
   </div>

4. Testing

1. Click PREVIEW and see if your “Buzz” button appears at the footer of each post. If it does, then click Save Template.
2. Now you can test whether the button works or not. Click the button, if Google Buzz page pops up and the url on top of the pop up window looks similar to your post url, then it works.
3. Done, enjoy!

Before you leave:

• Do you find this article useful? Share it via Retweet, Share or Stumble button.
• Any suggestion, question or comment? Please post it in the comments below.