利用Google Feed API即时展示其它博客的Feed
去年我曾经介绍过在一个博客即时调用其它博客的RSS Feed的方法-利用Google Reader。这种方法的好处是你不需要知道任何技术细节，你只需要添加订阅到GR，制作一个Tag，然后设置成公开，最后调用。然而这种简单的方法有个不好的地方，一是在调用列表的底部会有个多余的Read More链接，另外无法预览文章摘要。利用Google Feed API可以很好地解决这个问题。
上图的Feed调用同时出现在可能吧右侧栏的底部。
除了可以单独调用一个Feed，还可以同时调用多个，如下图所示：
如何利用Google AJAX Feed API实现这个调用呢？
如果你对代码有恐惧感，不用害怕，放心看下去，你会发现即使你和我一样是代码白痴都能很好地使用Feed API。
下面一个最简单的Feed调用代码：
- <div id="feed-control"><span style="padding-right: 4px; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 10px; color: #676767; padding-top: 4px">正在加载...</span> </div>
- <!-- Google Ajax Api
- --><script src="http://www.google.com/jsapi?key=你的API KEY"
- type="text/javascript"></script><!-- Dynamic Feed Control and Stylesheet --><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
- type="text/javascript"></script>
- <p><style type="text/css">
- @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
- </style></p>
- <script type="text/javascript">
- function LoadDynamicFeedControl() {
- var feeds = [{title: '可能吧', url: 'http://feeds.kenengba.com/kenengbarss' }];
- var options = {
- numResults : 8,
- displayTime : 2000,
- fadeOutTime : 500,
- scrollOnFadeOut : true,
- pauseOnHover : true,
- stacked : false,
- horizontal : false,
- title : '可能吧'
- }
- new GFdynamicFeedControl(feeds, 'feed-control', options);
- }
- // Load the feeds API and set the onload callback.
- google.load('feeds', '1');
- google.setOnLoadCallback(LoadDynamicFeedControl);
- </script>
将上面的模板稍作修改，就能在博客上调用其它博客的Feed。
哪些参数可以修改呢？
1、要调用的Feed
将要调用的Feed（一个或多个）写入到"var feeds"里头，格式如{title: '可能吧', url: 'http://feeds.kenengba.com/kenengbarss' }要，调用多个Feed，中间用逗号分割。
2、常用参数：
numResults : 8, （展示条目数，这里用8）
displayTime : 2000, （单个项目展示时间，这里用2000毫秒）
fadeOutTime : 500, （渐变消失时间，这里用500毫秒）
scrollOnFadeOut : true, （滚动消失，设置成false的话每个条目将以淡出的方式消失）
pauseOnHover : true, （设置成false的话鼠标经过某个条目不会显示摘要）
stacked : false, （设置成true的话将在同时展示多个feed，false则轮番展示）
horizontal : false, （设置成true的话将以一个一个条目地展示feed，而不是列表形式）
title : '可能吧' （标题）
每个参数之间用逗号分割。更多高级参数可以参考Google的帮助文档。
3、申请API Key
注意到模板中的“你的API Key“，要调用Feed API，你需要首先到这里申请API KEY，马上就能生成。
4、CSS修改
大多数情况下你不需要去修改CSS，除非你是个特别喜欢自定义的人。
默认情况下，FeedAPI调用的是http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css这个CSS样式，如果你想个性化一点，可以下载这个CSS，然后修改成自己喜欢的样式。
然后在将新的CSS添加到模板里。
5、加入到博客
将修改好的整块代码放入到你想展示的位置，就像可能吧的右侧栏。
6、抓取频率
Google AJAX Feed API对feed的抓取大概是1小时一次。更新量大的博客抓取频率会相应提高。
7、遇到的问题
如果不修改CSS，在IE7下Feed API显示正常， 但在Firefox 2下不能调用CSS，也就是第三点中提到的默认CSS。我不知道这是不是我个人遇到的问题。
要解决这个问题很简单，将默认的CSS下载，然后将里面的内容复制到模板中，替换：
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
即可。
8、其它用途
1、展示最新留言（Wordpress提供最新评论的RSS输出）。
2、模拟Friend Feed。Friend Feed也是将所有RSS合并在一起，利用Google AJAX Feed API，你完全可以实现Firend Feed所能实现的功能。
最后，希望我的表述你能完全理解。
| 收藏或分享这篇文章到网摘： |
Tags: API, google, RSS, 技巧 and 编程
除非注明，本博客文章均为原创，转载请以链接形式标明本文地址
本文地址：http://www.kenengba.com/post/460.html
Trackback地址：http://www.kenengba.com/post/460.html/trackback
22 条评论 关于 “利用Google Feed API即时展示其它博客的Feed”
难得的沙发，先顶后看
[回复此评论]
沙发没了，板凳也行。顶了再慢慢去看代码。
[回复此评论]
这篇文章很喜欢，谢谢了
[回复此评论]
JS的API,理论上实现了不管哪个页面都能调用feed,太赞了
对于google reader share, 那个more可以用CSS隐藏掉的:)
i love google
[回复此评论]
我倒不需要这样的滚动显示效果，我在用gr里面的tag输出，read more 也拿掉了，可是我需要一个新窗口打开。。。
[回复此评论]
这个功能我还真的很喜欢诶~~
马上去试用~~
[回复此评论]
这个有点像是RSS 订阅的功能一样！
[回复此评论]
Javascript调用的不好，对搜索引擎不友好。
[回复此评论]
偶是被YD吸引进来的 呵呵 弱弱地飘过~~~~~
[回复此评论]
呵呵，这个不错。
话说我在gr这么漏看了这篇文章呢？
[回复此评论]
其实有个问题的，就是还是会延迟。
[回复此评论]
呵呵，原来如此。
[回复此评论]
不错学习了吗
[回复此评论]
哈哈,又学会一招
[回复此评论]
请问一下调用多个feed的代码具体怎么写啊，我怎么老做不成功呢？
[回复此评论]