Add Google "Buzz This" and "Buzz it" buttons to your Blogger blog

Google Buzz Button Tutorial for BloggerRecently, Google has launched it’s new social media platform, Buzz. It is an extension to Gmail which enables you to share photos, links, videos, information and more with your contacts. Or simply can be said that Buzz is a mixture of Twitter, Facebook, Google Reader, Picasa and many other services.

google_buzz_button_blogger_blog

In this simple tutorial, I am going to teach you how to integrate a “Buzz This” buttons in your blog to share your blog posts on Google Reader. But, this is not an official button released by Google. It was created by Andrew Brett, a Software Engineer at TechCrunch.

First, log into Blogger. Then go to Layout > Edit HTML and check the ” Expand Widgets Template” box. Now, search for this piece of code.

<data:post.body/>

Immediately before the code above, paste the following code.

<!–Buzz-Me-Code-Starts–>
<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’ target=’_blank’><div style=’float:right;padding: 3px;’><img alt=’Buzz Me’ src=’http://1.bp.blogspot.com/_b8IA1ajBJG8/S4I4bI7Q6mI/AAAAAAAAAog/zvop1rWttFI/googlebuzz.gif’/></div></a>
<!–Buzz-Me-Code-Ends-http://introblogger.blogspot.com–>

Update: For Classic Blogger Templates

Go to Template > Edit HTML. Then, search for this code.

<$BlogItemBody$>

Immediately before that code, paste the following code.

<!–Buzz-Me-Code-Starts–>
<a href=’http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcTitle=<$BlogTitle$>’ target=’_blank’><div style=’float:right;padding: 3px;’><img alt=’Buzz Me’ src=’http://1.bp.blogspot.com/_b8IA1ajBJG8/S4I4bI7Q6mI/AAAAAAAAAog/zvop1rWttFI/googlebuzz.gif’/></div></a>
<!–Buzz-Me-Code-Ends-http://introblogger.blogspot.com–>

It will look like this in your post. This button will float at the right side of your post. If you want it to float at left side all you have to do is just changing the “right” to “left” in bolded text in code above.

google_buzz_button_Blogger1

And this is another version of the “Buzz This” button, a “Buzz it” button. Search for this piece of code.

<div class=’post-header-line-1′>

Now, immediately before that code, paste the code shown below.

<!–Buzz-Me-Code-Starts–>
<a style=”float: right; padding-left: 19px; background-image: url(http://4.bp.blogspot.com/_b8IA1ajBJG8/S4I4FVRmbyI/AAAAAAAAAoQ/RXsKMbkj3Yw/buzz-icon2.png); background-repeat: no-repeat;” expr:href=’&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + “&amp;srcTitle=” + data:blog.title’ target=’_blank’> Buzz it</a>
<!–Buzz-Me-Code-Ends-http://introblogger.blogspot.com–>

Update: For Classic Blogger Templates

Go to Template > Edit HTML. Then, search for this code.

<$BlogItemTitle$>

Immediately after that code, paste the following code.

<!–Buzz-Me-Code-Starts–>
<a style="float: right; padding-left: 19px; background-image: url(http://4.bp.blogspot.com/_b8IA1ajBJG8/S4I4FVRmbyI/AAAAAAAAAoQ/RXsKMbkj3Yw/buzz-icon2.png); background-repeat: no-repeat;" href=’http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcTitle=<$BlogTitle$>’ target=’_blank’> Buzz it</a>
<!–Buzz-Me-Code-Ends-http://introblogger.blogspot.com–>

This is how this button will look like in your blog.

google buzz button Blogger2
This entry was posted in Blogger Hacks. Bookmark the permalink.

7 Responses to Add Google "Buzz This" and "Buzz it" buttons to your Blogger blog

  1. Highton-Ridley says:

    I'm jealous! What about one for classic templates?

  2. Rethnaraj says:

    @Highton-Ridley

    Hi, I've never used classic templates before. I was a bit confused when editing and creating suitable code for classic template. But, I managed to create code for Classic template…I've updated the post with the code…hehe^_^!!

  3. Dissertation Writing says:

    Nicely explained. It's indeed an art to stop new visitors with your attractive writing style. Truly impressive and nice information. Thanks for sharing.
    —————————————————
    Dissertation Writing | Dissertation Advice

  4. KATIE DOYLE says:

    The blogger is Huge network for blogging i get lots of interesting information from here, hope blogger will modify and increase attributes to make it simpler.

    Dissertation Writing | Dissertation Topics

  5. preety says:

    This kind of information is very limited on internet. Nice to find the post related to my searching criteria. Your updated and informative post will be appreciated by blog loving people.
    dissertation help|thesis help|assignment help

  6. Aria Kerry says:

    Hi, I've never used classic templates before. I was a bit confused when editing and creating suitable code for classic template.

    online website design | web design | free website design | Realsoft Technologies

  7. victor peterson says:

    Thanks for sharing this nice blog articles.
    assignment writing
    assignment help
    real soft technologies

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled