Add Google Buzz button (with counter) below post

buzz3

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.

buzz button configure 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.

7 comments to "Add Google Buzz button (with counter) below post"

Phillip May 8, 2010 at 2:17 PM    

appreciate the post, keep up the good work.

Marly May 10, 2010 at 10:28 PM    

This is a great post. There are so many networking sites to get involved in. I just started using Buzz over the weekend so on a learning curve. This post was really helpful.

Greenlava May 11, 2010 at 12:05 AM    

@Phillip
Thanks and welcome to Blogger Sentral.

@Marly
Thanks, glad you found it useful.

Sam,  October 20, 2010 at 10:34 PM    

Great help thanks.

In "Modify the button code Step 2" you show how to buzz the blog post instead of the blog homepage url regardless of the page type (homepage, item, archive etc).

Tell me please it is possible to also automatically include a snippet of the blog post or even the whole post with other modifications to the buzz code?

Greenlava October 23, 2010 at 1:59 AM    

@Sam
I don't think that's possible (at least not that I know of).

Sam,  October 23, 2010 at 7:13 PM    

Thanks for your reply ;)

Chandeliers for Sale May 1, 2011 at 9:17 AM    

Well, thanks for your kind post. There are lots of site like this in Google which offer this kind of post but the codes are not correct... not working instead.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.