2006年08月25日

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


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
・ 初版

* 関連記事
ブログにはてブのコメントを組み込む その1
ブログにはてブのコメントを組み込む その2
posted by suVene at 13:59