skip to main | skip to sidebar

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: 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.

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].

* Bee icon by sora1589

42 comments

  1. Unknown // February 15, 2010 at 3:49:00 PM GMT+11  

    You'll be tech tweeted tomorrow ;) Nice plugin

  2. Trey Brister // February 15, 2010 at 4:55:00 PM GMT+11  

    Will the option attribute of the div tag validate as HTML or xHTML?

    Will it break validation?

  3. James // February 15, 2010 at 5:12:00 PM GMT+11  

    So what happens if you used your gmail at work and all of a sudden you publish all of your work contacts?

    People lose their job for using facebook at work.

    What is going to happen to Gmail when employers learn it is a social network?

    What happens if you publish people to your blog and they didn't want to be published? I am asking because I don't know if it's possible.

    I opted out one day ago.

  4. Unknown // February 15, 2010 at 5:23:00 PM GMT+11  

    Excellent work, This is a game changer for me.

  5. Lam Nguyen // February 15, 2010 at 5:26:00 PM GMT+11  

    Cool! Very fast works for a baby like Buzz!
    @James: Do your job at work only, do social at home :D

  6. James // February 15, 2010 at 6:03:00 PM GMT+11  

    @lam - That is my point. People lose their jobs for social networking at work,.

    I am concerned if I can recommend Gmail for professional use anymore. I won't be posting people's "contact books" on other peoples websites out of respect. At least until I know whether or not they getting sued.

  7. MIA // February 16, 2010 at 1:13:00 AM GMT+11  

    I knew it wouldnt be long before you created a GBuzz plugin :) So proud of you again :D

  8. Anonymous // February 16, 2010 at 7:47:00 AM GMT+11  

    Great solution! Thanks for shared

  9. Peter // February 16, 2010 at 8:12:00 AM GMT+11  

    Thanks!! This is exactly what I was looking for.

  10. Mike // February 16, 2010 at 10:23:00 AM GMT+11  

    @Elijah,
    thanks man..

    @Trey,
    No.. code of demo 2 would be fine.

    @Wallace, @Peter,
    Thanks for stopping by :)

    @MIA,
    thanks dear :)

  11. Mike // February 16, 2010 at 10:29:00 AM GMT+11  

    @Lam,
    you're right!

    @James,
    I agree with @Lam. People usually communicate with business/other email addresses at work, check Google Apps.
    And for the privacy issue, Google has made few adjustments

  12. Daniel Schwarz // February 16, 2010 at 11:09:00 AM GMT+11  

    Perfect for what I need!

  13. James // February 16, 2010 at 1:32:00 PM GMT+11  

    @mike - You're wrong... I know plenty of people who use gmail at work. The non paid version.

    That is flat out wrong assumption. I will not be publishing anybodies contact books without their permission. It's as simple as that.

    You're wrong.

    Yes they made adjustments. I'm not making any moves out of respect until I know whether or not they are getting sued. It's the only responsible thing to do.

  14. Mike // February 16, 2010 at 2:08:00 PM GMT+11  

    @James,
    ok!

  15. Free Fonts // February 16, 2010 at 10:56:00 PM GMT+11  

    LOL, we've all caught the google buzz it seems

  16. Mike // February 17, 2010 at 12:42:00 AM GMT+11  

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

  17. Mike // February 17, 2010 at 8:29:00 AM GMT+11  

    @Xander,
    What is the username of your public google profile?

  18. Tristan Botly // February 17, 2010 at 6:51:00 PM GMT+11  

    A very nice JQuery plugin and quick turn around!

  19. Mike // February 18, 2010 at 1:38:00 AM GMT+11  

    @Tristan,
    Thanks.. and I appreciate mentioning the plugin on your blog :)
    Also congrats on your new good-looking blog.

  20. Mike // February 22, 2010 at 2:10:00 AM GMT+11  

    @Xander,
    is it PHP? replace username value in options with something like this <?php echo $user ?>

  21. Anuj Seth // March 3, 2010 at 10:29:00 PM GMT+11  

    The widget has been included in BuzzAware - The Google Buzz Applications Directory

  22. Mike // March 4, 2010 at 9:43:00 AM GMT+11  

    Thanks @Anuj :)

  23. jon // March 9, 2010 at 1:11:00 AM GMT+11  

    pretty sweet. Is there a way to turn off snippet and show the whole post? The buzz in gmail itself says: Expand this post » Can the whole post in all its glory be shown in this app? It would make a super cms if so...

  24. Mike // March 9, 2010 at 8:19:00 AM GMT+11  

    @jon,
    yes, you can set option "snippet" to 0 to show the full version of a buzz :)

  25. Ryo // June 15, 2010 at 10:46:00 PM GMT+10  

    Thanks a lot for this nice Widget. I used it, removed the "i" and gave you credit right below the widget.
    Can I donate?

  26. Mike // June 16, 2010 at 9:11:00 AM GMT+10  

    @Ryo,
    you welcome.. No need for donation, but thank you for the credits

  27. Swashata // June 26, 2010 at 6:06:00 AM GMT+10  

    Hi Mike! I was wondering if there is a way to convert string data given by services like is.gd to json using any api! It would be great if you can suggest me some tool :)

  28. Mike // June 26, 2010 at 9:18:00 AM GMT+10  

    @Sawashata,
    Try this cross-domain jQuery plugin [http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/]

  29. Swashata // June 26, 2010 at 9:04:00 PM GMT+10  

    Works like a charm! Thanks a lot! Just FYI, we need to get the original text from the response url like this:
    var shorten_url = 'http://is.gd/api.php?longurl=' + doc_location;
    $.get(shorten_url, function(data, status){
    alert(status);
    alert($(data.responseText).text().trim());
    });

    Thanks again for giving me the plugin :) :) :)

  30. Yeow // July 22, 2010 at 5:09:00 AM GMT+10  

    a ver si puedo lograrlo colocar en mi sitio... porque esta muy bueno! :D

  31. Al Kamal Md. Razib // July 22, 2010 at 9:09:00 PM GMT+10  

    Great posting ! It's really helpful. Thanks.

  32. Kenny Tran // November 2, 2010 at 12:44:00 AM GMT+11  

    Just bookmarked this site. Useful information.

  33. Troy // November 4, 2010 at 7:41:00 PM GMT+11  

    Another good post....will be back for more!

  34. lonelicloud // November 28, 2010 at 3:58:00 PM GMT+11  

    It's a very nice piece! But please check the googlecode project again, and update the javascript to use the jQuery 1.4.4.

  35. Mike // November 28, 2010 at 10:31:00 PM GMT+11  

    @lonelicloud,
    are you using 2 versions of jQuery on the same page?
    you should replace jquery 1.3.2 with jQuery 1.4.4 , I tested it and it works :)

  36. lonelicloud // November 29, 2010 at 4:38:00 AM GMT+11  

    @Mike,
    Thank you very much! I remembered that I've tested the jQuery v1.4.3 with this widget and found it not work. Anyway, it works fine with jQuery v1.4.4 now.

    Yes, I'm using 2 versions of jQuery with this widget before and it doesn't work only when I trying to move all the javascripts from wp_head to wp_footer.

    Now, I follow your instruction to use only jQuery v1.4.4 and load all the javascript in wp_footer. This widget doesn't work fine either.

    I'm very appreciate if you could give me some hints on this.

  37. Mike // November 29, 2010 at 8:41:00 AM GMT+11  

    @lonelicloud,
    you welcome..
    Try to move all of the Google Buzz code to the footer except for the jQuery include to avoid having 2 jQuery on the same page.. cause some plugin/theme might includes jQuery in the header..

  38. Anonymous // December 23, 2010 at 12:28:00 AM GMT+11  

    hi there,
    nice work man, couldnt find anywhere something to do this, thanks for sharing.
    I use google sites, any ideas on how should be the code to paste as html only?
    thanks!

  39. Pankaj Sharma // December 23, 2010 at 9:46:00 PM GMT+11  

    Hi
    Great work.I was looking for this sort of things. i implemented this and it worked for me.Thanks again

  40. Mike // December 24, 2010 at 11:31:00 AM GMT+11  

    @Pankaj,
    Thanks for your feedback :)

    @Anonymous,
    Google sites is no good for CSS/JS customizations, Google Blogger is more flexible.

  41. Irene // April 13, 2011 at 8:30:00 PM GMT+10  

    Great widget! I'm planning on using it, but I need to remove the source link from the content. I'm guessing it's in:
    (op.snippet?linkify(x.contentSnippet,src):x.content'x.contentSnippet')

    but I can't get it working.
    Thank you,
    Irene

  42. Mike // April 14, 2011 at 7:35:00 AM GMT+10  

    @Irene,
    Have you tried to set the "source" option to "0",
    Go to Options list for more info.

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS