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

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

sponsors

使用方法

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の部分が変わってくると思います。

サンプル

Javascriptサンプルページ一覧
skuare.net

sponsors