Google AJAX Feed APIではてなブックマークの人気エントリーを表示

この度若干リニューアルして、フッターにはてなブックマークの人気エントリーを10件表示しました。今回はその表示方法を1つ紹介します。ブログパーツもあるけどデザインがちょっと、、という方はぜひご活用ください。
まず、自分のサイトやブログの人気エントリーを確認します。このブログ(http://weboook.blog22.fc2.com/)の場合は以下のアドレスになります。 で、このページの下のほうにRSSフィードがあります。
hatena4-29.png
このRSSフィードを表示させると人気エントリー一覧となります。表示の方法はphpやJavaScriptになると思いますが、このブログはFC2ブログを使ってるので今回はGoogle AJAX Feed APIを使ってみます。
<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("http://b.hatena.ne.jp/entrylist?sort=count&url=http%3A%2F%2Fweboook.blog22.fc2.com%2F&mode=rss");
    feed.setNumEntries(10);
    feed.load(function(result) {
      if (!result.error) {
        var container = document.getElementById("feed-hatena");
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          var div = document.createElement("li");
          var a = document.createElement("a");
          a.href = entry.link;
          var date = new Date(entry.publishedDate);
          a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ") " ));
          var hatena = document.createElement('img');
          var hatenaUrl = "http://b.hatena.ne.jp/entry/image/"+ entry.link;
          hatena.setAttribute("src", hatenaUrl);
          a.appendChild(hatena);
          div.appendChild(a);
          container.appendChild(div);
          }
        }
    });
  }
  google.setOnLoadCallback(initialize);
</script>

<div id="feed-hatena"></div>

このようにするとフッターにあるような人気エントリー10件が日付とブックマーク数と一緒に表示されます。

ここからは少し中身を説明します。
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPI-key"></script>
<script type="text/javascript">
まず最初のJavaScriptですがAPI-keyはGoogle AJAX Feed API への登録して取得してください。
feed.setNumEntries(10);
ここの数字で表示するエントリー数を指定します。フィードは30件ですので30件まで表示することができます。
var date = new Date(entry.publishedDate);
  a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ") " ));
これでタイトルと日付を表示しています。日付がいらない場合は以下のコードに差し替えます。
 a.appendChild(document.createTextNode(entry.title));
次にブックマーク数を表示します。表示したくない場合はすべて削除してやってください。
var hatena = document.createElement('img');
var hatenaUrl = "http://b.hatena.ne.jp/entry/image/"+ entry.link;
hatena.setAttribute("src", hatenaUrl);
a.appendChild(hatena);
最後に表示したい場所に以下のコードを挿入します。
<div id="feed-hatena"></div>

idは自由に変更できますが当然JavaScriptで事前に指定したものと同じにしないといけません。

以上になります。ぜひご活用ください。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
とても参考になりました。ありがとうございました。
当ブログにも設置してみました。
【2009/06/20 12:02】 | Hiro #TY.N/4k. | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加