指定したサイトのはてなブックマークの人気エントリを表示

広告

指定したサイトのはてなブックマークのフィードを取得し、エントリを人気順に並べて表示するサンプルを作成します。

1.はてなブックマークのRSSフィード
2.ブックマーク数を画像で取得
3.サンプル

はてなブックマークのRSSフィード

「はてなブックマーク」に関する情報は下記に記載されています。

p1-1

ただし「はてなブックマーク」のRSSフィードに関する情報は下記の方にしか見つけられませんでした。

p1-2

はてなブックマークのエントリの一覧をフィードとして取得するには次のURLを使用します。 

http://b.hatena.ne.jp/entrylist?mode=rss

特定のサイトURLに限定する場合は「url」パラメータを使ってURLを指定します。 

http://b.hatena.ne.jp/entrylist?mode=rss&url=http://www.example.com/

並び順を指定するには「sort」パラメータを使います。人気順に並べるには「count」を、新着順に並べるには「eid」を指定します。 

http://b.hatena.ne.jp/entrylist?mode=rss&url=http://www.example.com/&sort=count

このフィードのURLに対してGoogle AJAX Feed APIを使いエントリを取得します。 

var feedurl = "http://b.hatena.ne.jp/entrylist?mode=rss&url=http://www.example.com/&sort=count";

var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(8);
feed.load(function (result){
  /* ... */
});

今回は取得するエントリ数を8に設定しています。

ブックマーク数を画像で取得

はてなではエントリ毎のブックマーク数を画像で取得するAPIを提供しています。

p1-3

書式は次の通りです。 

http://b.hatena.ne.jp/entry/image/エントリーのURL

エントリのURLは「entry.link」プロパティの値として取得できますのでエントリ毎にブックマーク数を画像として取得することが出来ます。詳しい設定方法はサンプルプログラムを見てください。

サンプル

それでは簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Google AJAX Feed API テスト</title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/script1_1.js"></script>

</head>
<body>

<p>Google AJAX Feed API テスト</p>
<div id="feed"></div>

</body>
</html>

google.load("feeds", "1");

function initialize() {
  var feedurl = "http://b.hatena.ne.jp/entrylist?mode=rss&url=http://cookpad.com/&sort=count";
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(8);

  feed.load(function (result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";
      htmlstr += "<p>[タイトル]" + result.feed.title + "</p>";

      htmlstr += "<ul>";
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];

        htmlstr += "<li>"
        htmlstr += '<a href="' + entry.link + '">' + entry.title + '</a> ';
        htmlstr += '<img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '" />';
        htmlstr += "</li>"
      }
      htmlstr += "</ul>";

      container.innerHTML = htmlstr;
    }else{
      alert(result.error.code + ":" + result.error.message);
    }
  });
}

google.setOnLoadCallback(initialize);

上記を実際にブラウザ見てみると次のように表示されます。

p1-4

今回は例としてクックパッドさんのサイトでブックマーク数が多いエントリを順に表示してみました。

( Written by Tatsuo Ikura )