スマートフォン用の表示で見る

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

はてな

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

はてなぶっくまーくこめんとひょう

このページは古い情報を掲載しています

このページの情報は更新されていません。新しい情報は「はてなブックマークコメント表示ブログパーツ - Hatena Developer Center」に移転しました。

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

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

更新履歴

  • 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 です。