はてなブログ用の人気エントリー表示パーツを真面目に作った

Nancy ではてなブログ用の人気エントリー API を作ってみた - しばやん雑記 で JSON API を作って、このブログのサイドバーに貼り付けていたんですが、もうちょっと機能が必要かなと思ったので貼り付け用 JavaScript コードの整理と API の修正を行いました。

今回、ちょっと修正したコードはこんな感じ。

<script>
    (function (url) {
        $(function () {
            var ul = $("#hatena-bookmark");
            ul.parent().prev().wrapInner("<a href=\"http://b.hatena.ne.jp/entrylist?url=" + url + "&sort=count\"></a>");
 
            $.ajax({
                url: "http://rss2json.azurewebsites.net/hatena/bookmark",
                data: { url: url },
                dataType: "jsonp"
            }).done(function (entries) {
                var list = [];
                $.each(entries, function () {
                    var link = $("<a/>", { href: this.link }).append($("<span/>", { text: this.title }));
                    var count = $("<a/>", { href: "http://b.hatena.ne.jp/entry/" + this.link, text: this.count + "users" });
                    var container = $("<span/>").addClass("bookmark-count").append(this.count > 10 ? $("<strong/>").append(count) : this.count >= 5 ? $("<em/>").append(count) : count);
 
                    list.push($("<li/>").append(link, container));
                });
                ul.append(list);
            });
        });
        document.write("<ul id=\"hatena-bookmark\" class=\"hatena-urllist\"></ul>");
    })("http://your.hatenablog.address/");
</script>

http://your.hatenablog.address/ となっている部分は、はてなブログの URL に置き換えてください。

この JavaScript コードをコピーして、はてなブログのデザイン設定から HTML 形式のサイドバーモジュールを作成して、テキストエリアに貼り付けるだけです。

ちなみに今回のコードを使うと、モジュールのタイトル*1がはてなブックマークへのリンクになります。

あとは API から返却している JSON に image というキーを追加しました。このキーには、はてなブックマークが保持しているエントリ画像への URL が格納されるので、こんな一覧表示もできます。

古いエントリの場合には画像が無い場合があるようですが、その時はデフォルトの画像を入れてあげればいいかなと思います。

現在、このブログと だるろぐ でしか使われてないみたいですが、どうぞご自由にお使いください（震え声

*1:このブログだと「人気記事」となっている部分