調子に乗ってbloggerにhatena_bookmark_anywhere.jsを組み込んでみました

何の事かというと、ブログなどパーマリンクが付くものに対して、はてなブックマークのコメントを一覧表示するためのJavaScriptライブラリです。作者はmasuidriveさん。

このへん参照

ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js

hatana_bookmark_anywhere.jsの設置方法とカスタマイズ

hatana_bookmark_anywhere.jsに重大バグ？ & おまけ

Bloggerの場合、画像ファイル以外はBloggerのサーバに置けない(はず)ので、テンプレートHTMLのHeaderにhatana_bookmark_anywhere.jsと同様のJavaScriptコードを書いておくのですが、

<script type='text/javascript'>

/*<![CDATA[*/

(コピペでhatana_bookmark_anywhere.jsの中のコードを貼る)

/*]]>*/

</script>

のように、CDATAで囲んでおかないと、色々エラーが出てしまいます。

参考

Bloggerでも、はてブのコメントを表示する

あと、Bloggerのデフォルト表示だと最新の数個の記事が表示されますが、このライブラリでは各記事単位でコメントを拾ってくるのではなく、現在のURLに対して拾ってくるので、1ページに複数の記事があるとコメントがちょっと変な事になります。

記事のリンクをクリックして記事を指定すれば問題ないのですが(その方がごちゃごちゃしないで済むという意見もあるでしょうし)、個人的には一覧ページにも記事毎にはてブコメントが欲しかったので、hatana_bookmark_anywhere.jsを改造して複数記事対応版を作りました。

使い方

1.ライブラリの保存

このブログのヘッダー部分の

<!-- start of Hatena bookmark anywhere -->

<script id='hatena_bookmark_anywhere_script_inline_edition' type='text/javascript'>

/*<![CDATA[*/

から

/*]]>*/

</script>

<!-- end of Hatena bookmark anywhere -->

の間のコードを別ファイルに保存する。(改造元hatana_bookmark_anywhere.js見合いの部分です)

2.ライブラリのリンク

以下のようにライブラリをロードする。ファイル名は適当に付けてなー。

<script src="[設置パス]hatena-bookmark-anywhere-each-articles.js" type="text/javascript" charset="utf-8"></script>

※おいらのように、外部にソースを置けない(or 置くのがメンドサ or S3貧乏はゴメン)な人は、scriptタグごとヘッダーに貼っちゃえば良いです。

※このブログのソース参考にしてね

3.はてなブックマークのコメント表示エリアを確保

表示したいところに以下のようなdivタグを置く。

<div class='hatena_bookmark_anywhere' target_url='http://example.com/path/to/yourblog'/>

ここに

• divタグじゃなきゃいやん。ハードコーディングしちゃってるしー。
• classプロパティは 'hatena_bookmark_anywhere'とする。もしコレ以外だったら何もしない。もしクラス名を変えたかったらライブラリの__hatena_bookmark_anywhere_special_class_nameを変更する事。
• target_urlプロパティは該当ブログのパーマネントリンクを入れること。空だったら何もしない。もしイヤンならライブラリの__hatena_bookmark_anywhere_target_url_prop_nameを変更する事。
• idプロパティなんてデザイン要素としては使う必要ないのかもしれないけど、ライブラリの内部で動的にidを付けちゃってるので、指定しても無駄無駄。クラス当てようね。
• なにかと被ったらごめんなさい。
• Firefox2 on MacOSX10.5とsafari3.0 on MacOSX10.5しかテストしてませんです。
• MITライセンスなので改造したものを公開しようと思うんですが、構造を結構変えちゃってるんですよね。しかも、互換性無いし、使い方によっては改造前の方を好む人も居るでしょうし。公開方法はどうしたらいいでしょうか?　googleあたりにリポジトリ作ります?(私はあまりメンテする気もないのですが)>masuidriveさん

もし、Blogger用に使いたければ以下のようにすれば良い。

<div class='hatena_bookmark_anywhere' expr:target_url='data:post.url'/>

※hatana_bookmark_anywhere.jsなのかhatena_bookmark_anywhere.jsなのかイマイチ不明ですが、一応検索キーワード的に両方書いておきます。