[C]FC2ブログにはてなブックマークコメントを表示する
- 2010-01-22 金 01:00
- FC2ブログ
- 【設置サンプル】
- サイドバー設置（デザインB サイドバー向け）
- 簡単設置（トップページ各記事表示） + サイドバー設置（デザインC サイドバー向け）
- 簡単設置（個別ページコメント下設置） + サイドバー設置（デザインA サイドバー向け）
[ ! ] 確認事項 : いくつかのプロパティが反映されないときがある / その対策
はてなブックマークコメント表示ブログパーツ のtypo - 細かな設定方法
HBBlogParts.perlmalinkURI → HBBlogParts.permalinkURI HBBlogParts.useCanonicalizedURI のプロパティが ture → true
- 【目次】
- 設置方法（FC2ブログ）
- デザインサンプル
- 個別ページのみデザインを変更する（FC2ブログ）
- 表示件数などの各種設定
- 他所のサイトのブックマークコメント表示
- 補足、FC2ブログの貼り付け方について
- 読者投稿
設置方法
FC2ブログ表示ページURI
個別ページ（パーマリンク）でのみ表示する
http://id.blog123.fc2.com/blog-entry-123.html
トップページなどの各記事に表示する
http://id.blog123.fc2.com/ http://id.blog123.fc2.com/page1.html http://id.blog123.fc2.com/category0-1.html
掲載されている貼り付け方ではうまく設置できないケースがありそうです。
フリーエリアにコードを追加すると、（表示上）空っぽのプラグインが生成されてしまうので、追加するときはテンプレートのHTML編集エリアや既存のプラグイン（必ず表示するもの）の編集エリアに貼り付けます。
ここではテンプレートのHTML編集エリアに貼り付けます。
次のいずれかの設置方法を選びます。テンプレートがよくわからない場合は、簡単設置またはサイドバー設置を選びます。
簡単設置 : 手順１→手順２
セレクタ設置 : 手順１→セレクタ設置
サイドバー（プラグイン）設置 : 手順１（ア）→サイドバー設置
記事ごと設置 : 手順１（イ）→記事ごと設置
手順１
個別ページのみ表示する場合は（ア）を。トップページなどの各記事にコメントを表示させる場合は（イ）を選択します。コメントの性質やトップページの重さを考慮します。（ア）推奨です。
</head> の前（head要素内）にどちらか一方を貼り付けます。
（ア）個別ページのみ表示
<!--permanent_area--> <script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script> <!--/permanent_area-->
</head>
（イ）トップページなどの各記事にも表示
<!--not_titlelist_area--><!--not_edit_area--> <script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script> <!--/not_edit_area--><!--/not_titlelist_area-->
</head>
次項 : 簡単設置（手順２） セレクタ設置 サイドバー設置 記事ごと設置
手順２
個別ページのみ表示する場合は（ア）を。トップページなどの各記事にコメントを表示させる場合は（イ）を選択します。
（ア）個別ページのみ表示
はてなブックマークコメントを表示したい箇所に（Ａ）～（Ｄ）のいずれかを貼り付けます。とりあえず（Ａ）でいいと思います。設置箇所は記事下なら、<!--/more--> の後。記事とコメントブロックの間なら、<!--comment_area--> の前後。コメントブロックの後なら、<!--/comment_area--> の前後に入れます。
- （Ａ） p要素 , textNode
<!--permanent_area--> <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-->
p要素に
title="はてなブックマークコメントURI"とかつければいいと思う。- （Ｂ） div > a 要素 , href : はてなで紹介されているかたちを一部改善
<!--permanent_area--> <div style="display:none;" class="hatena-bookmark-marker"><a href="<%url>blog-entry-<%pno>.html"></a></div> <script type="text/javascript"> HBBlogParts.commentInsertSelector = 'div.hatena-bookmark-marker'; HBBlogParts.permalinkSelector = 'div.hatena-bookmark-marker a'; HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/; HBBlogParts.permalinkAttribute = 'href'; HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; </script> <!--/permanent_area-->
a要素が空っぽ。
- （Ｃ） 親div ぶらさがり要素生成 , textNode
<!--permanent_area--> <div style="display:none;" id="HBFComment<%pno>" class="hatena-bookmark-marker"> <script type="text/javascript"> HBFCelector = document.getElementById('HBFComment<%pno>'); HBFCreate = document.createElement('p'); HBFCreate.appendChild(document.createTextNode('<%url>blog-entry-<%pno>.html')); HBFCelector.appendChild(HBFCreate); 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> </div> <!--/permanent_area-->script を div で括る。
- （Ｄ） script要素のみ , textNode
<!--permanent_area--> <script type="text/javascript"> document.write('<p style=\"display:none;\" class=\"hatena-bookmark-marker\"><%url>blog-entry-<%pno>.html<\/p>'); 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-->ノーコメント。
以上で設置完了です。
（イ）トップページなどの各記事にも表示
- </body> の前付近（必ず表示される箇所でできるだけ後の方）に以下を貼り付けます。</body> 前にアクセス解析などがある場合はそのさらに前でも問題ありません。<%ad><%ad2> より後に設置することが望まれます。
<!--not_titlelist_area--><!--not_edit_area--> <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'; <!--permanent_area--> HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; <!--/permanent_area--> <!--not_permanent_area--> HBBlogParts.listPageCommentLimit = 3; <!--/not_permanent_area--> </script> <!--/not_edit_area--><!--/not_titlelist_area-->
</body>- はてなブックマークコメントを表示したい箇所に以下を貼り付けます。
-
ただし、貼り付ける場所は記事出力部分
<!--topentry--> ～ <!--/topentry-->内にかぎられます。<p style="display:none;" class="hatena-bookmark-marker"><%topentry_link></p>
記事本文下であれば、
<!--/more-->の後に入れます。<!--/more--> <p style="display:none;" class="hatena-bookmark-marker"><%topentry_link></p>
以上で設置完了です。トップページと個別ページで位置を変えて表示する場合は、 次の変更を行ってください。
追加したコードを not_permanent_area で挟みます。
<!--not_permanent_area--> <p style="display:none;" class="hatena-bookmark-marker"><%topentry_link></p> <!--/not_permanent_area-->
そして個別ページで表示したい箇所に以下のコードを貼り付けます。
<!--permanent_area--> <p style="display:none;" class="hatena-bookmark-marker"><%url>blog-entry-<%pno>.html</p> <!--/permanent_area-->
セレクタ設置
まず手順１を行います。
次に </body> の前付近（必ず表示される箇所でできるだけ後の方）に以下を貼り付けます。</body> 前にアクセス解析などがある場合はそのさらに前でも問題ありません。<%ad><%ad2> より後に設置することが望まれます。
<!--not_titlelist_area--><!--not_edit_area--> <script type="text/javascript"> HBBlogParts.commentInsertSelector = '設定箇所1（コメント挿入部分）'; HBBlogParts.insertPosition = 'before'; HBBlogParts.permalinkSelector = '設定箇所2（パーマリンク取得部分）'; HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/; HBBlogParts.permalinkAttribute = 'href'; <!--permanent_area--> HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; <!--/permanent_area--> <!--not_permanent_area--> HBBlogParts.listPageCommentLimit = 3; <!--/not_permanent_area--> </script> <!--/not_edit_area--><!--/not_titlelist_area-->
</body>
個別ページのみ表示する場合（手順１で（ア）を選択した場合）は、<!--permanent_area--> と <!--/permanent_area--> で上記のコード全体を挟みます。
設定箇所1と2を指定します。
設定箇所1の指定
テンプレートのHTMLからコメントを表示したい箇所を探します。例えば、記事出力部分が次のようなテンプレートがあったとします。
<div class="entry-body"> <%topentry_body> <!--記事本文--> <!--more_link--> <p><a href="<%topentry_link>">続きを読む</a></p> <!--/more_link--> <!--more--> <%topentry_more> <!--追記本文--> <!--/more--> </div> ←ここに表示したい(A) <ul class="entry-footer"> <!--記事フッタ--> <li>Comment</li> <li>Trackback</li> </ul> ←ここに表示したい(B)
記事の下、記事フッタの前(A)にコメントを表示させる場合は以下のように指定します。
表示させたい箇所の後にある要素 + .（ドット） + その要素のクラス名 を 設定箇所1 に入れます。
HBBlogParts.commentInsertSelector = 'ul.entry-footer';
記事フッタの後(B)にコメントを表示させる場合は HBBlogParts.insertPosition を after に変更します。
HBBlogParts.commentInsertSelector = 'ul.entry-footer'; HBBlogParts.insertPosition = 'after';
トップページと個別ページで位置を変えて表示する場合は、 次の変更を行ってください。
<!--not_permanent_area--> HBBlogParts.commentInsertSelector = 'ul.entry-footer'; <!--/not_permanent_area--> <!--permanent_area--> HBBlogParts.commentInsertSelector = 'div.comment-block'; <!--/permanent_area-->
すると個別ページ以外では <!--not_permanent_area--> 内で指定した ul.entry-footer の前後に表示され、個別ページでは <!--permanent_area--> 内で指定した div.comment-block の前後に表示することができます。
設定箇所2の指定
テンプレートのHTMLから「href="<%topentry_link>"」を探します。複数ある場合は <%topentry_body> を含む 記事出力部分 <!--topentry--> ～ <!--/topentry--> 内にあるものを選びます。すると次のようなものが見つかります。(A)(B)のようなものが複数ある場合はどれか一つを選びます。
(A)記事タイトルがパーマリンクになっている <h2 class="entry-title"><a href="<%topentry_link>"><%topentry_title></a></h2>
(B)記事日付がパーマリンクになっている <div class="entry-day"><a href="<%topentry_link>"><%topentry_year> <%topentry_month>-<%topentry_day></a></div>
(C)記事タイトルがパーマリンクになっているが、a要素の親にclass属性がない <h2><a href="<%topentry_link>"><%topentry_title></a></h2> そのような場合は使われてないクラス名を適当につけます。 <h2 class="welCame"><a href="<%topentry_link>"><%topentry_title></a></h2>
見つからないときは「href="blog-entry-<%topentry_no>"」や「href="./blog-entry-<%topentry_no>"」を探し、それを「href="<%topentry_link>"」に書き換えます。トップページと個別ページでパーマリンクの表示方法が異なる場合もそのように書き換えます。
a要素を挟んでいる要素 + .（ドット） + a要素を挟んでいる要素のクラス名 + （半角スペース）+ a を 設定箇所2 に入れます。
(A)の場合 : 挟んでいる要素 h2 クラス名 entry-title HBBlogParts.permalinkSelector = 'h2.entry-title a';
(B)の場合 : 挟んでいる要素 div クラス名 entry-day HBBlogParts.permalinkSelector = 'div.entry-day a';
(C)の場合 : 挟んでいる要素 h2 クラス名 welCame HBBlogParts.permalinkSelector = 'h2.welCame a';
うまく設置できないときは挟んでいる要素「.（ドット）」の前を削除してください。個別ページと他のページで要素が変わっている場合があります。
(A)の場合 HBBlogParts.permalinkSelector = '.entry-title a';
(B)の場合 HBBlogParts.permalinkSelector = '.entry-day a';
(C)の場合 HBBlogParts.permalinkSelector = '.welCame a';
HBBlogParts.permalinkURI はトップページ記事ごとの設置や個別ページ「blog-entry-x.html」「(\?|&)no=x」のマッチが少し複雑になります。script要素は少ない方がよいです。
記事ごと設置
テンプレートで設置箇所を指定するとすべての記事にコメントが表示されてしまいます。そこで設置箇所を記事に直接書いて特定の記事のみにコメントを表示します。
まず手順１の（イ）を行います。
次に </body> の前付近（必ず表示される箇所でできるだけ後の方）に以下を貼り付けます。</body> 前にアクセス解析などがある場合はそのさらに前でも問題ありません。<%ad><%ad2> より後に設置することが望まれます。
<!--not_titlelist_area--><!--not_edit_area--> <script type="text/javascript"> HBBlogParts.commentInsertSelector = 'p.hatena-bookmark-marker'; HBBlogParts.permalinkSelector = '設定箇所2（パーマリンク取得部分）'; HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/; HBBlogParts.permalinkAttribute = 'href'; <!--permanent_area--> HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; <!--/permanent_area--> <!--not_permanent_area--> HBBlogParts.listPageCommentLimit = 3; <!--/not_permanent_area--> </script> <!--/not_edit_area--><!--/not_titlelist_area-->
</body>
個別ページのみ表示する場合は、手順１の（ア）を選択し <!--permanent_area--> と <!--/permanent_area--> で上記のコード全体を挟みます。
次に設定箇所2を指定します。方法は設置箇所2の指定をご覧ください。
そして記事を書くときに、表示させたい箇所に以下のコードを入れます。
記事テキスト
<p style="display:none;" class="hatena-bookmark-marker">はてなブックマークコメント</p>
個別ページのみ表示する場合は、追記の編集欄に上記コードを書くとよいでしょう。手順１の（ア）や <!--permanent_area--> で先のコードを挟んでいる場合は追記に書く必要はありません。
サイドバー（プラグイン）設置
まず手順１の（ア）を行います。
次に手順２の（Ａ）～（Ｄ）のいずれかをサイドバーに貼り付けます。ここでは（Ａ）を貼り付けることとします。
設置方法は次のうちいずれかを選択します。ただ単に入れると、ブログパーツとテンプレートがどうしても合わない場合があります。そのときは（イ）～（エ）を選びます。（ウ）以外は簡単です。
（ア）そのままサイドバーに設置
サイドバーの途中にコメントがあると見難いので（記事の長さがコメント表示箇所まで達していないケースなど）、サイドバーの先頭に表示させます。
テンプレートにもよりますが、候補としては次の箇所が挙げられます。
<!--permanent_area--> <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--> <!--plugin_first-->
<!--plugin_first--> の直前に入れます。サイドバーがプラグイン1から始まる場合に有効です。サイドバーがプラグイン2から始まる場合は <!--plugin_second--> の直前に入れます。プラグイン3は <!--plugin_third--> です。
縦に並んだプラグイン1と2のあいだに入れる場合は、<!--/plugin_first--> の直後、または <!--plugin_second--> の直前に入れます。各プラグインブロックの内側には入れてはいけません。
そしてスタイルシート欄にデザインＡ～Ｃいずれかの（枠あり）サイドバー向けコードを入れて完成です。文字サイズなどはスタイルシートで調整します。
（イ）他のプラグインの中に入れる
ここではコメントプラグインと一緒に表示させることとします。別のプラグインとあわせて表示させる場合も同様の変更を加えます。
[プラグインの設定]→最新コメントのプラグインの[設定:詳細]→【HTMLの編集】
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
</ul> の後（プラグインHTMLの末尾）に手順２の（Ａ）を入れます。
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
<!--permanent_area-->
<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-->
そしてスタイルシート欄にデザインＢまたはＣの枠なし サイドバー向けコードを入れると、個別ページのとき、コメントプラグインに『はてなブックマークコメント』が表示されます。
（ウ）他のプラグインと同じデザインで表示させる
ここではプラグイン1と同じデザインで表示させることとします。（イ）と違い、『はてなブックマークコメント』を分離して表示させることができます。
最初に <!--plugin_first--> で囲まれている部分をコピーして <!--plugin_first--> の直前に貼り付けます（コードはテンプレートによって異なります）。
←ここにコピー <!--plugin_first--> <h3 class="plg-title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3> <div class="plg_body" style="text-align:<%plugin_first_align>"> <!--plugin_first_description--><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p><!--/plugin_first_description--> <%plugin_first_content> <!--plugin_first_description2--><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p><!--/plugin_first_description2--> </div> <!--/plugin_first-->
移動させるのではなくコピーであることに注意してください。プラグイン2であれば、<!--plugin_second--> で挟まれた部分をコピーします。
<h3 class="plg-title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3> <div class="plg_body" style="text-align:<%plugin_first_align>"> <!--plugin_first_description--><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p><!--/plugin_first_description--> <%plugin_first_content> <!--plugin_first_description2--><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p><!--/plugin_first_description2--> </div> <!--plugin_first-->
次に <%plugin_first_description> とそれを挟んでいる親要素を削除します。<!--plugin_first_description--> があれば、それも削除します。以下の赤字部分がこれに該当します。 <%plugin_first_description> 自体がない場合もあります。
<h3 class="plg-title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3> <div class="plg_body" style="text-align:<%plugin_first_align>"> <!--plugin_first_description--><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p><!--/plugin_first_description--> <%plugin_first_content> <!--plugin_first_description2--><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p><!--/plugin_first_description2--> </div> <!--plugin_first-->
すると次のようになります。残すのは <%plugin_first_title> のブロックと <%plugin_first_content> を挟むブロックのみです（この例にはありませんが、さらにその二つを挟むブロックがあればそれも残します）。
<h3 class="plg-title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3> <div class="plg_body" style="text-align:<%plugin_first_align>"> <%plugin_first_content> </div> <!--plugin_first-->
<%plugin_first_title> にはブログパーツのタイトルを入れます。ここでは『はてなブックマークコメント』にします。<%plugin_first_talign> でタイトルの寄せ方を指定します。タイトルを左寄せにするなら left 中央寄せなら center 右寄せなら right を入れます。ここでは左寄せにします。style="text-align:<%plugin_first_align>" は削除します。どちらのstyleもない場合はそのままで構いません。
<h3 class="plg-title" style="text-align:left">はてなブックマークコメント</h3> <div class="plg_body"> <%plugin_first_content> </div> <!--plugin_first-->
そして <%plugin_first_content> を手順２の（Ａ）に書き換えます。このとき <!--permanent_area--> はブロックの先頭と末尾に移動させます。
<!--permanent_area--> <h3 class="plg-title" style="text-align:left">はてなブックマークコメント</h3> <div class="plg_body"> <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> </div> <!--/permanent_area--> <!--plugin_first-->
そしてスタイルシート欄にデザインＢまたはＣの枠なし サイドバー向けコードを入れると、他のプラグインと違和感なく表示されます。
例としてもうひとつあげておきます。
別テンプレートの場合
<!--plugin_first--> <dl class="sidemenu_body"> <dt class="plg_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></dt> <!--plugin_first_description--><dd class="plg_header" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></dd><!--/plugin_first_description--> <dd class="plg_body" style="text-align:<%plugin_first_align>"><%plugin_first_content></dd> <!--plugin_first_description2--><dd class="plg_footer" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></dd><!--/plugin_first_description2--> </dl> <!--/plugin_first-->
挟んでる部分をコピーして、直前に貼り付け。
<dl class="sidemenu_body"> <dt class="plg_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></dt> <!--plugin_first_description--><dd class="plg_header" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></dd><!--/plugin_first_description--> <dd class="plg_body" style="text-align:<%plugin_first_align>"><%plugin_first_content></dd> <!--plugin_first_description2--><dd class="plg_footer" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></dd><!--/plugin_first_description2--> </dl> <!--plugin_first-->
<%plugin_first_description> とそれを挟んでいる親要素を削除。<!--plugin_first_description--> も削除。
<dl class="sidemenu_body"> <dt class="plg_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></dt> <!--plugin_first_description--><dd class="plg_header" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></dd><!--/plugin_first_description--> <dd class="plg_body" style="text-align:<%plugin_first_align>"><%plugin_first_content></dd> <!--plugin_first_description2--><dd class="plg_footer" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></dd><!--/plugin_first_description2--> </dl> <!--plugin_first-->
残すのは <%plugin_first_title> のブロックと <%plugin_first_content> を挟むブロック、それらをさらに挟むdl要素。
<dl class="sidemenu_body"> <dt class="plg_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></dt> <dd class="plg_body" style="text-align:<%plugin_first_align>"><%plugin_first_content></dd> </dl> <!--plugin_first-->
<%plugin_first_title> にタイトル。左寄せ。style="text-align:<%plugin_first_align>" は削除。
<dl class="sidemenu_body"> <dt class="plg_title" style="text-align:left">はてなブックマークコメント</dt> <dd class="plg_body"><%plugin_first_content></dd> </dl> <!--plugin_first-->
<%plugin_first_content> を手順２の（Ａ）に書き換え。<!--permanent_area--> はブロックの先頭と末尾に移動。
<!--permanent_area--> <dl class="sidemenu_body"> <dt class="plg_title" style="text-align:left">はてなブックマークコメント</dt> <dd class="plg_body"> <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> </dd> </dl> <!--/permanent_area--> <!--plugin_first-->
そしてスタイルシート欄にデザインＢまたはＣの枠なし サイドバー向けコードを入れる。
（エ）完全にプラグインとして入れる
『はてなブックマークコメント』をプラグインとして組み込みます。
[プラグインの設定]→公式プラグインの追加→フリーエリア追加
タイトルは『はてなブックマークコメント』とします。[フリーエリア内容の変更]に以下のコードを入れて、[追加]をクリックします。
<p style="display:none;" class="hatena-bookmark-marker" id="HBpermaURI"><a href="<%url><!--permanent_area-->blog-entry-<%pno>.html<!--/permanent_area-->">bookmark-marker</a></p>
<script type="text/javascript">
<!--not_permanent_area-->
HBBlogParts.permalinkURI = '<%url>';
HBFComment = document.getElementById('HBpermaURI').childNodes[0];
HBFComment.href = HBBlogParts.permalinkURI;
HBFComment.innerHTML = '<%blog_name>';
HBFComment.parentNode.style.display = 'none';
HBBlogParts.permalinkPathRegexp = /blog\d+\.fc2\.com/;
HBBlogParts.listPageCommentLimit = 5;
<!--/not_permanent_area-->
<!--permanent_area-->
HBBlogParts.permalinkCommentLimit = 5;
HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit;
HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/;
<!--/permanent_area-->
HBBlogParts.insertPosition = 'after';
HBBlogParts.commentInsertSelector = 'p.hatena-bookmark-marker';
HBBlogParts.permalinkSelector = 'p.hatena-bookmark-marker a';
HBBlogParts.permalinkAttribute = 'href';
</script>
そして使用しているテンプレートのスタイルシート欄にデザインＢまたはＣの枠なし サイドバー向けコードを入れて完成です。
個別ページではそのページのブックマークコメントが表示され、それ以外のページではトップページ（http://id.blog123.fc2.com/）のブックマークコメントが表示されます。
コメントの表示件数を変更するときは 5 の数値を増減させます。
'none' を 'block' に変更すれば、ブログタイトルがブクマ数の前に表示されます。
それ以外のページで表示するブックマークコメントのページは変更が可能です。変更するときは HBBlogParts.permalinkURI に表示したいURIを入れます。
初期値は <%url> です。これはトップページ（http://id.blog123.fc2.com/）を出力します。例えば、 http://id.blog123.fc2.com/blog-entry-53.html の記事のコメントを表示させたいときは次のようにします。
HBBlogParts.permalinkURI = '<%url>blog-entry-53.html';
記事番号が122のページのコメントを表示したいのであれば、53を122に変更します。
ただし、このままだと記事のタイトルが表示されないので何のページのコメントかわかりません。そこでタイトルを指定します。
<%blog_name> に記事のタイトルを入れ、'none' を 'block' に変更します。
HBFComment.innerHTML = '記事タイトル'; HBFComment.parentNode.style.display = 'block';
これで記事タイトルがリンク付きで表示されるようになります。
HBBlogParts.permalinkURI には他所のウェブサイトも指定できます。つまり、他所の記事のブックマークコメントを表示できるのです。FC2ブログサイトで次のように指定すると、Paroday『覚えておきたい漢字の筆順（書き順）』のブックマークが表示されます。
HBBlogParts.permalinkURI = 'http://paro2day.blog122.fc2.com/blog-entry-327.html'; HBFComment.innerHTML = '覚えておきたい漢字の筆順（書き順）';
他所のサイトのブックマークコメント表示
設置箇所のコード。HBBlogParts.permalinkSelector で取得するパーマリンクに表示したいウェブサイトのURIを指定し、そのサイトにマッチする正規表現を指定します。ここではどのサイトでも設置できるように「^http」とします。
<p style="display:block;" class="hatena-bookmark-marker"><a href="表示したいウェブサイトURI" target="_blank">表示したいウェブサイトのタイトル</a></p>
HBBlogParts.permalinkPathRegexp = /^http/;
（例）Paroday『覚えておきたい漢字の筆順（書き順）』のブックマークコメントを表示。
</head> の前（head要素内）に以下のコードを貼り付けます。
<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script> <script type="text/javascript"> HBBlogParts.permalinkPathRegexp = /^http/; HBBlogParts.commentInsertSelector = 'p.hatena-bookmark-marker'; HBBlogParts.insertPosition = 'after'; HBBlogParts.permalinkSelector = 'p.hatena-bookmark-marker a'; HBBlogParts.permalinkAttribute = 'href'; HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = 5; </script>
表示したい箇所に以下のコードを貼り付けます。
<p style="display:block;" class="hatena-bookmark-marker"><a href="http://paro2day.blog122.fc2.com/blog-entry-327.html" target="_blank">覚えておきたい漢字の筆順（書き順） - Paroday</a></p>
複数設置することも可能です。
<p style="display:block;" class="hatena-bookmark-marker"><a href="http://d.hatena.ne.jp/hatenadiary/20091225/1261711314" target="_blank">はてなブックマークのコメントをはてなダイアリーに表示できる機能をリリースしました</a></p>
CSSデザインサンプル
スタイルシート欄に入れて使用します。
サイトのデザインによって変更が必要そうなセレクタ、プロパティを抜き出しています。基本的に !important がついていないものはデフォルトの設定です。必要なければ削除してください。必要であれば、!importantをつけて設定します。
全体の背景色・文字サイズ、横幅などは /* main */ で指定します。全体を寄せるときはmargin で調整します。必要であれば、width も指定するとよいでしょう。
セレクタは表示順に並べています。
サイドバー向けは /* main */ の文字サイズを 11px としています。
デザインＡ（上書き指定、デフォルト）
デフォルトと同じデザインです。変更が必要そうな箇所のみ抜き出しています。好みに合わせて背景色などを変更します。
/* Design A デフォルト */
/* Design A 背景黒 */
/* Design A デフォルト サイドバー用 */
サイドバーの横幅を考慮して、見出しの『はてなブックマークでのコメント』を非表示。:before で『はてブコメント』を見出しとして挿入しています（※IE7以下では表示されません）。
デザインＢ（上書き指定、users）
:after で『users』を加えています（※IE7以下では表示されません）。枠や背景はありません。
/* Design B 枠なし */
/* Design B 枠なし サイドバー向け */
見出しの『はてなブックマークでのコメント』を非表示にして、:after で『users』を加えています（※IE7以下では表示されません）。赤いブックマーク数値が見出しになります。枠や背景がないのでサイドバーに馴染みやすくなっています。
デザインＣ（上書き指定）
/* DesignC 枠なし */
/* Design C 枠あり */
/* DesignC 枠なし サイドバー向け */
/* DesignC 枠あり サイドバー向け */
個別ページのみデザインを変更する - FC2ブログ
表示したい箇所の要素を <!--permanent_area--><div class="HFBookmark"><!--/permanent_area--> と <!--permanent_area--></div><!--/permanent_area--> で挟みます。
<!--permanent_area--><div class="HFBookmark"><!--/permanent_area--> <p style="display:none;" class="hatena-bookmark-marker"><%url>blog-entry-<%pno>.html</p> <!--permanent_area--></div><!--/permanent_area-->
手順２の（ア）であれば次のようになります。すでに <!--permanent_area--> で挟まれているので div のみで挟みます。
<!--permanent_area--> <div class="HFBookmark"> <p style="display:none;" class="hatena-bookmark-marker"><%url>blog-entry-<%pno>.html</p> </div> <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-->
手順２の（イ）であれば次のようになります。
<!--permanent_area--><div class="HFBookmark"><!--/permanent_area--> <p style="display:none;" class="hatena-bookmark-marker"><%topentry_link></p> <!--permanent_area--></div><!--/permanent_area-->
そしてデザインを変えたいセレクタに div.HFBookmark をつけてスタイルシートに貼り付けます。次のコードを貼り付けると、個別ページのみ文字サイズが 82% になります。他の設定についても同様です。
div.HFBookmark #hatena-bookmark-container {
font-size: 82% !important; /* 文字サイズ */
}
各種設定
<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.Design = ['u','t','c','d','s']; //表示項目 HBBlogParts.useUserCSS = false; //スタイルシート設定 HBBlogParts.permalinkCommentLimit = 7; //コメント表示件数 HBBlogParts.listPageCommentLimit = 5; //コメント表示件数 </script>
コメントの表示件数の変更
コメントの表示件数を変更するときは次の二行で変更します。ない場合は <script type="text/javascript"> 内に追加します。数値を変えるとコメント表示件数が増減します。
HBBlogParts.permalinkCommentLimit = 7; HBBlogParts.listPageCommentLimit = 5;
permalink は１ページに一つの記事しかない個別ページでのコメント件数。listPage は１ページに複数の記事があり、各記事にコメントを表示する際のコメント件数です（設定の仕方によって異なります）。
FC2ブログではパーマリンクが複数あるため、ページごとに設定します。個別ページに設置する場合は listPage に HBBlogParts.permalinkCommentLimit を入れます。
HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit;
また、トップページなどの各記事に設置する場合は <!--not_permanent_area--> で挟まれた listPage で表示件数を指定するようにします。
<!--permanent_area--> HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; <!--/permanent_area--> <!--not_permanent_area--> HBBlogParts.listPageCommentLimit = 3; //変更箇所 <!--/not_permanent_area-->
表示項目の変更
デフォルトでは ユーザーID（'u'）、タグ（'t'）、コメント本文（'c'）、日付（'d'）、はてなスター（'s'） の順で表示されます。変更するときは次の行で変更します。ない場合は <script type="text/javascript"> 内に追加します。
HBBlogParts.Design = ['u','t','c','d','s'];
例えば、タグとコメント本文の順番を入替えて、はてなスターを非表示にする場合は以下のように指定します。不要なもの（'s'）は削除します。
HBBlogParts.Design = ['u','c','t','d'];
スタイルシートの読み込み
はてなが用意したスタイルシートを適用せずに自分でデザインする場合は次の行を変更します。ない場合は <script type="text/javascript"> 内に追加します。「true」にするとはてなのスタイルが無効になります。行を削除するか「false」に変更することで有効になります。
HBBlogParts.useUserCSS = true;
はてなのスタイルシートはどのサイトでもきちんと表示されるようにリセットしてくれていると信じています。
補足
読み込まれるファイル
- http://b.hatena.ne.jp/css/blogparts/basic.css
- http://b.hatena.ne.jp/js/bookmark_blogparts.js
- http://b.hatena.ne.jp/entry/jsonlite/?url=***&callback=HBBlogParts.catchJSON
- http://s.hatena.ne.jp/js/HatenaStar.js
- http://s.hatena.ne.jp/entries.json?uri=***×tamp=1&callback=Ten.JSONP.callback
style="display:none;" をなくす
style属性を削除して、hatena-bookmark-markerをスタイルシートで非表示とします。
個別ページ設置の場合 <p class="hatena-bookmark-marker"><%url>blog-entry-<%pno>.html</p>
トップページ各記事設置の場合 <p class="hatena-bookmark-marker"><%topentry_link></p>
以下をスタイルシートに貼り付けます。
.hatena-bookmark-marker {
display: none;
}
うまく設置できない場合 - FC2ブログ
下記２つのscript要素はセットです。片方が出力されているのに、もう片方が出力されていないとエラーになります。例えば、手順１の（ア）で個別ページのみ出力しているのに、手順２の（イ）トップページなどの各記事にも出力するようにしているとエラーが起こります。
<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'; HBBlogParts.permalinkSelector = 'div.hatena-bookmark-marker a'; HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/; HBBlogParts.permalinkAttribute = 'href'; <!--permanent_area--> HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; <!--/permanent_area--> <!--not_permanent_area--> HBBlogParts.listPageCommentLimit = 3; <!--/not_permanent_area--> </script>
次の設置箇所部分の要素については、出力されていてもされていなくてもエラーは起こりません。動作するかしないかは別の問題です。
<p style="display:none;" class="hatena-bookmark-marker"><%url>blog-entry-<%pno>.html</p>
貼り付け方について - はてなのFC2ブログ簡単な設置方法
FC2ブログはテンプレートの編集が自由にできます。はてなダイアリーのように特に構造が決まっているわけではありません。また、公式テンプレートもテンプレートによってマークアップの仕方やクラス名が異なります。そのため、挿入する位置を適当なセレクタで指定するとデザインが壊れる恐れがあります。
パーマリンクを相対パスで指定している場合や個別ページにパーマリンクの出力がない場合もあります。適当なセレクタで指定すると期待していないものを引っ張ってくるかもしれません。
FC2ブログのパーマリンクは一つではありません。「?no=x」「&no=x」がそうです。個別ページでは CommentLimit の両方を指定した方がよいかもしれません。HBBlogParts.permalinkURI は少し扱いづらいかもしれません。
セレクタ設置、挿入位置の第二候補に '.fc2_footer' があります。これはFC2ブログ拍手・ブックマークを利用する場合にだけ挿入される要素です。
<%topentry_link> は <!--topentry--> ～ <!--/topentry--> 内でしか有効になりません。例えば、個別ページで次のような構造の場合、Aに設置できてもB、C、Dには設置できません。
<!--topentry--> 記事ブロック ←A <!--/topentry--> ←B <!--comment_area--> コメントブロック ←C <!--/comment_area--> ←D
<!--/topentry--> の位置をDの後ろまでずらせば、有効になりますが、テンプレートによっては支障がでる場合があります。そこで個別ページで有効になる記事番号変数 <%pno> を使ってパーマリンクを作成します。<%pno> は個別ページ以外では出力されません。
トップページなどでは各記事に表示することになるので、<%topentry_no> を使い、個別ページでは <%pno> を使ってどこでもパーマリンクが出力されるようにします。最終的なパーマリンクは次のようになります。
<%url>blog-entry-<!--not_permanent_area--><%topentry_no><!--/not_permanent_area--><%pno>.html
ある程度の知識をもった人なら、それぞれのSelectorに一つのセレクタを指定するでしょう。簡単な設置方法は、初心者でも簡単に取り付け取り外しが可能であることが望まれます。
貼り付け方の例（はてな準拠）
</head> の前（head要素内）に次のコードを貼り付けます。
<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'; HBBlogParts.permalinkSelector = 'div.hatena-bookmark-marker a'; HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/; HBBlogParts.permalinkAttribute = 'href'; <!--permanent_area--> HBBlogParts.permalinkCommentLimit = 5; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; <!--/permanent_area--> <!--not_permanent_area--> HBBlogParts.listPageCommentLimit = 3; <!--/not_permanent_area--> </script>
はてなブックマークコメントを表示したい位置に次のコードを貼り付けます。<!--topentry-->内に貼り付けると各記事に表示されます。
<div class="hatena-bookmark-marker"><a style="display:none;" href="<%url>blog-entry-<!--not_permanent_area--><%topentry_no><!--/not_permanent_area--><%pno>.html"></a></div>
表示したい位置のコードを貼り付けなくても、はてなブックマークのコメントを表示させることができます。詳しいドキュメントははてなブックマークコメント表示ブログパーツをご覧ください。また、デザインのカスタマイズについては、はてなブックマークコメント表示ブログパーツ・デザイン設定をご覧ください。
確認事項 : いくつかのプロパティが反映されないときがある
- 対象ブラウザ : IE6（7,8？）、Chrome、Safari(Win)
-
jsファイル読み込みのすぐ後に以下のプロパティを指定しても適用されない。
HBBlogParts.permalinkCommentLimit HBBlogParts.listPageCommentLimit HBBlogParts.useUserCSS HBBlogParts.useCanonicalizedURI
貼り付け方で紹介されているようなまとめ貼りがこれに該当する。
<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'; HBBlogParts.permalinkSelector = 'div.hatena-bookmark-marker'; HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/; HBBlogParts.permalinkAttribute = 'href'; HBBlogParts.Design = ['u','t','c','d']; HBBlogParts.useUserCSS = true; HBBlogParts.permalinkCommentLimit = 7; HBBlogParts.listPageCommentLimit = 5; HBBlogParts.useCanonicalizedURI = false; </script>
読み込みと距離を置いたところで指定すれば適用される。ファイルの読み込みが終わらないとダメ？ マシンスペック？ FirefoxとOperaは問題ない。
<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script> </head> <body> ・ ・ ・ <script type="text/javascript"> HBBlogParts.commentInsertSelector = 'div.hatena-bookmark-marker'; HBBlogParts.permalinkSelector = 'div.hatena-bookmark-marker'; HBBlogParts.permalinkPathRegexp = /blog-entry-\d+\.html$/; HBBlogParts.permalinkAttribute = 'href'; HBBlogParts.Design = ['u','t','c','d']; HBBlogParts.useUserCSS = true; HBBlogParts.permalinkCommentLimit = 7; HBBlogParts.listPageCommentLimit = 5; HBBlogParts.useCanonicalizedURI = false; </script>
HBBlogParts.listPageCommentLimit = 7;FirefoxやOperaでは7件表示されるが、IE6やChromeではデフォルトの3件しか表示されない。>>確認ページ
コメントの表示件数などが指定できない場合の対策
- ■FC2ブログ以外
</body> の前付近（必ず表示される箇所でできるだけ後の方）に以下を貼り付けます。
<script type="text/javascript"> HBBlogParts.permalinkCommentLimit = 7; HBBlogParts.listPageCommentLimit = 5; </script>
- ■FC2ブログの場合
</body> の前付近（必ず表示される箇所でできるだけ後の方）に以下を貼り付けます。<%ad><%ad2> より後に設置することが望まれます。
個別ページのみで表示させている場合（手順１（ア））は次のコードを貼り付けます。
<!--permanent_area--> <script type="text/javascript"> HBBlogParts.permalinkCommentLimit = 7; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; </script> <!--permanent_area-->
トップページなどでも表示させている場合（手順１（イ））は次のコードを貼り付けます。
<!--not_titlelist_area--><!--not_edit_area--> <script type="text/javascript"> <!--permanent_area--> HBBlogParts.permalinkCommentLimit = 7; HBBlogParts.listPageCommentLimit = HBBlogParts.permalinkCommentLimit; <!--/permanent_area--> <!--not_permanent_area--> HBBlogParts.listPageCommentLimit = 5; <!--/not_permanent_area--> </script> <!--/not_edit_area--><!--/not_titlelist_area-->
■その他の設定が反映されない場合も最下部付近で指定します。
HBBlogParts.Design = ['u','t','c','d']; HBBlogParts.useUserCSS = true; HBBlogParts.useCanonicalizedURI = false;
読者投稿
各サービスの設置方法を紹介するところにはてなの優しさと哀れみを感じます。
『はてなブックマークのコメントが挿入される位置の基準となるDOM Element』と言われても意味がわかりません。
ザクの目がプラスの方だよ。
DOMの目玉って垂直に動くの？
いろんなページにはてなブックマークコメントがしゃしゃりでてきて不快です。
なんか重い。地味にアイコンの読み込みがつらい。
これが そうか
この掌にあるものが
コメントか
これは俺宛のコメントなのか？ 他の誰かに向けてメッセージを発しているような違和感がする。
と思ったら、俺のブログも宛先のないメッセージばかりだった。
コメントと呼べるようなものがない。
ブクマする側はメモ感覚ですから。
このブログパーツを利用するようになってから、どの記事にも必ずブックマークがつくようになった。どのコメントにも「self」って書いてあるけど。
コメントを自らのサイトに取り込むことはブクマする側に何らかの変化を与えるだろうか。
意識はするだろう。このブログパーツが設置されることで、コメントがつかなくなったりついたりすることもあるだろう。だが、このブログパーツの真の目的はそんなものではない。ブックマークごとに公開設定ができる有料プラン『はてなブックマークプラス』への加入を促しているのだ！
常に自分のブコメを上位に表示させるために追加と削除が繰り返されます。
むしろ最初にブクマつけた人が重要だから、古い日付順で。
「先着100名様」みたいな上限を設定できて、それ以上はブクマできない。みたいな。
はてな市民になれば上限を超えてブクマできます。
有料プランに加入すれば上限を超えてブクマできます。
セルフブックマークですか？ しようとは思いませんね。僕は自作自演が大嫌いなんですよ。
- 【関連記事】
- 江頭2:50 - 1965年7月1日生まれ。身長178cm、体重60kg。B87 W73 H93。
- 【更新履歴】
- 2010 01-23 00:12 手順２の（Ｃ）を修正 'p.hatena-bookmark-marker'
- comment
コメント
トラックバック
https://paro2day.blog.fc2.com/tb.php/517-2b4a8feb
- trackback
はてなブックマークコメントを表示する - 『映画な日々』 cinema-days
これまでも､コメント欄にＳＮＳを表示する方法を導入してきた｡ □ Twitter → 「twitterer anywhere」を使用 □ Facebook → Facebook の気になる使い方 今回は､はてなブックマークのコメントを表示してみ... 2011.05.29