Noob's Space

[JavaScript]使用Google Ajax API 在網頁上顯示RSS的內容

各位有在關注本站的一定知道,本站的首頁有一個最新文章,那是透過RSS去抓取的。今天要介紹的,就是利用Google的Ajax API來實現這個RSS。

首先,請先到Google Code取得自己的API Key。然後你可以在Google取得下面這個範例(記得把API Key換成自己的)。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
    <script type="text/javascript">  

    google.load("feeds", "1");  

    function initialize() {
     把內容貼在這裡
    }
    google.setOnLoadCallback(initialize);  

    </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>

先引用Google Ajax API,再把適當的內容貼進去。

要貼的內容如下,只要更改自己的RSS網址即可。如果要更改輸出的樣式,可以在head插入CSS或是在div.innerHTML那裏修改。

var feed = new google.feeds.Feed("http://feeds.feedburner.com/noobsspace");
feed.load(function(result) {
  if (!result.error) {
    var container = document.getElementById("feed");
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var attributes = ["title", "link", "publishedDate", "contentSnippet"];
	  document.write('a')
	   var div = document.createElement("div");
        div.innerHTML = '<a href=' +  entry[attributes[1]] + '>' + entry[attributes[0]] + '</a>';
        container.appendChild(div);
    }
  }
});

基本上是這樣了,有興趣的玩家可以在修改樣式,讓他變得更不一樣。打完收工。

你可能會有興趣......?

廣告