インポートはてブスクリプト(設置方法と注意点)

2007/10/10 これ作った後(2006/09/21)に、
はてなブックマークコメントその場で表示ライブラリとは – はてなダイアリー
が発表されたので公開終了
最新 version permalink hatebu_comment.js
ver. 1.2.1 2006/08/27 hatebu_comment-1.2.1.js
ver. 1.2.0 2006/08/24 hatebu_comment-1.2.0.js
ver. 1.1.0 2006/08/23 hatebu_comment-1.1.0.js
ver. 1.0.0 2006/08/22 hatebu_comment-1.0.0.js

デフォルトCSS hatebu_comment.css

* 設置方法
(1) Javascriptインポート

<script type="text/javascript" charset="utf-8"
src="http://hogehoge.com/hatebu_comment.js">
</script>

(特にスクリプト触らないなら直接リンク可)
例) Seasaaブログのテンプレートの場合

…
<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %>
</div>
</div>
<div id="hatebuComment" url="<% article.page_url %>" img="normal"></div>
</div>
…

参考) Hatena – 自分のブログに被ブックマーク数を表示する

(2) コメント表示位置にタグ挿入

<div id="hatebuComment"
url="http://hogehoge.com/permalink"
title="Hatena Bookmark"
img="normal"
proxy="http://hogehoge.com/xml2json.cgi?"></div>

(必須      )url   ･･･ ブクマ対象URL(必須)
(オプション)title ･･･ コメント表示タイトル
(オプション)img   ･･･ small/nomarl/large
(オプション)proxy ･･･ XML→JSON変換のCGI

(3) CSS設定
デフォルトCSS hatebu_comment.css を

<style type="text/css"
@import "http://zeromemory.info/hatena/css/hatebu_comment.css";
</style>

とインポートするか、独自にスタイルシートを設定。

* 注意点
・うちのブログがShift-JISなので、スクリプトの文字コードはShift-JISになってるから、UTF-8のブログだと、文字コード変換して利用しないと化けると思う。
追記: 2006/08/27 00:30 javascriptファイルを utf-8 に変換しちゃたので、スクリプトインポートする時に charset=”utf-8″ って指定してください！
・ HatenaのExistAPI使ってるんだけど、不安定で困る。
　　(例)http://d.hatena.ne.jp/exist?mode=xml&url=http://www.yahoo.co.jp/(よく死んでる)
　　⇒ 1.2.1から ExistAPI使用しないようにしたから関係なし。
・ Drk7jpさんとこのサービスはありがたいけれども、キャッシュが長すぎるのと、FEED取得に失敗したときにやな感じでデータが帰ってくる。(スクリプトとして取り込めないので困る。ToT)
　　⇒ とりあえず、うちのサーバに XML2JSON の CGI 作ってデフォルトにしたけれども、負荷かかりすぎるとやめるかも！そもそもキャッシュ実装してない！

* 更新履歴
ver. 1.2.1 2006/08/27
・デフォルトProxyの場合、ExistAPIを呼ばないように修正。
・ B!のhref修正と画像参照先追加。thanks Hamachichan!
ver. 1.2.0 2006/08/24
・実装大幅リファクタリング(MVCっぽくと、あとでプラグインするための機構追加)
・コメントのないブクマを「All⇔Filter」で表示切替。(デフォルト非表示)
ver. 1.1.0 2006/08/23
・ Mozila対応
・ proxy変更対応
・見た目整形
ver. 1.0.0 2006/08/22
・初版