自分のブログに「○○users」を表示する
自分のブログに被ブックマーク数を表示する
ブックマーク数を画像で取得するAPIを利用して、自分のサイトやブログでエントリーがブックマークされた数を表示させることができます。あなたの書いたエントリーについてのコメントを一覧したり、ブックマークしてもらうためのナビゲーションとしてお使いください。
このページでは、このブックマーク数を画像で取得するAPIを利用して、各ブログサービスで被ブックマーク数を表示させる方法を紹介しています。「このエントリーをはてなブックマークに追加」アイコン(
) や 「このエントリーを含むはてなブックマーク(
)」アイコンと並べて設置すると効果的です。
はてなダイアリー
- ページ右上の「管理」をクリックして、管理ツールに移動する。
- 左サイドバーの「設定」をクリック、「記事の設定」に移動する。
- 「表示設定」の「
「このエントリーのブックマーク数」を表示する」にチェックを入れて、内容を保存してください。
※はてなグループの日記でも同様の設定をすることで、自分の日記に被ブックマーク数を表示させることができます。
Blogger
- 「テンプレート」タブから「現在の内容を編集」欄の <!-- Begin #main --> と <!-- End .post --> に囲まれた以下の部分を次のように編集します。
... </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> </p> ...
を
... </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> <a href="http://b.hatena.ne.jp/entry/<$BlogItemPermalinkUrl$>"> <img src="http://b.hatena.ne.jp/entry/image/<$BlogItemPermalinkUrl$>" alt="はてなブックマーク - <$BlogItemTitle$>" title="はてなブックマーク - <$BlogItemTitle$>"> </a> </p> ...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
ココログプロ
- 「Main Index」と「Individual Archives」のテンプレートを以下のように編集します。
... </MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">固定リンク</a> </p> ...
を
... </MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">固定リンク</a> <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink>"> <img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink>" alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>"> </a> </p> ...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
※「Individual Archives」も、手順は「Main Index」の場合とほとんど一緒です。
FC2 BLOG
- 「テンプレートの設定＞修正」から「HTMLの編集」を以下のように編集します。(「default」テンプレートの場合)
... <!--deny_comment-->コメント(-)<!--/deny_comment--> </li> ...
を
... <!--deny_comment-->コメント(-)<!--/deny_comment--> </li> <li> |<a href="http://b.hatena.ne.jp/entry/<%topentry_link>"> <img src="http://b.hatena.ne.jp/entry/image/<%topentry_link>" alt="はてなブックマーク - <%topentry_title>" title="はてなブックマーク - <%topentry_title>"> </a> </li> ...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
gooブログアドバンス
- 「デザインメニュー」で「カスタムテンプレート」を選択し、「テンプレートの編集」でHTMLの部分を以下のように編集します。
...
<span class="etTBLink">Trackback
( {include file="/home/gooblog/Smarty/blog/templates/trackback_link.tpl"} )</span> </div>
...
を
...
<span class="etTBLink">Trackback
( {include file="/home/gooblog/Smarty/blog/templates/trackback_link.tpl"} )</span>
<a href="http://b.hatena.ne.jp/entry/{$entry_url[entry]}">
<img src="http://b.hatena.ne.jp/entry/image/{$entry_url[entry]}"
alt="はてなブックマーク - {$ename[entry]}" title="はてなブックマーク - {$ename[entry]}">
</a>
</div>
...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
JUGEM･ロリポブログ
- 「テンプレートの編集」から「 HTML編集フォーム」欄を以下のように編集します。
...
<div class="entry_state">| {category_name} | {entry_time} | {comment_num} | {trackback_num}
</div>
...
を
...
<div class="entry_state">| {category_name} | {entry_time} | {comment_num} | {trackback_num}
| <a href="http://b.hatena.ne.jp/entry/{entry_permalink}">
<img src="http://b.hatena.ne.jp/entry/image/{entry_permalink}"
alt="はてなブックマーク - {entry_title}" title="はてなブックマーク - {entry_title}">
</a>
</div>
...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
livedoor Blog
- 「管理ページトップ＞カスタマイズ/管理」より「デザインのカスタマイズ」を選択
- 「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」のテンプレートをそれぞれ以下のように編集します。
... <li class="article-tool-box"><$ArticleToolBox$></li> </ul> ...
を
... <li class="article-tool-box"><$ArticleToolBox$> <a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>"> <img src="画像URL" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /> <img src="http://b.hatena.ne.jp/entry/image/<$ArticlePermalink$>" alt="はてなブックマーク - <$ArticleTitle ESCAPE$>" title="はてなブックマーク - <$ArticleTitle ESCAPE$>"> </a> </li> </ul> ...
※「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」も、手順は「トップページ」の場合とほとんど一緒です。
※実際には改行をいれずに一行で記述してください。
Movable Type
- 「Main Index」と「Individual Archives」(最近のバージョンでは「メインページ」、「個別エントリーアーカイブ」)のテンプレートを以下のように編集します。
... </MTEntryIfAllowPings> </p> ...
を
... </MTEntryIfAllowPings> <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"> <img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>"> </a> </p> ...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
※Individual Archives (個別エントリーアーカイブ) も、手順は Main Index の場合とほとんど一緒です。
忍者ブログ
- BLOG管理TOPから「テンプレート設定/編集」と進み、使用したいテンプレートの「修正」をクリックします。右上に表示されるHTMLを以下のように編集します(「スタンダード」テンプレートの場合)。
- 最後に、HTMLの下にあるCSS編集欄から「.EntryBookmark」に対して以下の指定を追加します。
... <a href="<!--$entry_link-->#comment">COMMENT[<!--$entry_comment_num-->]</a> </span> <!--/if_cm_receipt--> <br> ...
を
... <a href="<!--$entry_link-->#comment">COMMENT[<!--$entry_comment_num-->]</a> </span> <!--/if_cm_receipt--> <span class="EntryBookmark"> <img src="http://file.samurai.blog.shinobi.jp/default_entry_footer_arrow.gif"> <a href="http://b.hatena.ne.jp/entry/ブログのURL<!--$entry_link-->"> <img src="http://b.hatena.ne.jp/entry/image/ブログのURL<!--$entry_link-->" alt="はてなブックマーク - <!--$entry_title-->" title="はてなブックマーク - <!--$entry_title-->"> </a> </span> <br> ...
のように記述してください。ブログのURLの最後にはスラッシュを付けず、「http://hatena.blog.shinobi.jp」のように記述します。
※実際には改行をいれずに一行で記述してください。
/* 「含むはてなブックマーク」ボタン */
.EntryBookmark {
margin-left: 5px;
}
のように記述して保存して、そのテンプレートを使用するよう設定してください。
Seesaa Blog
- 「デザイン＞コンテンツ」と進み、記事ページの設定画面に移ります。右上に表示される「コンテンツHTML編集」というリンクから、「記事ページコンテンツ」を以下のように編集します。
... <% if:style.disp_category %>| <a href="<% article_category.page_url %>"> <% article_category.name %></a><% /if %> </div> ...
を
... <% if:style.disp_category %>| <a href="<% article_category.page_url %>"> <% article_category.name %></a><% /if %> <a href="http://b.hatena.ne.jp/entry/<% article.page_url %>"> <img src="http://b.hatena.ne.jp/entry/image/<% article.page_url %>" alt="はてなブックマーク - <% article.subject %>" title="はてなブックマーク - <% article.subject %>"> </a> </div> ...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
ヤプログ！
- 「スキン＞フリースキン編集」から「メインテンプレート」「アーカイブテンプレート」「１記事テンプレート」を以下のように編集します。
...
<BlogEntryIfAllowPings> / <a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック
({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
...
を
...
<BlogEntryIfAllowPings> / <a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック
({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings> /
<a href="http://b.hatena.ne.jp/entry/{$BlogEntryPermalinkUrl$}">
<img src="http://b.hatena.ne.jp/entry/image/{$BlogEntryPermalinkUrl$}"
alt="はてなブックマーク - {$BlogEntryTitle$}" title="はてなブックマーク - {$BlogEntryTitle$}">
</a>
...
のように記述して保存してください。
※実際には改行をいれずに一行で記述してください。
ブックマーク数を画像で取得するAPI
http://b.hatena.ne.jp/entry/image/エントリーのURL
という URL を指定すると、そのエントリーのブックマーク数を画像で取得することが可能です。
例えば http://d.hatena.ne.jp/ のブックマーク数を対象とした場合、
<img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/">
と記述することで 
ブックマーク数を表示する画像
あるページをはてなブックマークでどのようなユーザがブックマークし、どのようなコメントを付けているのか、はてなブックマーク数を現す「○○ users」をクリックするとそのリンク先にて一覧で見ることができるというユーザー体験を、はてなブックマークをご覧になる皆様に対し統一して提供していきたいと考えております。
このAPIをご利用いただいてブックマーク数を画像表示する場合、画像にそのエントリーに関するはてなブックマークのエントリーページへのリンクをお願いいたします。たとえば http://d.hatena.ne.jp/ のはてなブックマークのエントリーページの URL は http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/ となります。
例: <a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/"> <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/"> </a>
※実際には改行をいれずに一行で記述してください。
画像の大きさは以下の三サイズを用意しております。
- 大
- http://b.hatena.ne.jp/entry/image/large/エントリーのURL
- 中 (デフォルト)
- http://b.hatena.ne.jp/entry/image/エントリーのURL
- 小
- http://b.hatena.ne.jp/entry/image/small/エントリーのURL
なお、ブックマークされてないエントリーの場合、1x1 の透過png 画像を返します。また内部でキャッシュを利用しているため、実際のブックマーク数と画像が示すユーザ数の表示が異なる場合がございます。ご了承下さい。
「#」を含むURLのブックマーク数の画像を取得したい場合は、URIエンコードを行い「#」を「%23」に変更する必要があります。
はてなブックマーク
