はてなブックマークコメント一覧を表示する設定、1ヶ所コピペでOK

はてなブックマークによるコメント一覧を表示する方法です。当サイト作者が作成した次のテンプレートについてです。

表示例

  1. 下図でハイライトされている部分が表示されます。

    130306hatebu-3.png
  2. コメントがあれば次のように表示されます。他サイトのキャプチャーなのでデザインが多少異なります。また、下図ではIDにモザイク処理していますが、実際にはIDが表示されています。

    130306hatebu-4.png
  3. もしこのページにはてなブックマークでのコメントが表示されていたら、テスト投稿にご利用いただけます。

メリット・デメリット

  1. はてなブックマークによるコメントに有用なものがあれば、該当するページにそれを表示できます。コメントは玉石混淆なので、有用でないコメントも表示されます。

  2. fc2blog標準のコメントを受け付けていなくても、はてなブックマークによるコメントは受け付けられ、表示もできます。

  3. はてなブックマーク数も分かるので、その記事がどれくらいの関心を集めているかも分かります。

  4. 読者が自分用の覚書をコメントで残せます。読者がコメントを非表示設定していれば、その読者のコメントはその読者しか通常見れません。

テンプレートのHTMLを編集

  1. 次のコードを探します。下図で反転している部分です。コピペする場所は任意です。分かる方は、好みの場所でOKです。

    <!-- ▲▲▲ コメント編集画面 終了 ▲▲▲ -->
    130306hatebu-1.png
  2. 上記コードの3行下あたりに次のコードを追加します。下図で反転している部分が追加後です。

    <!--permanent_area--><script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>
    <p style="display:none;" class="hatena-bookmark-marker"><%url>blog-entry-<%pno>.html</p>
    <script type="text/javascript">
     HBBlogParts.commentInsertSelector = 'p.hatena-bookmark-marker';
     HBBlogParts.permalinkSelector = 'p.hatena-bookmark-marker';
     HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/;
     HBBlogParts.permalinkAttribute = 'textNode';
     HBBlogParts.permalinkCommentLimit = 5;
     HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit;
    </script>
    <!--/permanent_area-->
    130306hatebu-2.png
  3.  更新 すれば完了です。

他サイトの参考になるページへのリンクです。日付は各ページの公開日もしくは最終更新日です(このページの公開日現在)。ありがとうございます。

今後のテンプレート改訂時には

  1. 上記説明やキャプチャー画像と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)