Google AJAX Feed API でブログの人気エントリーを表示するサンプル
Google からまた新しいAPIがリリースされました。今回は、指定したフィードを取得してJSONやXML形式で結果を返してくれる、 Google AJAX Feed API です。
Google AJAX Search API Blog: Announcing the Google AJAX Feed API
対象がフィードのみなので、 Google AJAX Search API よりもシンプルです。
早速サイトにあったサンプルコードを参考にして、このブログの人気エントリーを表示するサンプルを作成してみました。
ソースは以下のようになっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API でブログの人気エントリーを表示するサンプル</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAsLXCLqvsRiiJaBCS-_mMcRTJHeJbbL2-eEcwuol3A-ymf21LmBSnUkKoAtst8QPp2Oi9KJYLcbZVew"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Fblog.fkoji.com%2F&sort=count&threshold=5&include_news=1");
feed.setNumEntries(15);
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 div = document.createElement("div");
var a = document.createElement("a");
a.href = entry.link;
a.appendChild(document.createTextNode(entry.title));
div.appendChild(a);
var img = document.createElement("img");
img.src = "http://b.hatena.ne.jp/entry/image/" + entry.link;
with(img.style) {
verticalAlign = "middle";
marginLeft = "4px";
}
div.appendChild(img);
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
詳しいリファレンスは以下のページにあります。
Google AJAX Feed API – Class Reference
著者について
コメントを残す