みなみさんが静的ページに WordPress の新着記事一覧を表示する方法を急募していた。
これを実現するために JavaScript で RSS フィードを取得して表示する方法を調べたので、自分用にメモ。
使用するのは Google AJAX Feed API。
Google AJAX Feed API を使用するには、APIキーが必要。
Google Map を利用する際に取得した API キーがあれば使えるが、無ければGoogle AJAX Feed API への登録をしておこう。
まずは、Google API のロード。
<head>内に以下の記述を追加して、Google API をロードしよう。
※ YOUR_KEY_HERE には取得しておいたGoogle AJX Feed API のキーをセットする。
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
次に実際にRSSフィードの内容を表示するための JavaScript。こんな感じ。
google.load("feeds", "1");
google.setOnLoadCallback(function() {
var feed = new google.feeds.Feed("http://example.com/feed");
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var ul = document.createElement("ul");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var li = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("title", entry.title);
a.setAttribute("href", entry.link);
a.appendChild(document.createTextNode(entry.title));
li.appendChild(a);
ul.appendChild(li);
}
var container = document.getElementById("archives");
container.appendChild(ul);
}
});
});
３行目の http://example.com/feed は、読み込みたいRSSフィードのURL。
４行目の feed.setNumEntries(5); は、デフォルトでは4件しか取得しないため、5件取得するためには feed.setNumEntries() に数値をセットしましょう。
これで、id="archives" な要素の子要素として、RSSフィード一覧がセットされている <ul> 要素が追加表示されます。
2009年12月19日 土曜日 9:58 PM
ぶくま→ Google AJAX Feed API : dogmap.jp http://bit.ly/abmHTp
WordPressでRSS
wordpress