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

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

使用方法
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」を使用して表示サンプル

sponsors

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

記事作成:
記事URL:

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