这是一个为Google Buzz准备的jQuery小工具，你可以用它来将你的buzz同步到任何页面中，比如你博客上的某个页面或者边栏上。它可以用来通过Google Buzz将你的Twitter更新同步显示到自己的网站上让国内可以访问而不需要顾虑防火墙（目前是这样）。本文介绍一下基本的使用方法。

在前一篇文章将Buzz输出整合进网页：Google Buzz Widget中向大家简单介绍了Google Buzz并说明可以将它同步到自己的网站上，使用它来显示你的Twitter状态。我也是刚刚才布置好，你可以看看我在本站上的Buzz页面。只是目前CSS还没有重新编写，效果比较囧。

当然你也可以先看看该jQuery插件作者提供的两个简单示例，我就用的是他的CSS：

示例1：滚动三栏式 | 示例2：固定列表式

示例1：滚动三栏式¶

在这个示例中，该小工具将返回的buzz消息每次3个，循环播放。下面是实现方法：

1. 将jQuery和插件javascript文件包含在页面中；
2. 使用CSS类“google-buzz”创建一个 div 元素；
3. 将小工具的设置选项（使用半角逗号分隔的数组）使用“options”属性置于 div 元素中。

例如：

<div options="{
 username:'haoxian.zeng'
 ,n:9
 ,show_n:3
 ,animate:'height'
}">loading..</div>

从上面的例子可以看出：

“username”是一个必须的选项，就是显示在你的Google个人资料页面地址（URL）中的你的Google账户名。

“n” 是返回的buzz消息数目，这里设置为9。

“show_n” 是每次显示的buzz消息数目，这里设置为3。

“animate” 定义了动画样式，这里使用 “height”（高度）替代了默认的模糊动画效果。

示例2：固定列表式¶

该示例使用一个典型的Javascript调用，创建了一个没有任何过渡效果的buzz消息固定列表。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/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:'haoxian.zeng'
 ,n:8
 ,show_n:0
 });
 });
</script>

<div>loading..</div>

这里改变了一个参数，“show_n”被设置为0，这样就禁止了任何过渡效果（所以也就不需要“animate”参数了）。

特色功能¶

• 两种方式显示buzz：带过渡效果的工具栏形式或者固定的列表形式。
• 多个过渡效果选项：模糊、高度、字体大小。
• buzz的某些部分，如链接、日期，拥有可供自定义的CSS类。
• 显示/隐藏buzz的某些部分，如日期、来源。
• 使用典型的JS调用或者自动加载的 DIV 元素（CSS类“google-buzz”）。
• 添加小写的“i”字母以链接到该jQuery插件页面。你可以通过设置（info）参数为空字符串（”）来删除该标识。不过，建议在别的地方增加一个链接指向插件页面以感谢作者的辛勤劳动。
• 默认情况下，该小工具显示buzz的摘要模式。该模式比较适合于小块固定的显示单元（比如网站的边栏，可以放在WordPress中的边栏文本小工具里）。你也可以选择显示buzz的完整内容（需要修改参数）。

一些说明¶

• CSS代码是必须的，但是插件作者提供的示例中并没有关注这个。如果想让你的页面显示的更炫，你可以根据上面的示例中使用的 JS 和 CSS 代码来重新编写样式。
• Buzz摘要模式（最大120个字符）与 Twitter 的短状态消息配合很好。使用这个工具，可以将你的Twitter更新同步到自己的网页，国内用户也可以查看。目前不受防火墙限制。
• 上面的示例中调用 javascript 文件是从 Google 的服务器上直接下载的。如果Google的相关服务器被封，就会导致无法正常工作。目前没问题，不代表永远没问题。如果出问题了，可以将相关js代码文件下载并上传到自己的服务器，然后将上面例子中的相关代码中的url地址改成该文件在你自己服务器上的地址即可。
• 在 WordPress 中，如果使用了将 JavaScript 移到页尾加载的插件，可能会导致文中提到的插件无法工作，此时请参考优化WordPress中JavaScript加载位置来解决。
• 2010.12.05 可以将文中的 jQuery 升级为任何最新版本。目前升级到 1.4.4 版。

相关链接¶

项目网站 | 选项说明 | 下载插件js代码 | 示例 1 | 示例 2 | 我的Buzz

如果你希望进一步了解该工具的工作原理，可以阅读作者的另一篇文章：http://aext.net/2010/02/pull-google-buzz-with-jquery/

本文翻译和改写自：http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html （需要番羽土啬查看，工具和方法请参考“匿名 & 隐私”。）©

本文发表于水景一页。永久链接：<http://cnzhx.net/blog/usage-of-goolge-buzz-widget/>。转载请保留此信息及相应链接。