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

45 comments

  1. Elijah Manor // February 15, 2010 4:49:00 AM GMT  

    You'll be tech tweeted tomorrow ;) Nice plugin

  2. Trey // February 15, 2010 5:55:00 AM GMT  

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

    Will it break validation?

  3. James // February 15, 2010 6:12:00 AM GMT  

    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. Wallace // February 15, 2010 6:23:00 AM GMT  

    Excellent work, This is a game changer for me.

  5. Lam Nguyen // February 15, 2010 6:26:00 AM GMT  

    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 7:03:00 AM GMT  

    @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 15, 2010 2:13:00 PM GMT  

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

  8. night-fairy-tales.com // February 15, 2010 8:47:00 PM GMT  

    Great solution! Thanks for shared

  9. Peter // February 15, 2010 9:12:00 PM GMT  

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

  10. Mike // February 15, 2010 11:23:00 PM GMT  

    @Elijah,
    thanks man..

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

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

    @MIA,
    thanks dear :)

  11. Mike // February 15, 2010 11:29:00 PM GMT  

    @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 12:09:00 AM GMT  

    Perfect for what I need!

  13. James // February 16, 2010 2:32:00 AM GMT  

    @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 3:08:00 AM GMT  

    @James,
    ok!

  15. Free Fonts // February 16, 2010 11:56:00 AM GMT  

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

  16. Mike // February 16, 2010 1:42:00 PM GMT  

    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. Xander // February 16, 2010 4:51:00 PM GMT  

    @Mike
    It's seems like it doesnt take my username. How come ?

  18. Mike // February 16, 2010 9:29:00 PM GMT  

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

  19. Tristan Botly // February 17, 2010 7:51:00 AM GMT  

    A very nice JQuery plugin and quick turn around!

  20. Mike // February 17, 2010 2:38:00 PM GMT  

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

  21. favSHARE // February 21, 2010 1:11:00 AM GMT  

    This article has been shared on favSHARE.net. Go and vote it!

  22. Xander // February 21, 2010 3:02:00 PM GMT  

    @Mike
    Do you know how to change the username dynamically ? From login session information or MYSQL ?

  23. Mike // February 21, 2010 3:10:00 PM GMT  

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

  24. Anuj Seth // March 3, 2010 11:29:00 AM GMT  

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

  25. Mike // March 3, 2010 10:43:00 PM GMT  

    Thanks @Anuj :)

  26. jon // March 8, 2010 2:11:00 PM GMT  

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

  27. Mike // March 8, 2010 9:19:00 PM GMT  

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

  28. Ryo // June 15, 2010 12:46:00 PM GMT  

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

  29. Mike // June 15, 2010 11:11:00 PM GMT  

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

  30. Swashata // June 25, 2010 8:06:00 PM GMT  

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

  31. Mike // June 25, 2010 11:18:00 PM GMT  

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

  32. Swashata // June 26, 2010 11:04:00 AM GMT  

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

  33. Yeow // July 21, 2010 7:09:00 PM GMT  

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

  34. Al Kamal Md. Razib // July 22, 2010 11:09:00 AM GMT  

    Great posting ! It's really helpful. Thanks.

  35. GyratoryTech // November 1, 2010 1:44:00 PM GMT  

    Just bookmarked this site. Useful information.

  36. Troy // November 4, 2010 8:41:00 AM GMT  

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

  37. lonelicloud // November 28, 2010 4:58:00 AM GMT  

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

  38. Mike // November 28, 2010 11:31:00 AM GMT  

    @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 :)

  39. lonelicloud // November 28, 2010 5:38:00 PM GMT  

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

  40. Mike // November 28, 2010 9:41:00 PM GMT  

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

  41. Anonymous // December 22, 2010 1:28:00 PM GMT  

    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!

  42. Pankaj Sharma // December 23, 2010 10:46:00 AM GMT  

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

  43. Mike // December 24, 2010 12:31:00 AM GMT  

    @Pankaj,
    Thanks for your feedback :)

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

  44. Irene // April 13, 2011 10:30:00 AM GMT  

    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

  45. Mike // April 13, 2011 9:35:00 PM GMT  

    @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

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