Add Google Buzz Buttons To Blogger Blog ( with Counter )

Add Google Buzz Buttons To Blogger Blog

google-buzz-buttons-for-blogger Google Buzz is a social tool from Google and it is much similar to Twitter and Facebook :). Google Buzz is a new way to start conversations about the things you find interesting. You can read more about Google Buzz at the official Google Blog . You might have seen the Google Buzz buttons on Mashable. You can see a demo of this button in this post page. :) . Now Google has officially released the Share Counters, So here are the steps to get the Buzz button on your blog.

1. This is the Google Buzz it Code. Copy it.

<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.canonicalUrl'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script> </div>

2. Login to your Blogger Account and navigate to Layout > Edit HTML and Expand your widget templates.

3.Now find this piece of code in your template after expanding the widget templates

<div class='post-header-line-1'/>
and immediately after that place our Google Buzz it Code

.If you were unable to find this code in your template,then look for the first occurrence of

<data:post.body/>

and immediately before that, place our Google Buzz it Code.

4.Save your template and see the results.

5. If you need a smaller compact button, then change normal-count to small-count in the code.If you want to show the button on the left rather than on the right, then change float:right to float:left  in the code

Comments

  1. This Code are avesome, only the icon went poorly mate ;/

    ReplyDelete
  2. can I use it in my self hosting wordpress?
    as I have tried it several times but the button seems unclickable but the image do show up ..

    ReplyDelete
  3. @hydir - for wordpress, edit your template files, look for <?php the_content();?> in each template file(single.php,index.pp etc) and above that place

    <div style="float:right;padding:4px;">
    <a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=<?php bloginfo('url'); ?>&srcTitle=<?php bloginfo('name'); ?>" target="_blank" rel="nofollow external" style="text-decoration:none;">
    <img
    src="http://img2.pict.com/15/da/3e/2809374/0/googlebuzz.png" style="border:0px;" alt="Buzz it" /></a>
    </div>

    ReplyDelete
  4. I like the widget Aneesh. But is there a possibility of Google Buzz Widget with share count.

    ReplyDelete
  5. Aneesh I tried the code in my blog but nothing is showing up.I added the code before the first occurrence of

    ReplyDelete
  6. Thanks Aneesh, I've put many of the tips on this great blog to use on my sites, they add a point of difference. Cheers.

    ReplyDelete
  7. Mice widget Aneesh, Already placed ;) Can have have it's counter please. I mean shared counter, by how many people have shared it...

    ReplyDelete
  8. I am new to Google Buzz. I am still trying to determine whether it is best to Buzz or to tweet. I wish there was a button that could do both. This post has some very useful information. I will pass along.

    ReplyDelete
  9. Thanks for another informative article.

    ReplyDelete
  10. I appreciate all of your information.

    ReplyDelete
  11. Hi Aneesh !
    I prefer the Google Reader Bookmark Javascript Code because it opens in a pop-up and you can select text/links/images from the article then click refresh and those Links/Images/text will be added to the message that will appear in Google Buzz .... you can't do this with the HTML code !

    If you to try it: LeBlogger.com

    ReplyDelete
  12. Thanks a lot for the code: is there a way to make the button count, just like the ones of Facebook and Twitter?

    ReplyDelete
  13. Cool....new button to share our works. Great Anesh.

    ReplyDelete
  14. nice button buzz thanks for share.

    ReplyDelete
  15. I can't find either of the html lines in my template code... not sure where to put this new gadget!!!

    Help!

    ReplyDelete
  16. @Tweedle Beetle Tri-Athletle - check the "Expand Widget Templates" Option

    ReplyDelete
  17. hi any other way to easy add buzz to direct to your blogger?? like widget type...

    ReplyDelete
  18. Gadget with Buzz support:
    - Add a gadget in Edit Layout/Page Elements
    - Type buzz in search box
    - choose Sociable gadget
    - configure it
    - enjoy :)

    Demo: http://kodatnik.blogspot.com

    ReplyDelete
  19. i add this code, bt it makes similar code frm digg dissapear.. i dont know why.. pls help!

    ReplyDelete
  20. Is there a way to space multiple badges out? Specifically on a new line? Having trouble figuring out an aesthetically pleasing arrangement of sharing buttons.

    ReplyDelete
  21. I dont like buzz. But I prefer more digg. However It is a nice feature by google.

    ReplyDelete
  22. Thank you for all you do. You are a sweetie.

    ReplyDelete
  23. Hey,

    you can also check our newly launched service here:
    http://njuice.com/button/

    It also adds a real "firehose" counter of mentions on Buzz. We have a Wordpress plugin for easier installation.

    ReplyDelete
  24. @geekboys - updated the post with your count buttons. it looks cool :)

    ReplyDelete
  25. My 1st comment in this site.
    Nice info, thanks for sharing

    ReplyDelete
  26. Who is Currently the Number One among these: Facebook, Twitter, Myspace or Google Buzz?

    ReplyDelete
  27. thanks this is awesome and works perfectly!

    ReplyDelete
  28. the code didn't worked for me. no hyper link appears in the image, just image shows up.

    ReplyDelete
  29. @PixelShots - which one did you try - the njuice buttons or th other one?

    ReplyDelete
  30. Aneesh - your posts rock as usual. Instructions are brilliant and it is working great on my blog.

    Thanks!
    www.beontheroad.com

    ReplyDelete
  31. Oh now I can place google buzz at my blog.Check out my blog hehehe..thanks

    ReplyDelete
  32. Thanks!

    Works nicely on my blog

    http://brandoniswrite.com

    ReplyDelete
  33. thanks,im going to use it in my website here

    http://islam-wallpapers.blogspot.com/

    ReplyDelete
  34. my blog look more beautiful with google buzz, thanks..

    ReplyDelete
  35. cool!
    I tried it and it works.
    thanks 4 share the tips ya?
    =)

    ReplyDelete
  36. Added to my blog

    http://daedgeofreason.blogspot.com/

    Looks good thanks!

    ReplyDelete
  37. Thanks alot for this.
    I have added all 3 retweet, buzz and fb share. I just need a small help is there a way so i can increase space between them coz they look a bit clumpy and too close together. May be space as much as we get with hitting a space bar 2 times. I hope i could explain my point.
    Once again thanks alot :)

    ReplyDelete
  38. Hey thanks for sharing the code. That is a great tool many of us can use on our sites.

    ReplyDelete
  39. Thanks for this Aneesh...I appreciate it.

    http://gadgetrepairtools.com/

    ReplyDelete
  40. Your post is really wonderful..thanks for posting...your post is very informative

    ReplyDelete
  41. Thanks for the code. I have used it for my other blog hosted on Blogger. Your blog is a Blogger blog with good ranks. Congrats for your blog content.

    ReplyDelete
  42. Sorry posting the button worked, but don't know where to put the code
    for the actual buzz; hope this makes sense

    ReplyDelete
  43. thanking you for this useful post.i found it so much helpful to me.it was nice tutorial kind post.thanx for all info.

    ReplyDelete
  44. Thanks, it works well...
    I' ve been customizing my blogger with your TUT, it really helps a lot.
    May i ask?your google buzz code works and its showing in my teaser and inside the post, but the stumbleupob and tweetcount only show inside the post,how can i make it show in the teaser?

    ReplyDelete
  45. Great tut. Looking forward to using it when I get my geekdom blog up. Thanks much. :)

    ReplyDelete

Post a Comment