How To Add Google Buzz Button In Blogger

Make your blog to looks more beautiful by adding social network button like Google buzz is also popular button among blog. This blog attribute is much similar with previous article about how to add retweet button and the others social network button. The benefit is the same which help you to count how many people like the article about. Refer to here as an example

Officially Google buzz has three different styles, you can choose one of them you like it such as Button + Counter, Button only, link. Moreover, you can apply only two type of Google buzz whether you want to use “on the top” or “on the side” see below screenshoot:

I will explain both adding to sidebar widget as well as add Google buzz into post body. Now, let me show you how to add Google buzz into your Blog as a widget first:

ADD GOOGLE BUZZ ON WIDGET

• Firstly, come visit http://www.google.com/buzz/stuff?hl=en

• Choose Post to Google buzz, here you can choose type, style as well as language you want to use. In the bottom line there have a script code like below

<a title="Post to 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>

• Log in into your blogger account

• Go to Design > Add gadget > Choose HTML > copy and paste script above then save it, the Google buzz button will appear on sidebar depend on where you place the widget.

ADD GOOGLE BUZZ IN POST BODY

• Second way is how to add Google buzz button on post body:

• Go to layout > Edit HTML > check “Expand widget template” box (remember always backup your template before add or change anything)

• Find this code, Ctrl+F <div class=’post-header-line-1′/> if you do not find it try to find another code <data:post.body/>

• For Button style Copy and paste this code below just BEFORE <data:post.body/>

<div style=”float:right;padding:4px;”>
<a expr:href=’&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ‘ rel=’nofolloW’ style=’text-decoration:none;’ target=’_blank’>
<img alt=’Buzz It’ src=’http://i48.tinypic.com/idyc04.png’ style=’border:0px;’/></a>
</div>

• For compact style just copy and paste code below the same BEFORE <data:post.body/>

<div style=”float:right;padding:4px;”> <script type=’text/javascript’> njuice_buzz_url = ‘<data:post.title/>’; njuice_buzz_title = ‘<data:post.url/>’; njuice_buzz_share = ‘reader’; </script> <script type=’text/javascript’ src=’http://button.njuice.com/buzz.js’/> </div>

The red color that I bold code on the script is showing, you can change where you want to place it right or left side. If nothing is wrong you can be able to see your Google buzz button appear on your Blog. I try to guide you step by step so that you can do it without any problem, but if you still difficult to make it, just drop me an email I will definitely help you guys. Good Luck