はてブのコメント欄を埋め込むブログパーツ
ブログのエントリーについたブックマークコメントを表示するブログパーツです。
エントリーへの反響を知る事ができるだけでなく、気軽なコメント欄としてもお使い頂けます。
Blogger
管理画面から 『 レイアウト > ページ要素 』 とメニューをたどり、ガジェットの追加を選択します。ガジェットのリストにある "HTML/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.post-footer';
HBBlogParts.permalinkSelector = 'div.post h3 a';
HBBlogParts.permalinkPathRegexp = /\/\d{4}\/\d{2}\/.+\.html$/;
HBBlogParts.permalinkAttribute = 'href';
</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', '.posted'];
HBBlogParts.permalinkSelector = ['div.hatena-bookmark-marker a', 'div.blogbody h3 a'];
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /\/article\/\d+\.html$/;
</script>
上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。
管理画面から 『デザイン > HTML』 とメニューをたどります。HTMLの追加 を選択し、テキストエリアでコメントを表示したい位置に下記コードを貼り付けて保存してください。
<div class="hatena-bookmark-marker" ><a style="display:none;" href="<% article.page_url %>"></a></div>
忍者ブログ
BLOG管理ページから 『 プラグインの設定 > プラグインの追加 』 とメニューをたどり、フリーエリアの "追加" を選択します。その後、プラグインの編集 をクリックするとリストに フリーエリア が存在しますので "HTML編集" をクリックします。編集画面が現れるので、下記コードを入力して保存してください。
<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.entryText'];
HBBlogParts.permalinkSelector = ['div.hatena-bookmark-marker a', 'h2.entryTitle a'];
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /\/Entry\/\d+/;
</script>
上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。
管理画面から 『テンプレートの設定/編集』 を選択します。使用中のテンプレートの修正リンクをクリックするとテンプレートの編集画面に移動します。HTMLの編集テキストエリアで下記コードを貼り付けて保存してください。
<div class="hatena-bookmark-marker" ><a style="display:none;" href="<!--$entry_link-->"></a></div>
ヤプログ
ヤプログ！ホームから 『 サイドバー > 機能追加 』 とメニューをだ取って、 新規追加 をクリックします。編集画面が現れますので名前を入力した上で下記コードを貼り付けて保存してください。その後、サイドバー編集メニューの 機能選択並び替え から作った機能を使用する機能の欄にドラッグアンドドロップしてください。
<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>
<script type="text/javascript">HBBlogParts.permalinkCommentInsertSelector = [ 'div.hatena-bookmark-marker', 'div.ext', 'div.posted', 'ul.txt_page', 'div.entry_posted', 'ul.link', 'div.cl'];
HBBlogParts.commentInsertSelector = [ 'div.hatena-bookmark-marker a', 'ul.txt_page', 'div.posted', 'div.entry_posted', 'div.cl' ];
HBBlogParts.permalinkSelector = [ 'div > h3 > a:first-child', '.txt_page li:nth-child(2) a', '.posted a', '.posted a:last-child', 'div.entry_posted a:first-child', 'ul.link a' ];
HBBlogParts.permalinkPathRegexp = /\/archive\/\d+$/;
HBBlogParts.permalinkAttribute = 'href';
</script>
上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。
管理画面から、『スキン > フリーススキン編集』 とメニューをたどります。メインテンプレート、アーカイブテンプレートのそれぞれで、はてなブックマークのコメントを表示したい位置に下記コードを貼り付けて保存してください。
<div class="hatena-bookmark-marker" ><a style="display:none;" href="{$BlogEntryPermalinkUrl$}"></a></div>
JUGEM
管理画面から 『 デザイン > サイドバー編集 > フリースペース 』 とメニューをたどります。フリースペースリストの一覧にある "編集" リンクをクリックします。編集画面が現れるので "名前" 欄を入力し、下記コードを貼り付けます。その後、"公開非公開" 設定で "公開" を選択して保存してください。
<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', '.entry_state', '.entryState', '.state', '.kiji-bottom' ] ;
HBBlogParts.permalinkSelector = [ 'div.hatena-bookmark-marker a', '.state a','.entry_state a:nth-child(2)', '.entryState a:nth-child(2)', '.state a:nth-child(2)','.kiji-bottom a' ] ;
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /jugem.jp\/\?eid=\d+/;
</script>
上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。
管理者ページから、『デザイン > HTML・CSS編集』 とメニューをたどります。HTML編集のテキストエリアで、はてなブックマークのコメントを表示したい位置に下記コードを貼り付けて保存してください。
<div class="hatena-bookmark-marker" ><a style="display:none;" href="{entry_permalink}"></a></div>
コメント
コメントを投稿