Google Feed API实现Feed展示

/ 7评 / 0

在建digboy.com时一直想实现自动读取feed,不用人为的干预,不占用太多的空间,不对原站点造成影响。基于这些原因最后找到了Google Feed API来实现这些功能。

Google Feed API能够单独调用一个,还能一次调用多个feed源,更重要的是他具有独立的css能够让用户自行修改。

  1. <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>&nbsp;</div>
  2. <!-- Google Ajax Api
  3. -->
  4. <script src="http://www.google.com/jsapi?key=申请到的key"
  5. type="text/javascript"></script>
  6. <!-- Dynamic Feed Control and Stylesheet -->
  7. <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
  8. type="text/javascript"></script>
  9. <style type="text/css">
  10. @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
  11. </style>
  12. <script type="text/javascript">
  13. function LoadDynamicFeedControl() {
  14. var feeds = [{title: '午夜', url: 'http://feehiwuye.com/' }];
  15. var options = {
  16. numResults : 10,
  17. displayTime : 3500,
  18. fadeOutTime : 600,
  19. scrollOnFadeOut : true,
  20. pauseOnHover : true,
  21. stacked : false,
  22. horizontal : false,
  23. title : '午夜'
  24. }
  25. new GFdynamicFeedControl(feeds, 'feed-control', options);
  26. }
  27. // Load the feeds API and set the onload callback.
  28. google.load('feeds', '1');
  29. google.setOnLoadCallback(LoadDynamicFeedControl);
  30. </script>

代码下载:本地下载url 演示站点:digboy.comurl

1、参数:

numResults : 10, (展示条目数)
displayTime : 3500, (单个项目展示时间)
fadeOutTime : 600, (渐变消失时间)
scrollOnFadeOut : true, (滚动消失,设置成false的话每个条目将以淡出的方式消失)
pauseOnHover : true, (设置成false的话鼠标经过某个条目不会显示摘要)
stacked : false, (设置成true的话将在同时展示多个feed,false则轮番展示)
horizontal : false, (设置成true的话将以一个一个条目地展示feed,而不是列表形式)

2、申请API Key

注意到模板中的“你的API Key“,要调用Feed API,你需要首先到这里申请API KEY,马上就能生成。

3、CSS修改

默认情况下,FeedAPI调用的是http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css这个CSS样式,如果你想个性化一点,可以下载这个CSS,然后修改成自己喜欢的样式。

注:为了提高速度,我们其实可以把js库和css都下载下来,存放在网站所在的目录,这样就不受空间访问GG的限制。

  1. 莫良说道:

    哈哈,很不错~适合我们这类懒人。

  2. 万戈说道:

    午夜,请教个问题,这个RSS展示我也在用,我是自己定义的CSS,但是加载的时候还是会另外加载那个默认的CSS,请问如何彻底删除这个默认的CSS呢?

  3. bolo说道:

    原来真的可以下载js使用,谢谢了

发表评论

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