新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

ツイッター(Twitter)だけで様々なSNSを操作できる「CtrlTwit」

1年以上前の記事です。内容が古い可能性があります。おそらく、自分の中で今のところ …

池袋駅⇔赤羽駅間の電車移動、各駅停車でも「湘南新宿ライン」よりも「埼京線」の方が早い

1年以上前の記事です。内容が古い可能性があります。毎日電車を使って東京まで行って …

Skype(スカイプ)を使ってチャットをするまで(インストール編)

1年以上前の記事です。内容が古い可能性があります。1. ID取得編 → …

「ダウンロード」とブログに書くのは危険

1年以上前の記事です。内容が古い可能性があります。ブログの記事に安易に「ダウンロ …

ブラインドタッチを覚えるための10のポイント

1年以上前の記事です。内容が古い可能性があります。先日より、ブラインドタッチを覚 …

最近の雑誌は2種類のサイズで売っているらしい

1年以上前の記事です。内容が古い可能性があります。たまたま見かけた日経トレンディ …

インデザインのブックレット印刷で面付けされた状態で印刷範囲指定

1年以上前の記事です。内容が古い可能性があります。どういうことかというと、InD …

警察や検察から身を守る(冤罪を防衛する)、不当逮捕されないための方法

1年以上前の記事です。内容が古い可能性があります。これは個人的にもまとめておきた …

タコ足配線の恐怖

1年以上前の記事です。内容が古い可能性があります。会社のNAS(簡易データサーバ …

docomoスマホのSPモードメールは初期設定ではWi-Fi経由で送信できない

1年以上前の記事です。内容が古い可能性があります。docomo(ドコモ)のスマホ …

血液型オヤジ