はてなブックマークコメント表示ブログパーツ

本ドキュメントに関する注意事項

本ドキュメントははてなブックマークが提供するコメント表示用ブログパーツの実装を解説するものです。主にはてなスタッフがその作成と更新を行っています。

更新履歴

• 2009年12月25日リリース

コメント表示ブログパーツとは

ご利用のブログサービスに、はてなブックマークでのコメントを表示するブログパーツです。
正しく設置されるとブログのコメント欄のように、はてなブックマークでのコメントが表示されます。

簡単な設置方法

http://b.hatena.ne.jp/guide/blogparts.select?type=blogparts
から、ブログサービスを選択すると下記のようなブログサービスごとに正しく設定されたJavaScirptが表示されます。
各サービスのブログパーツ設置方法に従って JavaScript をブログに設置してください。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>
<script type="text/javascript">
HBBlogParts.commentInsertSelector = [ 'div.hatena-bookmark-marker', 'div.article-body-inner', 'div.blogbody div.mainmore', 'div.blogbody div.main', 'div.entry-body-main'];
HBBlogParts.insertPosition = 'after';
HBBlogParts.permalinkSelector = [ 'div.hatena-bookmark-marker a', 'div h3 a', 'h2.title a', 'h2.entry-title a', '.posted a' ];
HBBlogParts.permalinkPathRegexp = /\/archives\/\d+\.html$/;
HBBlogParts.permalinkAttribute = 'href';
</script>

各設定項目の詳細

以下では、ブログパーツの設定方法について解説します。

<script type="text/javascript">
HBBlogParts.commentInsertSelector = [ 'div.hatena-bookmark-marker', 'div.article-body-inner', 'div.blogbody div.mainmore', 'div.blogbody div.main', 'div.entry-body-main'];
HBBlogParts.permalinkSelector = [ 'div.hatena-bookmark-marker a', 'div h3 a', 'h2.title a', 'h2.entry-title a', '.posted a' ];
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /\/archives\/\d+\.html$/;
</script>

上記の部分が各ブログサービス毎に設定を行っている JavaScript になります。

HBBlogParts オブジェクトのプロパティを書き換えることで、スマートフォンアプリ・ブラウザ拡張機能に設定のないブログにも対応することができます。以下ではそれぞれのプロパティについて解説します。

HBBlogParts.commentInsertSelector

はてなブックマークのコメントが挿入される位置の基準となるDOM ElementをCSSセレクタで指定します。配列で指定すると、若い要素から順番にDOM Element の取得を試みます。

HBBlogParts.permalinkSelector

ブログのパーマリンクがどの DOM Element に記載されているかをCSSセレクタで指定します。このCSSセレクタによって取得したDOM Element から得た URL をもとに、ブックマークのコメントを取得・表示します。

HBBlogParts.permalinkAttribute

HBBlogParts.permalinkSelector で取得した要素のどの属性に ブログのパーマリンクのURLが記載されているかを指定します。Aタグを対象としているならば、通常は'href'で良いでしょう。また、本来属性値ではありませんが、要素が保持しているテキストノードの値を取得する "textNode" という値も利用できます。

HBBlogParts.permalinkPathRegexp

そのブログのパーマリンクにマッチする正規表現です。ブログ内のパーマリンクページのURLにマッチしそれ以外のページにはマッチしない正規表現が必要です。完璧にそのような仕様を満たす正規表現でなくても動作しますが、表示がおかしくなる可能性があります。

最低限、上記の 4 プロパティが設定されていれば、はてなブックマークコメント表示ブログパーツは動作します。

細かな設定方法

以下ではさらに細かい設定をするためのプロパティについて解説します。これらのプロパティは上記で解説したプロパティと同様に script タグの中で値を代入してください。

HBBlogParts.insertPosition

はてなブックマークのコメントを、HBBlogParts.commentInsertSelector で指定したタグより前方か後方のどちらに挿入するかを指定します。それぞれ "before" と "after" の文字列で指定します。デフォルト値は "before" です。

HBBlogParts.Design

表示される項目と順番をを設定できます。ブックマークのコメントとして表示したいものを、表示順に配列で指定してください。配列の要素は、長さ1の文字列で、それぞれ、ユーザー名('u')、タグ('t')、コメント('c')、日付('d')、はてなスター('s')を意味しています。デフォルト値は ['u','t','c','d','s'] です。

HBBlogParts.useUserCSS

ユーザーがCSSを指定することで、はてなブックマークのコメント表示について見た目を変える事ができます。このプロパティの値が true になっているとコメント表示部分にはてなが提供するCSSが反映されませんので、より自由にユーザーがCSSを設定することができます。デフォルト値は false です。

HBBlogParts.listPageCommentLimit

HBBlogParts.permalinkPathRegexp にマッチしないページで表示されるコメントの数の最大値です。これ以上の数のコメントがあった場合は、"他のコメントを表示"というリンクが現れ、リンクをクリックすることで表示されるようになります。デフォルト値は 3 です。

HBBlogParts.permalinkCommentLimit

HBBlogParts.permalinkPathRegexp にマッチするページで表示されるコメントの数の最大値です。コメントの数がこの値を越えたときの動作は HBBlogParts.listPageCommentLimit と同様です。デフォルト値は 5 です。

HBBlogParts.perlmalinkURI

はてなブックマークから取得するエントリーのURIを強制的に指定します。HBBlogParts.permalinkPathRegexp にマッチするページでのみ有効になります。デフォルト値は undefined です。

HBBlogParts.useCanonicalizedURI

このプロパティが ture の場合、HBBlogParts.permalinkSelector を利用して取得したURLが#を含んでいると#以降を無視します。ameblo等でコメント表示用のページとパーマリンクのページを同一視したいときに有用です。一方でHatena DiaryやtDiaryのようにパーマリンクに#が含まれることがある場合には無効にする必要があります。デフォルト値は ture です。

HBBlogParts.debug

このプロパティが true かつ、使用中のブラウザがデバッグコンソールを利用できる場合、コンソールにパーマリンクの取得状況などが表示されます。HBBlogParts オブジェクトの各プロパティを手動で決定していく際などにご利用ください。デフォルト値は undefined です。

デザイン設定

はてなブックマークブログパーツのデザインの設定・カスタマイズについては、以下のページをご覧ください。

• はてなブックマークコメント表示ブログパーツ・デザイン設定