ブログに はてブのコメントを組み込む その１

注)最新の情報はインポートはてブスクリプト(設置方法と注意点)を参照。

ソーシャルブックマークサービス(以下SBM)についての話題が盛んになってきた。
で、その話題について語りたいとは思うが、それはとりあえず置いておいて、今日はSBMの大御所であるハテナブックマークサービスでつけられたコメント欄をblogに取り込もうって話。
動機としては、たまに ekkenさんという Hatenaの人がコメントをつけてくれたりするのだが、どうも本物かどうか分からない。だから、最初は Hatenaの認証API を使ってコメント欄を制御しようとした。
けれども、blogのコメントpost時にチェックと認証をハンドルするのは、結構厄介な事に気づき今回は断念。
ならば、既に認証を終えてコメントしてあるものを取り込めばよいではないか、というのが発端だ。しかも、この方法ならば他の人のコメントも同時に取り込めるという一石二鳥の方法だ！！！！(基本的にブクマされないというのは置いといて)

つーわけで、完全なブログパーツにしてもいいかなと思ったけど、とりあえず自分用なので適当にゴリゴリと作ってみた。
中身のごちゃごちゃした説明は後にして、とりあえず設置方法を紹介。

前提条件
(1) scriptを含むタグを利用できる事
または
(2) ブログデザインのテンプレートHTMLが編集できる事

こんだけ。(だと思う)
まだ作りかけなので、デザイン等は全然整えてないが、こんなイメージ。

デザインどころか、日付すらもフォーマットしてないんだけどｗ

2007/10/10 これ作った後(2006/09/21)に、
はてなブックマークコメントその場で表示ライブラリとは – はてなダイアリー
が発表されたので公開終了
んで、組み込み方の説明
(A) scriptを含むタグを直接埋め込む場合
　(1) hatebu_comment-1.0.0.jsを保存し、適当な場所へアップロードする。(スクリプト触らないなら、直接リンク可)
　(人柱最新バージョンは hatebu_comment.js)
　(2) アップロードしたスクリプト読み込みタグをつける。

<script type="text/javascript" charset="utf-8"
src="http://fugafuga.com/hatebu_comment-1.0.0.js">
</script>
(srcは(1)でアップロードした場所)

　(3) コメントを表示したい場所に以下のタグをつける。

<div id="hatebuComment" url="http://fugafuga.com/permalink" ></div>
(urlはその記事のパーマリンク)

(B) ブログデザインのテンプレートを編集する場合
基本的には、(A)と同じ。毎回するのは面倒なので、テンプレに書いておこうって事。テンプレートの話はハテナの自分のブログに被ブックマーク数を表示するに詳しく載ってる。
俺は、サクラサーバのおまけブログみたいなの使ってるから、他のブログサービスがどうなってるかよく知らないんだけれども、テンプレートを編集できるはず？サクラは Seasaaブログと同じなので、Seasaaならば、管理画面の「デザイン」→「コンテンツ」→「記事」を選択すると「コンテンツHTML編集」ってリンクがあるんだけど、その辺。とりあえずテンプレート。

以上で終わり何だけれども、今はとりあえずしょぼいｗ
とりあえずって事なので、残る課題をあげる。

やりたい事
・ Mozila系エンジンでたぶん動かないので動くように！
・ とりあえず見た目を綺麗に！
・ 100を超えるブクマとかダラダラと表示されるので、件数制限とか！
・ 実装リファクタリング！
・ ライブドアのクリップサービスが結構キテルので、それも表示できるようにするか！？
・ 無意味にAjax化！

などなど。上から順に優先度が高い。
この辺をこなしつつ、実装に関する話とか書こうかなって感じで続く(と、思う)。

注)今回用意している js は drk7.jpさんの「XML を JSON に変換するサービス」を利用しているので、ブクマしてからコメントが表示されるまでにタイムラグがあるのはキャッシュによる仕様です。

* 関連記事
ブログにはてブのコメントを組み込む その２
インポートはてブスクリプト(設置方法と注意点)