- 2008-04-17 (Thu) 0:44
- Hatana bookmark anywhere
Photo by puddles for snails
ブログを書いていると、はてなブックマークにいいコメントが付くことがあって、これが多くの人に見てもらえないのは、勿体ないなぁーと思うことがたまにあります。
本当はブログのコメント欄に残してもらえるとうれしいのですが、敷居が高いのかなかなか書いてもらえません。
それなら、ブログにはてなブックマークのコメントを表示すればいい！と思って作ってみました。
どこでもはてなブックマークのコメントを表示するスクリプト、「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の設置方法とカスタマイズ
Related posts
- Newer: hatana_bookmark_anywhere.jsの設置方法とカスタマイズ
- Older: RESTはWebAPIの代わりにはならない
Comments:12
- Akira51 08-04-17 (Thu) 15:55
-
はてなでも使えますか？
- masuidrive 08-04-17 (Thu) 16:53
-
残念ながら、はてなはscriptタグを許可していないので、使えないです。
- をかもと 08-04-17 (Thu) 19:55
-
おぉ、素晴らしいスクリプト！
せっかくなので WordPress 用のプラグインを作ってみたんですが、JSeries で配布してもよろしいですか？ - masuidrive 08-04-17 (Thu) 20:35
-
おお、早速プラグイン。ぜひ配布お願いします。
- をかもと 08-04-17 (Thu) 21:09
-
と、言うわけで配布させていただきました。快諾ありがとうございます。
WordPress Plugins/JSeries » Hatena bookmark anywhere - Naoto 08-04-19 (Sat) 8:22
-
うーん。
はてぶコメントで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 データはキャッシュを利用しているため、実際のエントリーの内容と異なる場合があります。ご了承ください。
- masuidrive 08-04-19 (Sat) 18:21
-
優位点は設置が簡単な事ぐらいですね。
でも私にとって、それってとても大切なんですよ。
- naotake Takada 08-05-08 (Thu) 17:57
-
私にも設置できそうなんで設置してみます。
かんたんに使える事の大事さを実践していることが本当に素晴らしい。
襟を正します。 - ma38su 08-06-16 (Mon) 8:07
-
いまさらながらwp.Vicunaのためのプラグインを作りました。Vicunaはスキンによっては、pタグじゃないとうまくいきませんね。
- PCM 09-01-20 (Tue) 21:24
-
有用なスクリプトありがとうございます。
PukiWikiでも使えるようにプラグインという形で実装してみました。
元のjsは、hatanaなんですね。コピペせず手打ちしたので、素でhatenaと勘違いしていました。（汗
http://lil.la/technology/pukiwiki_insert_hatena_bookcoment_plugin/ - masuidrive 09-01-20 (Tue) 21:26
-
いえ、hatanaなのは私のうちミスが原因で・・・ orz
PukiWikiもご利用ありがとうございます。前にコミッターだったので。 - zero-code 09-03-08 (Sun) 15:48
-
はじめまして。自分のホームページでも、wp.Vicuna経由で使わせて頂いております。
かなり今更なんですが、GoogleReader版（Greasemonkey or GreaseKit使用）を作りました。
http://zero-code.com/category/hatena_bookmark_anywhere_to_googlereader/JavaScriptをまともに勉強したことがなかったので、とても勉強になりました！
Trackbacks:25
- Trackback URL for this entry
- http://blog.masuidrive.jp/index.php/2008/04/17/released-hatena-bookmark-anywhere/trackback/
- Listed below are links to weblogs that reference
- ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js from @masuidrive blog
- trackback from SaikyoLine.jp 08-04-17 (Thu) 4:25
-
どこでもはてブコメント。…
masuidrive on rails – ブログにはてブのコメントを表示するh……
- pingback from 次なるもの » Blog Archive » ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js 08-04-17 (Thu) 8:54
-
[...] original article « はてな的経営 – pal-9999の日記 他人にやさしく、思いありのある社会で子育てをしたい – 昨日の風はどんなのだっけ？ » [...]
- trackback from 3ping.org 08-04-17 (Thu) 9:15
-
はてブのコメントを好きな場所に表示する…
ページにはてブのブクマコメントを表示するjs…
- pingback from WordPress に、はてブのコメントを表示する at orioa 08-04-17 (Thu) 18:58
-
[...] lomoさんのdeliciousで知ったのですが、ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js ってのがありました。 [...]
- trackback from 独断と偏見の何でもレビュー 08-04-17 (Thu) 21:31
-
どこでもはてブ for WordPress…
masuidriveさんが作成されたJavaScript hatana_bookmark_anywhere.js を WordPress に導入し、記事の末尾にはてなブックマークのコメントを表示するためのプラグイン Hatana bookmark anywhere をリリースしまし….
- pingback from ゼロと無限の間のログ» ブログアーカイブ » Wikiに はてなブックマークコメントを表示させてみた 08-04-18 (Fri) 6:33
-
[...] masuidrive on rails – ブログにはてブのコメントを表示するhatana_bookmark_anywhere.jsが素晴らしいので使わせてもらった。ありがとうございます。 [...]
- pingback from 次なるもの » Blog Archive » masuidrive on rails - ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js 08-04-18 (Fri) 8:58
-
[...] original article « 404 Blog Not Found:コードの宝石箱 – 書評 – ビューティフルコード [...]
- trackback from この際、言いたい放題＝別冊版 08-04-19 (Sat) 4:10
-
はてなブックマークのコメントをブログ上で表示してみた…
はてなブックマークというソーシャルブックマークサービスを利用されている方は多く、当ブログでもブクマボタンの他、エントリにブクマが付くとそれが表示されるブログパーツを使っ…
- trackback from blog.katsuma.tv 08-04-26 (Sat) 9:48
-
エントリーにソーシャルブックマークのコメントを追加するJavaScript…
タイトルのようなものを作りました。（SBMComment.js） 説明するより見……
- pingback from 404th 08-04-26 (Sat) 22:28
-
[...] masuidrive on rails -
- trackback from 大阪てきとー日記 08-05-02 (Fri) 6:16
-
はてブコメントを表示するようにしてみました…
最近よく見かけるのが、ブログのエントリにはてブのコメントが表示されているやつ。
私も気になっていたところ、先ほどようやく設置完了しました。
サンクス ＞ masuidriveさん▼ masuidr…
- trackback from 北から南や西を見て思うこと 08-06-10 (Tue) 9:35
-
調子に乗ってbloggerにhatena_bookmark_anywhere.jsを組み込んでみました…
あと、Bloggerのデフォルト表示だと最新の数個の記事が表示されますが、このライブラリでは各記事単位でコメントを拾ってくるのではなく、現在のURLに対して拾ってくるので、1ページに…
- trackback from 北から南や西を見て思うこと 08-06-12 (Thu) 1:22
-
hatena-bookmark-anywhere-0-1-each-articles.jsを公開しました…
有益なコメントが多いはてなブックークのコメントを、1ページに複数のコメントのリストを表示できるように改造した、 hatena-bookmark-anywhere-0-1-each-articles.js を公開しました。
この版は…
- trackback from ぽいずなー開発ブログ 08-08-22 (Fri) 9:00
-
はてなブックマークでコメントをつけよう！…
昨日公開した各投稿別ページに、
hatana_bookmark_anywhere.js
を導入してみました。
スクリプトを作った masuidrive さんありがとう！普通であればコメントフォームを作っちゃえばいいんだ…
- pingback from ++ t-empire.com ++ - はてブのコメントを好きな場所に表示する 08-08-22 (Fri) 10:28
-
[...] 「モジュールテンプレートを作成」、新規モジュールのタイトルを「はてブコメントの表示」とし、内容に hatena-bookmark-anywhere.js の読み込みと設定のスクリプトを記述します。(詳細は「ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js」を参照してください。) [...]
- pingback from ++ t-empire.com ++ - Vicuna Adaptor 08-08-22 (Fri) 10:28
-
[...] hatena-bookmark-anywhere.js / はてなブックマークコメントの表示 [...]
- pingback from はてブのコメントを好きな場所に表示する – ++ t-empire.com ++ 08-08-24 (Sun) 6:56
-
[...] 「モジュールテンプレートを作成」、新規モジュールのタイトルを「はてブコメントの表示」とし、内容に hatena-bookmark-anywhere.js の読み込みと設定のスクリプトを記述します。(詳細は「ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js」を参照してください。) [...]
- pingback from Vicuna Adaptor – ++ t-empire.com ++ 08-08-24 (Sun) 6:57
-
[...] hatena-bookmark-anywhere.js / はてなブックマークコメントの表示 [...]
- pingback from ++ t-empire.com ++ » Blog Archive » はてブのコメントを好きな場所に表示する 08-09-04 (Thu) 19:44
-
[...] 「モジュールテンプレートを作成」、新規モジュールのタイトルを「はてブコメントの表示」とし、内容に hatena-bookmark-anywhere.js の読み込みと設定のスクリプトを記述します。(詳細は「ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js」を参照してください。) [...]
- pingback from ++ t-empire.com ++ » Blog Archive » Vicuna Adaptor 08-09-04 (Thu) 19:54
-
[...] hatena-bookmark-anywhere.js / はてなブックマークコメントの表示 [...]
- pingback from One Wish... Twiple! Tweetback - 09-01-20 (Tue) 17:42
-
[...] 0Comments 特定のURLに言及しているつぶやきを表示するスクリプト「Twiple! Tweetback」をリリースしました。Twiple! Tweetbackを使う事でTwitter+国内主要マイクロブログで自分のブログ記事等への言及があった場合に、そのつぶやきを表示する事が出来ます。完全にmasuidriveさんのhatana_bookmark_anywhere.jsにインスパイアされています。本当にありがとうございます。設置方法Tweetbackを表示したいページの<head>～<head>内に下記のコードを追加するか<script type=”text/javascript” src=”http://static.twiple.jp/js/tweetback.js”></script>tweetback.jsをダウンロード後、自分のサーバにアップロードして、下記のコードを追加し、Tweetbackを表示したい場所に<div id=”tweetback”></div>を追加します。<script type=”text/javascript” src=”tweetback.jsを設置した場所のURL”></script>カスタマイズする場合はtweetback.jsを読み込んだ後に、下記のコードを追加することでカスタマイズ可能です。<script type=”text/javascript”>tweetback.options.limit = 30; // 表示件数tweetback.options.default_style = 1; // デフォルトスタイルの適用 (1 = ON, 0 = OFF)tweetback.options.load_message = ‘Loading…’; // ロード中のメッセージtweetback.options.notweets_messsage = ‘There are currently no tweets.’; // Tweetbackがない時のメッセージ</script>をかもとさんが作成してくださっているTweetbackのブックマークレットをブラウザに登録することでTweetbackを設置していないサイトへのTweetbackも見ることが出来ます。Rate It! (Average 0.00, 0 votes) [...]
- trackback from 小さなblog 09-01-20 (Tue) 19:29
-
PukiWikiの任意の場所にはてブコメントを挿入するプラグイン…
ブログに、はてブのコメントを表示させることができるプラグインを作ってみました。設置のしやすさを重点的に実装しています。
…… - trackback from 地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記 09-01-22 (Thu) 17:48
-
MIT Licenseのすばらしいスクリプトたち【Ajax/Javascript】…
世の中にはすばらしいフリーウェアが数多く存在します。
そして、Webサイトを彩るAjax（Javascript）にも多くのすばらしいスクリプトが存在します。
今日は、そんな中からいくつかのスク… - pingback from ブログのエントリーについたはてぶ,twitter,friendfeedのコメントをアグリゲートする3つのツール 09-02-11 (Wed) 2:44
-
[...] ・はてぶ masuiさんが公開されているhatana_bookmark_anywhere.jsを使わせてもらいます。設置方法は非常に簡単で以下のサイトで公開されているjsを適当な所において、<script>タグで埋め込むだけです。cssの編集も可能で、使っているcssを編集するか、jsでcssを指定している箇所を編集します。ここで、引っかかりそうなポイント。masuiさんが書かれている<script>タグで、ダブルクウォーテーションが全角になっているところがあるので半角に修正したほうがよさそうです。 また、wordpressユーザの方はプラグインが公開されているので、そちらをインストールすることで簡単に導入することができます。 masuidrive on rails – ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js [...]
- trackback from ZERO-CODE 09-03-08 (Sun) 14:20
-
GoogleReaderにはてなブを表示「Hatena bookmark anywhere to GoogleReader」…
はてなブをGoogreReaderに直接表示
はてなユーザーはブログのコメント欄よりも、はてなブにコメントを書くことが多い。それを見るために新しいウインドウを開くのがとても面倒だっ…