マスタカの ChangeLog メモ

■ はてなブックマークのコメントを、アイテム毎のページに表示させた [chalow][Twitter]

このブログにはコメント欄があるので、時々コメントを残してもらえるの
ですが、はてなブックマーク(以下、はてブ)にも良いコメントがあります。

そこで、アイテム毎のページにはてブのコメントを表示させました。今の
ところ、一番多いのは [2009-10-04-1] の 509 です。この時は一日で
10,000 アクセスもありました。(普段は 100 アクセス程度です。)

以下、設置手順です。

1. 「ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js」
から、hatena_bookmark_anywhere.js をダウンロードし、
http://masutaka.net/chalow/ に置きました。

2. アイテムページのテンプレート $item_page_template に、以下を追加
しました。

<!-- hatena_bookmark_anywhere.js -->
<script type= "text/javascript">/*<![CDATA[*/
var hatena_bookmark_anywhere_style = false; // trueでデフォルトスタイル falseを設定するとCSSでスタイルの指定が可能
// var hatena_bookmark_anywhere_limit = 10; // 表示する件数
// var hatena_bookmark_anywhere_collapse; // trueにすると、コメントの書いてないブクマを表示しない。指定しない場合は、表示件数を超えた場合のみコメントを表示しない
// var hatena_bookmark_anywhere_url; // 表示するURL 未指定の場合、現在のページ
/*]]>*/</script>
<script src="hatena-bookmark-anywhere.js" type="text/javascript" charset="utf-8"></script>
<div id="hatena_bookmark_anywhere"></div>
<!--/ hatena_bookmark_anywhere.js -->

3. 「hatana_bookmark_anywhere.jsの設置方法とカスタマイズ」を参考に
しながら、現在使っている kaeru.css に合うように、kaeru.css から
import している clfix.css に CSS を追加しました。

4. デザインがこのサイトに合うように、hatena_bookmark_anywhere.js を
修正しました。また、より高速な /entry/jsonlite/ エンドポイントを使
うようにも修正しました。(参考情報: はてなブックマークエントリー情報取得API)

--- hatena-bookmark-anywhere-0-1.js	2009-11-22 00:07:27.000000000 +0900
+++ hatena-bookmark-anywhere.js	2009-11-22 11:22:05.000000000 +0900
@@ -57,16 +57,19 @@
 	}

 	if(json==null) {
-	    html += "このエントリーのはてなブックマーク (0) <a class=\"hatena_bookmark_anywhere_go\" href=\"http://b.hatena.ne.jp/entry/"+escapeHTML(hatena_bookmark_anywhere_url)+"\">はてなブックマークのページへ飛ぶ</a><br/>";
+	    html += "<div class=\"hatena_bookmark_anywhere_caption\">";
+	    html += "このエントリのはてなブックマーク (0) <a class=\"hatena_bookmark_anywhere_go\" href=\"http://b.hatena.ne.jp/entry/"+escapeHTML(hatena_bookmark_anywhere_url)+"\">はてなブックマークのページへ飛ぶ</a><br/>";
+	    html += "</div>";
 	    html += "<div class=\"hatena_bookmark_anywhere_zero\">";
-	    html += "このページはまだブックマークされていません。";
 	    html += "</div>";
 	}
 	else {
 	    if((typeof hatena_bookmark_anywhere_limit)!="number") hatena_bookmark_anywhere_limit = 100;
 	    if((typeof hatena_bookmark_anywhere_collapse)=="undefined" && json.bookmarks.length>hatena_bookmark_anywhere_limit) hatena_bookmark_anywhere_collapse = true;

-	    html += "このエントリーのはてなブックマーク ("+json.count+") <a class=\"hatena_bookmark_anywhere_go\" href=\"http://b.hatena.ne.jp/entry/"+escapeHTML(hatena_bookmark_anywhere_url)+"\">はてなブックマークのページへ飛ぶ</a><br/>";
+	    html += "<div class=\"hatena_bookmark_anywhere_caption\">";
+	    html += "このエントリのはてなブックマーク ("+json.count+") <a class=\"hatena_bookmark_anywhere_go\" href=\"http://b.hatena.ne.jp/entry/"+escapeHTML(hatena_bookmark_anywhere_url)+"\">はてなブックマークのページへ飛ぶ</a><br/>";
+	    html += "</div>";
 	    html += "<ul id=\"bookmarked_user\">";
 	    for(var i=0; i<json.bookmarks.length&&hatena_bookmark_anywhere_limit>0; ++i) {
 		var bookmark = json.bookmarks[i];
@@ -96,7 +99,7 @@
 	    var script = document.createElement("script");
 	    script.setAttribute("type","text/javascript");
 	    if((typeof hatena_bookmark_anywhere_url)=="undefined") hatena_bookmark_anywhere_url = location.href.replace(/#.*/,"");
-	    script.setAttribute("src","http://b.hatena.ne.jp/entry/json/?url="+hatena_bookmark_anywhere_url+"&callback=__hatena_bookmark_anywhere_receiver");
+	    script.setAttribute("src","http://b.hatena.ne.jp/entry/jsonlite/?url="+hatena_bookmark_anywhere_url+"&callback=__hatena_bookmark_anywhere_receiver");
 	    document.body.appendChild(script);
 	}
     } catch(e) { }

ついでにサイドバーに「このブログのはてなブックマーク数」を追加しま
した。ほとんどが [2009-10-04-1] の記事ですねえ。^^;

あと、「[を] はてなブックマークによる自blogの注目記事リスト」を参考
にしながら、サイドバーにはてブの新着エントリーや、人気エントリーを
表示させようとしましたが、さくらで kuttuki-rss.pl を実行すると以下
のエラーが発生したので、今回は見送りました。

Use of uninitialized value in string eq at /usr/local/lib/perl5/site_perl/5.8.9/XML/RSS.pm line 934, <DATA> line 855.
Use of uninitialized value in string eq at /usr/local/lib/perl5/site_perl/5.8.9/XML/RSS.pm line 934, <DATA> line 855.
not well-formed (invalid token) at line 128, column 63, byte 7672 at /usr/local/lib/perl5/site_perl/5.8.9/mach/XML/Parser.pm line 187

さらにさらに「MOONGIFT のこの記事」を参考にしながら、Twitter のつぶ
やきを各ページに表示させようとしましたが、うまく表示出来なかったの
で諦めました。Twitter が TinyURL を捨てて、bit.ly を採用したからな
のかもしれません。twitterer anywhere の開発は止まっているようです。

悔しいので、サイドバーに「このブログに関するつぶやき」のリンクを貼
りました。

追記(2009-11-22):
現在は、より高速な /entry/jsonlite/ エンドポイントが使えるので、4
のパッチを修正しました。コメントは日付の昇順にしたいなあ。