Goolge Buzz Widget使用方法

这是一个为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/>。转载请保留此信息及相应链接。

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>