おかげさまでご好評頂いている「hatana_bookmark_anywhere.js」に、ものすごいバグがあることが分かりました。

　数人に指摘されるまで全然気がつかなかったのですが、アプリ名を声を出して読むと「はたな　ぶっくーま。。。」orz

　ごめんなさい、素で間違ってました。もう変えるのもなんなので、このまま行きます。
もしバージョンアップすることがあったら、そのときはちゃんとします。
しかし、なんでこんな間違えしたんだろうなぁ。。。。

　これだけのエントリっていうのも、なんなので、最近貼っているCreative CommonsのFlickrへのリンクを簡単に張るブックマークレットを公開します。もしかしたらFirefox専用かもしれません。

javascript:document.body.innerHTML%20=%20%22<textarea%20cols='100'%20rows='5'><p%20class=\%22eyecatch_photo\%22><img%20src=\%22%22+document.body.innerHTML.match(/([^%22]+)\.jpg\?v/)[1]+%22_m.jpg%22+%22\%22><span%20class=\%22photo_by\%22>Photo%20by%20<a%20href=\%22http://www.flickr.com%22+%20document.body.innerHTML.match(/by%20<a%20href=%22(\/photos\/.*<\/a>)/)[1]+%22</span></p></textarea>%22

　Flickrのページでこれを起動するとHTMLが生成されるので、これをコピペするだけ。

　Creative Commonsの写真を探す方法は、画像をブログに載せる(flickrのCC検索) | その他（IT） | 家で働くママ日記 | あすなろBLOGが参考になります。

p.s
　机のエントリが好評だったので、次は机の上とガジェット編でも書こうかと思ってます。ScanSnapさいこーとかｗ
まだ仕事が立て込んでるので、ちょっと先ですけど。

　hatana_bookmark_anywhere.jsを設置してくださった方々ありがとうございます。

　ブログへの設置方法を書いてくださっている方がまとめておきます。他のブログへの設置方法を書いていただける方、ご連絡お待ちしています。

WordPressへの設置方法

をかもとさんが、プラグインを公開しています。
WordPress Plugins/JSeries » Hatena bookmark anywhere

Voxへの設置

今書いた記事のブクマを見る – file-glob こと k.daibaの日記

ココログベーシックへの設置方法

去りにし日々、今ひとたびの幻: [blog]ブログにはてブのコメントを表示する

Movable Typeへの設置方法

はてブのコメントを好きな場所に表示する

Seesaa ブログへの設置方法

この際、言いたい放題＝別冊版: はてなブックマークのコメントをブログ上で表示してみた

Livedoor Blogへの設置方法

ドッフの喫茶店:livedoorBlogにはてブを表示 – livedoor Blog（ブログ）

tDiaryへの設置方法

hatena_bookmark_anywhere.js を tDiary に対応させてみたが… – HsbtDiary (2008-04-19)

はてなへの設置方法

残念な事に設置できません

　現在のhatana_bookmark_anywhere.jsは、白背景のサイトを基本に配色しています。これを別配色で行いたい場合やデザインを変更したい場合は、CSSで行うことができます。

　CSSでデザインするためには、埋め込んだスクリプトで指定しているvar hatena_bookmark_anywhere_styleをfalseにしてください。具体的には下のリストのように3行目を書き換えます。

<script type= "text/javascript">/*<![CDATA[*/
// var hatena_bookmark_anywhere_limit = 10; // 表示する件数
var hatena_bookmark_anywhere_style = false; // trueでデフォルトスタイル falseを設定するとCSSでスタイルの指定が可能
// 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でデザインを変更できるようになります。

　デフォルトのCSSは下記のようになっていますので、デザインや配色を変更するときには、この値を参考にしてください。

#hatena_bookmark_anywhere { font-size: 90%; font-family: "Arial", sans-serif; color: #000; }
#hatena_bookmark_anywhere *  { margin: 0; padding: 0; text-align: left; font-weight: normal; font-family: "Arial", sans-serif; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_zero { background-color:#edf1fd; border-top:1px solid #5279e7; list-style-position: inside; margin:2px 0 0 0;padding: 8px 5px 12px 8px; }
#hatena_bookmark_anywhere ul { background-color:#edf1fd; border-top:1px solid #5279e7; list-style-position: inside; margin:2px 0 0 0;padding: 8px 5px 12px 8px; }
#hatena_bookmark_anywhere ul li { list-style-type: circle; padding: 1px 0; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_user { color: #00e; text-decoration: underline; margin: 0 2px; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_tags { font-size: 90%; color: #66c; margin: 0 4px 0 2px; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_tags a { text-decoration: none; color: #66c; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_go { font-size: 90%; color: #66c; text-decoration: none; }

　私は、デザインが苦手なので、きれいな配色のCSSを公開してくださる方がいると、とてもうれしいです。

追記 2008/04/18 16:16 (PDT)
　tDiaryへの設置方法を追加しました。hsbtさん、ありがとうございました。

追記 2008/04/18 06:32 (PDT)
　Livedoor Blogへの設置方法を追加しました。ドッフさん、ありがとうございました。

追記 2008/04/18 04:31 (PDT)
　Seesaaブログへの設置方法を追加しました。こめろんぐさん、ありがとうございました。

　ブログを書いていると、はてなブックマークにいいコメントが付くことがあって、これが多くの人に見てもらえないのは、勿体ないなぁーと思うことがたまにあります。
本当はブログのコメント欄に残してもらえるとうれしいのですが、敷居が高いのかなかなか書いてもらえません。

　それなら、ブログにはてなブックマークのコメントを表示すればいい！と思って作ってみました。
どこでもはてなブックマークのコメントを表示するスクリプト、「hatana_bookmark_anywhere.js ver 0.1」をリリースします。

　実際の設置例はこのページの下の方を見てください。

　設置方法は超簡単。http://blog.masuidrive.jp/wp-content/uploads/2008/04/hatena-bookmark-anywhere-0-1.jsをhatena-bookmark-anywhere.jsという名前で保存します。

それを適当な所にアップロードして、下のHTMLをコピー&ペーストするだけ。CSSの設定も要りません。

<script type= "text/javascript">/*<![CDATA[*/
// var hatena_bookmark_anywhere_limit = 10; // 表示する件数
// var hatena_bookmark_anywhere_style = true; // trueでデフォルトスタイル falseを設定するとCSSでスタイルの指定が可能
// 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>

　なるべく、既存のHTMLやJavascriptと競合しないように作ってますので、PrototypeやJQueryなどのライブラリを使っているページでもこのまま埋め込むことができます。

　表示件数などのカスタマイズは、先頭のコメントを消して行ってください。

　どなたかMovableTypeやWordPressへの設置方法などを、ブログに書いていただけるとうれしいです。

追記: 17:07
　どうやら、はてブのページとタイムラグがでるようです。負荷対策でキャッシュしてるのかな？

追記: 17:21
　すっかり書くの忘れましたが、<body>内に<script>を置きたくない場合は、<script>は、<head>に持って行き、<div>だけを表示させる場所に置いておくことができます。
その際、ページに<div id=”hatena_bookmark_anywhere”></div>が無い場合は何も起こりません。
そのため、テンプレートのヘッダに<script>を置き、コメントを表示させたいページにだけ、<div id=”hatena_bookmark_anywhere”></div>を置くことができます。

追記 2008/04/18 17:34
　設置方法とカスタマイズをまとめました。
masuidrive on rails – hatana_bookmark_anywhere.jsの設置方法とカスタマイズ