新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ブログの記事にブコメ一覧を表示させるようにした

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

ブコメってのはブックマークコメントの略で、はてなブックマークでブックマークをする際にメモ書き程度に残して置くことのできるコメントのこと。
本来のブログに対するコメントとはちょっと種類が違い、書き手に読ませるためのものではないので一覧表示の方法は知っていたのだが避けていた。

ところが、最近では色々なブログでブコメ一覧を表示させるようになってきているし、僕のブログもポツリポツリとブックマーク(及びブックマークコメント)をしてもらえるようになったのでそろそろ導入してみようかと思い立った。

たとえば、
日本のネットが「残念」なのは、ハイブロウな人たちの頑張りが足りないからかも知れない(追記あり):小鳥ピヨピヨ
だったり、
立ったまま尿を排泄可能にする「GO GIRL」が大ヒット! – ロケットニュース24(β)
だったりといった感じになる。

【PR】
ウェブ時代5つの定理 (文春文庫)ウェブ時代5つの定理 (文春文庫)
著者:梅田 望夫
販売元:文藝春秋
発売日:2010-02-10
おすすめ度:5.0
レビューを見る

スポンサーリンク
 

さっそく導入方法を解説。
ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js – @masuidrive blog
ほぼこちらのサイトの通りやればOKなのだが、一応、手順を説明しておく。

  1. まずは、核となるJavascriptのファイルをダウンロード。こちらから。
  2. 名前を「hatena-bookmark-anywhere.js(任意)」に変えてFTPでアップロード(livedoorblogの場合、Pro版以上でないとできません)
  3. HTML内に配置するスクリプトを用意する。赤文字部分は自分の環境にあわせて変更の上。
    <!-- はてブコメント -->
    <script type= "text/javascript">/*<![CDATA[*/
    // var hatena_bookmark_anywhere_limit =
    30; // 表示する件数
    // var hatena_bookmark_anywhere_style = true;
    // trueでデフォルトスタイル falseを設定するとCSSでスタイルの指定が可能
    // var hatena_bookmark_anywhere_collapse; // trueにすると、(略) 
    // var hatena_bookmark_anywhere_url; // 表示するURL 未指定の場合、現在のページ
    /*]]>*/</script>
    <script src="
    http://webdirector.livedoor.biz/scripts/hatena-bookmark-anywhere.js" type="text/javascript" charset="utf-8"></script>
    <div id="hatena_bookmark_anywhere"></div>
    <!-- はてブコメントここまで -->
  4. できたスクリプトを表示させたい部分に貼り込む。
    僕がベースにしたテンプレートはライブドアブログの「デフォルト2008(2カラム)」なので同じレイアウトを使っている人は以下の場所で大丈夫だと思います。
    ブコメスクリプトの貼付け場所

以上。

 - ユーザビリティ, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

WikipediaやGoogleも反対する「SOPA」とは何のこと?

1年以上前の記事です。内容が古い可能性があります。最近良く耳にする茹でたらおいし …

遂にSuica(スイカ)で全国どこでもいけるようになりました

1年以上前の記事です。内容が古い可能性があります。JR東日本の電子マネーSuic …

no image
フォトショップが立ち上がらなくなったときの対処法

1年以上前の記事です。内容が古い可能性があります。最近、自宅でフォトショップを開 …

ツイッター(Twitter)をSMS替わりとして使う方法

1年以上前の記事です。内容が古い可能性があります。SMS(ショートメッセージサー …

mixiスマホ版がリニューアル。つぶやきがより前面に

1年以上前の記事です。内容が古い可能性があります。mixiスマートフォン(iPh …

給与未払い問題。「労基(労働基準監督署)」でだめなら次は「法テラス」へGO!!

1年以上前の記事です。内容が古い可能性があります。さて、労基さんが匙を投げた給与 …

「Windows Liveメール」で署名を作成、使用する方法

1年以上前の記事です。内容が古い可能性があります。今まで何やってたの? と思うよ …

Togetter(トゥギャッター)とTwiccha(ツイッチャ)でつぶくま会のオンライン会議を実行 (9/20追記)

1年以上前の記事です。内容が古い可能性があります。今月は忙しくてオフラインでの会 …

水筒の水漏れ防止のポイント。キャップを締めた際の違和感に注意

1年以上前の記事です。内容が古い可能性があります。水濡れタブレット復活日記。 前 …

PHPでパーミッション(実行権)の設定が必要ない理由

1年以上前の記事です。内容が古い可能性があります。Webテクノロジーも日々進化し …

血液型オヤジ