2个google ajax feed api 实例


这两天在学着美化自己的mediawiki,由于总感觉首页很单调,于是想在上面放个实时更新的界面,使得wiki首页看上去总有更新.主要是最新词条的信息和最近修改的信息.

由于知识有限,主要是去网上找些工具和代码,发现了google ajax feed api这样个好东西.其中的AJAX Dynamic Feed Control可以直接在网页中调用.

简单介绍2个实例,具体可以去google上看看.以下代码开头中的key=notsupplied-wizard这段在实际使用中请改成具体的google API key.

1.第一个比较简洁,列出RSS的标题和简洁,可以添加多个RSS. 效果见这.

<script type="text/javascript" src="http://www.google.com/jsapi?key=notsupplied-wizard"></script> 
<script type="text/javascript"> 
google.load("feeds", "1"); 
function initialize() { 
var feedControl = new google.feeds.FeedControl(); 
feedControl.addFeed("http://feed.feedsky.com/molezz", "molezz BAR"); 
feedControl.addFeed("http://feed.feedsky.com/molezz", "molezz BAR2"); 
feedControl.draw(document.getElementById("feedControl")); 
} 
google.setOnLoadCallback(initialize); 
</script> 
<div id="feedControl">Loading</div>

2.第二个比较花哨,有动态效果,也可以添加多个RSS,效果见这.

<div id="feed-control">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>
 
  <!-- Google Ajax Api
  -->
  <script src="http://www.google.com/jsapi?key=ABQIAAAAYyAcC_2-AB_-d2frcEenJhT_l7btg2vey3SF4xrWe8eMrDUaihT1d3ADiu199b_6prRFCyRUi-QoAQ"
    type="text/javascript"></script>
 
  <!-- Dynamic Feed Control and Stylesheet -->
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
  </style>
 
  <script type="text/javascript">
    function LoadDynamicFeedControl() {
      var feeds = [
	{title: 'molezz BAR',
	 url: 'http://feed.feedsky.com/molezz'
	},
	{title: 'molezz BAR 2',
	 url: 'http://feed.feedsky.com/molezz'
	}];
      var options = {
        stacked : true,
        horizontal : false,
        title : "Google feed api实例2"
      }
 
      new GFdynamicFeedControl(feeds, 'feed-control', options);
    }
    // Load the feeds API and set the onload callback.
    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>

更多设置参数详见google文档.另外这个实例中的外观也可以自己写css进行替换.