skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

はてなブックマーク人気エントリーを「Google Ajax Feed API」を使用して表示

｜ ｜ ｜ ｜ ｜ ｜ ｜

本来外部のXMLを読み込むことができないjavascriptも、Googleが提供するGoogle Ajax Feed APIを利用すれば読み込み可能です。
今回は、日本で一番有名と思われるSBM「はてなブックマーク」の人気エントリーを表示してみます。

使用方法
Sign up for the Google AJAX Feed APIから自分のURLを入力し、APIのKeyを取得します。
取得するといろいろでてきますが、重要なのは以下のAPI Keyです。
＊取得したKeyを以下に挿入してください。
<script type="text/javascript" src="http://www.google.com/jsapi?key=API Key"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("RSSを取得");
feed.setNumEntries(10); //表示件数
feed.load(function(result) {
if (!result.error) {
var ul = document.getElementById("id名");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var li = document.createElement("li");
var img = document.createElement("img");
img.setAttribute('src', "http://b.hatena.ne.jp/entry/image/" + entry.link);
li.appendChild(img);
var link = document.createElement("a");
link.setAttribute('href', entry.link);
link.appendChild(document.createTextNode(entry.title));
li.appendChild(link);
ul.appendChild(li);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
上記を記述し、指定したid名をulに付与し、表示したい場所に記入します。
<ul id="hatena"></ul>
RSSを取得
表示したいはてなブックマークのRSSは以下の手順で取得します。
1. はてなブックマークの右上にある「検索」でURLに印をつけ、読み込みたいドメインを入力します。
2. まず表示されるのは注目エントリーです。そのほかにも新着、人気があります。
　今回は人気エントリーを表示したいので“人気”をクリックします。
3. 人気エントリーが表示されたらRSSをクリックします。
4. ここで表示されたURLをコピーし、scriptの「RSSを取得」にあてはめてください。
　例）www.skuare.netの人気エントリー記事　　　http://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Fwww.skuare.net&sort=count&threshold=3
　　＊skuare.netの部分が変わってくると思います。
はてなブックマーク人気エントリーを「Google Ajax Feed API」を使用して表示サンプル

記事作成：2007年11月05日

前の記事：セレクトボックスを装飾するjavascript「Select Box」
次の記事：吹き出し風のツールチップを作るjavascript「Bubble Tooltips」