Google Buzz button with counter

Yes,Google buzz now Counts.
A Google buzz counter developed by buzzr.com which can retain number of times a particular article has been buzzed.
Like A tweetmeme counter it can counts and display number of times it has been shared.

A buzzr button is available by inserting the following script.

<script src="http://www.buzrr.com/button.js"></ script>

Add a bit a bit of CSS to the counteer and it is ready to be shared. And the result will look like below example.With each share the counter grows.

Google Buzz Widget -Display Your Buzz on webpages

You must have seen twitter API widget which displays your tweets on to your blog using JQuery.This Google buzz gadget works similarly by taking feeds from your google buzz and display on your web pages.
This widget is developed by moretechtips and is on google code.You can either download it from there and put in a direct way.

 This is a jQuery widget for the brand new social network -Google Buzz- that you can embed anywhere to integrate your buzz stream into your page.

You need to add following before </head> section.

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://google-buzz-widget.googlecode.com/files/jquery.google-buzz-1.0.min.js"></script>

First one is a jquery library and the second one is google buzz widget script.

And finally you have to add a javascript which calls various parameters from your google buzz widget javascript ,which is the second one from above two.

<script type="text/javascript">
   $(document).ready(function(){
      $('div.my-buzz').googleBuzz({
         username:'Your googleprofile name'
         ,n:4
         ,show_n:0
      });
   });
</script>

<div class="my-buzz">loading..</div>

Options and Modifications-

Your googleprofile name - Replace This with your own google profile name which is generally your gmail id.
n is the number of buzzes to read (maximum 100, default 10)
show_n is the maximum amount of buzz to display simultaneously (zero disables the transition effect and the default is 1)

Google Buzz Tips And tricks

Since everybody is buzzing about new google buzz.here are some tips and tricks to customize your buzz experience.

1.Add google buzz button to your blogspot.

2.Disable e-mail notification
When someone replies to one of your Google Buzz messages, Google sends an email notification to your Gmail account. If you don't like the notifications you can create a filter that archives or deletes all the messages that are labeled "buzz".Make sure you type label:buzz

3.Add more connecting sites.
Google Buzz lets you import content from services like Google Reader, Picasa, Blogger, Twitter, Flickr.Google explains how to add a link to your profile and how to include a special markup (rel="me") that offers more information about the link.

<link rel="me" type="text/html" href="http://www.google.com/profiles/your.username" />

4. Quickly open Google buzz -keyboard shortcuts
If you've enabled keyboard shortcuts in Gmail, type g b from any Gmail view and you'll open Google Buzz.

Some other useful shortcuts:

Shift+l - like a message
m - mute (ignore) a conversation
r - add a comment
p / n - go to the newer / older conversation
o - expand conversation

5. Hide Google Buzz counter
Unfortunately, there's no Gmail option that lets you hide counter, but you can hide the link to Google Buzz. Drag "Buzz" to the "X more" drop-down and you can hide the Buzz label.

 6.Subscribe to a Google Buzz account in a feed reader
Google Buzz's search feature shows the latest public messages that match your query.
Some useful searches:

author:@gmail.com - find all the messages written by a specific user (you can also use a partial name instead of an email address)

commenter:@gmail.com - find all the messages that have a comment from a specific user

has:photo, has:video, has:link - restricts the results to messages that include photos, videos or links (for example: vancouver has:photo)

source:flickr, source:twitter, source:reader- restricts the results to messages imported from Flickr, Twitter, Google Reader (for example: vancouver source:flickr)

7. View Google Buzz photos in a slideshow

When you upload photos to Google Buzz, they're added to Picasa Web Albums. If you click on a thumbnail, Google Buzz will open a lightbox to help you quickly navigate between images. Unfortunately, there's no option to view the images in a slideshow, but Picasa Web Albums has this feature and there's a small link that opens the photo album. Click on "view all" and you can select the slideshow option, export photos using Picasa or print photos.

8. Add rich text messages

You can use the same tricks that work in Google Talk to write rich text messages:

*bold message*
_italic message_
-deleted message-

Add Google Buzz button on blogger

Google Buzz (Google Buzz) seems  to be an interesting new way to share content with your Gmail friends, so why not have a button for sharing blog posts to the service?
Officially Google have not provided any script for adding a Buzz button or link below each post. This tutorial will help you to add a "Buzz this" icon below every post on your blogger blog.

Goto layout then Edit HTML from dashboard in blogger account.

Click on expand widget Template check box on the top right(see image)

And find <data:post.body/>there.

 Now paste the code given below after <data:post.body/> statement.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZFVNIuH0ej8YDt0PdgV8Dru-6NaysfNsbLAZmufyJqCwx1JS6yHO8nL-ci4DQ0BngIuquULLrCbqks493diq-9KEYBBh8QgoQ5iaLKzuInrnb0fGf7LfHBiOVJFQsCfOrX76RXMiXQS7o/s1600/google-buzz.pngl'/></a>

Replace http://myfundoo-blog.blogspot.com/ with your blog url.

Click on preview to check if everything  is fine and then click save template .

Customization: 

You can Increase size pf the button by changing the image url.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZFVNIuH0ej8YDt0PdgV8Dru-6NaysfNsbLAZmufyJqCwx1JS6yHO8nL-ci4DQ0BngIuquULLrCbqks493diq-9KEYBBh8QgoQ5iaLKzuInrnb0fGf7LfHBiOVJFQsCfOrX76RXMiXQS7o/s1600/google-buzz.pngl

 Here are some blogger buzz buttons with different shapes and sizes:
1.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_nqp-0VCwy0c/S3Utg7x6_FI/AAAAAAAABC4/K89iKzUjwuA/s1600-h/google+buzz+2-++32px.png'/></a>

2.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='http://4.bp.blogspot.com/_nqp-0VCwy0c/S3UuCMUwUUI/AAAAAAAABDA/cgIjrMPLQxI/s1600-h/google+buzz+32px.png'/></a>

3.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_nqp-0VCwy0c/S3UubmtTiVI/AAAAAAAABDI/9-Zai440dkY/s1600-h/Google+Buzz+125+(medium).png'/></a>


4.Text link
 <a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'>G-buzz</a>

where G-buzz is the anchor text and you can replace it with any other text.