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

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

  関連記事

「Google」BUZZ(バズ)オープンに併せてリアルタイム検索もオープン?

1年以上前の記事です。内容が古い可能性があります。GoogleがBUZZ(バズ) …

不眠症はキャンプで直せ、テントで寝泊まりすると不眠症が治療できる

1年以上前の記事です。内容が古い可能性があります。自分は基本的寝れない、食べられ …

ファンページにブログの更新情報を流す方法【Facebookページの作り方02】

1年以上前の記事です。内容が古い可能性があります。さて、ファンページができたらこ …

やっぱりフォローしないと外される。「つぶくま」は100%リフォローします【ツイッター】

1年以上前の記事です。内容が古い可能性があります。熊谷市のツイッターポータルサイ …

自動車のタイヤ空気圧は300kPa程度までに抑えておこう

1年以上前の記事です。内容が古い可能性があります。ここのところ多いツイッターのリ …

ツイッターのツイートが簡単に埋め込みできるようになっていた

1年以上前の記事です。内容が古い可能性があります。ツイッターがリニューアルしたの …

「かりあげ」せずに「モミアゲ」を落としちゃいけない

1年以上前の記事です。内容が古い可能性があります。先日、初めて1000円カットに …

「引用」と「転載」と「無断転載」の違い

1年以上前の記事です。内容が古い可能性があります。以前、引用と転載の違いをまとめ …

背景(バックグラウンド)のイメージをモニター(ウインドウ)のサイズによって変える(レスポンシブルデザイン)Webサイトの作り方【CSS3コーディング】

1年以上前の記事です。内容が古い可能性があります。今、作っている某総合福祉センタ …

iPhone(アイフォーン)で「Eメール(i)」の受信通知を非表示にする(表示させない)方法

1年以上前の記事です。内容が古い可能性があります。以前、書いたと思っていたのです …

血液型オヤジ