Google Buzz Widget - A jQuery Plugin

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.

Google Buzz is a new social network based on Google profiles and built right into Gmail. It was launched last Tuesday, and in 2 days over 9 million buzzes and comments were created!

Now Check out these DEMOS..

Demo 1 | Demo 2

Demo 1: Triple Bar ►
In this demo widget rotates the returned buzzes -3 at a time. Here is how to implement it:
1- Include jQuery and plugin javascript files.
2- Create a div element with a class "google-buzz".
3- Place widget settings in an "options" attribute as a comma delimited array.
<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>

<div class="google-buzz" options="{
   username:'mikedotmore'
   ,n:9
   ,show_n:3
   ,animate:'height'
}">loading..</div>
You can see that "username" -necessary option- is your Google username that appears on your Google profile URL.
Number of buzzes to return 'n' was set to 9 only.
Number of buzzes to show at a time 'show_n' was set  to 3.
Animating buzz height instead of the default opacity animation.

Demo 2: Fixed List ►
Demo here uses a typical Javascript call, to create a fixed list of buzzes without any transitions..
<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>
<script type="text/javascript">
   $(document).ready(function(){
      $('div.my-buzz').googleBuzz({
         username:'mikedotmore'
         ,n:8
         ,show_n:0
      });
   });
</script>

<div class="my-buzz">loading..</div>
One option was changed here: 'show_n' was set to 0 to disable any transitions..

Features

1. Display buzzes as a bar with transition effects or as a fixed list.
2. Many transition options like opacity, height, font-size.
3. Each part of the buzz -like links, dates- has its own class for easy CSS customization.
4. Show or hide some parts of the buzz like date, source.
5. Use a typical JS call or auto-load div elements that have "google-buzz" class.
6. Widget adds a small "i" letter that links to the widget page. You can remove it by setting (info) option to empty string (''), but I'll appreciate it if you attribute me elsewhere on your website.
7. By default, widget displays the snippet version of a buzz. which fits for a small and fixed placeholder. Still, you can choose to display the complete content of the buzz.

Few Notes

• CSS code is essential but I didn't focus on it in demos above. You can check demos to examine the required JS & CSS code.
• The snippet version (120 characters max.) of a buzz works well with short statuses like Tweets.

Project | Options | Download plugin | Demo 1 | Demo 2

Update!
If you would like to get your hands dirty and see how this plugin works, Check my post [How to Pull Your Google Buzz with jQuery].

POSTING BERKAITAN

akur:
Tips Trick | Blog