Posted filed under Hatana bookmark anywhere.

Photo by puddles for snails

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

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

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

 設置方法は超簡単。https://raw.github.com/masuidrive/hatena-bookmark-anywhere/master/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の設置方法とカスタマイズ

12 Responses to “ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js”

  1. をかもと

    おぉ、素晴らしいスクリプト!
    せっかくなので WordPress 用のプラグインを作ってみたんですが、JSeries で配布してもよろしいですか?

  2. Naoto

    うーん。
    はてぶコメントでotsuneさんとかが指摘してるように、別に初なわけでもなんでもないんですけどね。

    http://zeromemory.sblo.jp/article/1177897.html
    http://hail2u.net/blog/blosxom/includes-comments-on-hatena-bookmark.html

    ちょっと「なかったことに驚いた!! すばらしい!!」とかコメントしてる人が哀れなので。上記とか見て優位点があるのかしらと。

    ちなみにキャッシュの件ですが。
    API仕様に明確に書いてあるかと思いますが。
    http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%d6%a5%c3%a5%af%a5%de%a1%bc%a5%af%a5%a8%a5%f3%a5%c8%a5%ea%a1%bc%be%f0%ca%f3%bc%e8%c6%c0API?kid=184075

    注意事項

    JSON データはキャッシュを利用しているため、実際のエントリーの内容と異なる場合があります。ご了承ください。

  3. masuidrive

    優位点は設置が簡単な事ぐらいですね。

    でも私にとって、それってとても大切なんですよ。

  4. naotake Takada

    私にも設置できそうなんで設置してみます。
    かんたんに使える事の大事さを実践していることが本当に素晴らしい。
    襟を正します。

  5. ma38su

    いまさらながらwp.Vicunaのためのプラグインを作りました。Vicunaはスキンによっては、pタグじゃないとうまくいきませんね。

  6. masuidrive

    いえ、hatanaなのは私のうちミスが原因で・・・ orz
    PukiWikiもご利用ありがとうございます。前にコミッターだったので。

Trackbacks/Pingbacks

  1.  SaikyoLine.jp
  2.  次なるもの » Blog Archive » ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js
  3.  3ping.org
  4.  WordPress に、はてブのコメントを表示する at orioa
  5.  独断と偏見の何でもレビュー
  6.  ゼロと無限の間のログ» ブログアーカイブ » Wikiに はてなブックマークコメントを表示させてみた
  7.  次なるもの » Blog Archive » masuidrive on rails - ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js
  8.  この際、言いたい放題=別冊版
  9.  blog.katsuma.tv
  10.  404th
  11.  大阪てきとー日記
  12.  北から南や西を見て思うこと
  13.  北から南や西を見て思うこと
  14.  ぽいずなー開発ブログ
  15.  ++ t-empire.com ++ - はてブのコメントを好きな場所に表示する
  16.  ++ t-empire.com ++ - Vicuna Adaptor
  17.  はてブのコメントを好きな場所に表示する – ++ t-empire.com ++
  18.  Vicuna Adaptor – ++ t-empire.com ++
  19.  ++ t-empire.com ++ » Blog Archive » はてブのコメントを好きな場所に表示する
  20.  ++ t-empire.com ++ » Blog Archive » Vicuna Adaptor
  21.  One Wish... Twiple! Tweetback -
  22.  小さなblog
  23.  地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
  24.  ブログのエントリーについたはてぶ,twitter,friendfeedのコメントをアグリゲートする3つのツール
  25.  ZERO-CODE
  26.  WordPress ではてなブックマークのコメントを表示する方法 | ウェブル
  27.  WordPressではてなブックマークのコメントを表示する方法 | みはら.com