自分のブログに「○○users」を表示する

自分のブログに被ブックマーク数を表示する

ブックマーク数を画像で取得するAPIを利用して、自分のサイトやブログでエントリーがブックマークされた数を表示させることができます。あなたの書いたエントリーについてのコメントを一覧したり、ブックマークしてもらうためのナビゲーションとしてお使いください。

このページでは、このブックマーク数を画像で取得するAPIを利用して、各ブログサービスで被ブックマーク数を表示させる方法を紹介しています。

• Blogger
• ココログプロ
• FC2 BLOG
• gooブログアドバンス
• JUGEM･ロリポブログ
• livedoor Blog
• Movable Type
• 忍者ブログ
• Seesaa Blog
• ヤプログ！

Blogger

1. 「テンプレート」タブから「現在の内容を編集」欄の <!-- Begin #main --> と <!-- End .post --> に囲まれた以下の部分を次のように編集します。

  ...

  </BlogItemCommentsEnabled></MainOrArchivePage>  <$BlogItemControl$>

  </p>

  ...

  

ã‚’

  ...

  </BlogItemCommentsEnabled></MainOrArchivePage>  <$BlogItemControl$>

  

 <a href="https://b.hatena.ne.jp/entry/<$BlogItemPermalinkUrl$>">

 <img src="https://b.hatena.ne.jp/entry/image/<$BlogItemPermalinkUrl$>"

 alt="はてなブックマーク - <$BlogItemTitle$>" title="はてなブックマーク - <$BlogItemTitle$>">

 </a>

    

  </p>

  ...

  

のように記述して保存してください。

※実際には改行をいれずに一行で記述してください。

ココログプロ

1. 「Main Index」と「Individual Archives」のテンプレートを以下のように編集します。

  ...

  </MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">固定リンク</a>

  </p>

  ...

  

ã‚’

  ...

  </MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">固定リンク</a>

  

  <a href="https://b.hatena.ne.jp/entry/<$MTEntryPermalink>">

  <img src="https://b.hatena.ne.jp/entry/image/<$MTEntryPermalink>"

 alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>">
  </a>

	

  </p>

  ...

  

のように記述して保存してください。

※実際には改行をいれずに一行で記述してください。

※「Individual Archives」も、手順は「Main Index」の場合とほとんど一緒です。

FC2 BLOG

1. 「テンプレートの設定＞修正」から「HTMLの編集」を以下のように編集します。(「default」テンプレートの場合)

  ...

  <!--deny_comment-->コメント(-)<!--/deny_comment-->

  </li>

  ...

  

ã‚’

  ...

  <!--deny_comment-->コメント(-)<!--/deny_comment-->

  </li>

  

  <li>

  |<a href="https://b.hatena.ne.jp/entry/<%topentry_link>">

  <img src="https://b.hatena.ne.jp/entry/image/<%topentry_link>"

 alt="はてなブックマーク - <%topentry_title>" title="はてなブックマーク - <%topentry_title>">

  </a>

	

  </li>

  ...

  

のように記述して保存してください。

※実際には改行をいれずに一行で記述してください。

gooブログアドバンス

1. 「デザインメニュー」で「カスタムテンプレート」を選択し、「テンプレートの編集」で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="https://b.hatena.ne.jp/entry/{$entry_url[entry]}">

  <img src="https://b.hatena.ne.jp/entry/image/{$entry_url[entry]}"

 alt="はてなブックマーク - {$ename[entry]}" title="はてなブックマーク - {$ename[entry]}">

  </a>

	

  </div>

  ...

  

のように記述して保存してください。

※実際には改行をいれずに一行で記述してください。

JUGEM･ロリポブログ

1. 「テンプレートの編集」から「 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="https://b.hatena.ne.jp/entry/{entry_permalink}">
    
  <img src="https://b.hatena.ne.jp/entry/image/{entry_permalink}"

 alt="はてなブックマーク - {entry_title}" title="はてなブックマーク - {entry_title}">

	</a>

	

  </div>

  ...

  

のように記述して保存してください。

※実際には改行をいれずに一行で記述してください。

livedoor Blog

1. 「管理ページトップ＞カスタマイズ/管理」より「デザインのカスタマイズ」を選択
2. 「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」のテンプレートをそれぞれ以下のように編集します。

  ...

 <li class="article-tool-box"><$ArticleToolBox$></li>

 </ul>

  ...

  

ã‚’

  ...

 <li class="article-tool-box"><$ArticleToolBox$>

	

 <a href="https://b.hatena.ne.jp/entry/<$ArticlePermalink$>">

 <img src="画像URL" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />

 <img src="https://b.hatena.ne.jp/entry/image/<$ArticlePermalink$>"

 alt="はてなブックマーク - <$ArticleTitle ESCAPE$>" title="はてなブックマーク - <$ArticleTitle ESCAPE$>">

 </a>

	

 </li>

 </ul>

  ...

  

※「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」も、手順は「トップページ」の場合とほとんど一緒です。

※実際には改行をいれずに一行で記述してください。

Movable Type

1. 「Main Index」と「Individual Archives」(最近のバージョンでは「メインページ」、「個別エントリーアーカイブ」)のテンプレートを以下のように編集します。

  ...

  </MTEntryIfAllowPings>

  </p>

  ...

  

ã‚’

  ...

  </MTEntryIfAllowPings>

  

  <a href="https://b.hatena.ne.jp/entry/<$MTEntryPermalink$>">

  <img src="https://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>"

 alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>">
  </a>

	

  </p>

  ...

  

のように記述して保存してください。

※実際には改行をいれずに一行で記述してください。

※Individual Archives (個別エントリーアーカイブ) も、手順は Main Index の場合とほとんど一緒です。

忍者ブログ

1. BLOG管理TOPから「テンプレート設定/編集」と進み、使用したいテンプレートの「修正」をクリックします。右上に表示されるHTMLを以下のように編集します(「スタンダード」テンプレートの場合)。

  ...

  <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="https://b.hatena.ne.jp/entry/ブログのURL<!--$entry_link-->">

  <img src="https://b.hatena.ne.jp/entry/image/ブログのURL<!--$entry_link-->"

 alt="はてなブックマーク - <!--$entry_title-->" title="はてなブックマーク - <!--$entry_title-->">

 </a>

 </span>

	

  <br>

  ...

  

のように記述してください。ブログのURLの最後にはスラッシュを付けず、「http://hatena.blog.shinobi.jp」のように記述します。

※実際には改行をいれずに一行で記述してください。

1. 最後に、HTMLの下にあるCSS編集欄から「.EntryBookmark」に対して以下の指定を追加します。

  /* 「含むはてなブックマーク」ボタン */

  .EntryBookmark {

      margin-left: 5px;

  }

  

のように記述して保存して、そのテンプレートを使用するよう設定してください。

Seesaa Blog

1. 「デザイン＞コンテンツ」と進み、記事ページの設定画面に移ります。右上に表示される「コンテンツ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="https://b.hatena.ne.jp/entry/<% article.page_url %>">

  <img src="https://b.hatena.ne.jp/entry/image/<% article.page_url %>"

 alt="はてなブックマーク - <% article.subject %>" title="はてなブックマーク - <% article.subject %>">

 </a>

	

  </div>

  ...

  

のように記述して保存してください。

※実際には改行をいれずに一行で記述してください。

ブックマーク数を画像で取得するAPI

https://b.hatena.ne.jp/entry/image/エントリーのURL

という URL を指定すると、そのエントリーのブックマーク数を画像で取得することが可能です。

例えば https://hatenablog.com のブックマーク数を対象とした場合、

<img src="https://b.hatena.ne.jp/entry/image/https://hatenablog.com/">

と記述することで と画像でブックマーク数を表示することができます。これにより、任意のウェブページにブックマーク数を表示させることが可能です。

ブックマーク数を表示する画像 について、はてなブックマークではコメント一覧ページへのリンクが張られることを前提としています。

「○○ users」をクリックすることで、あるページをどのようなユーザがブックマークし、どのようなコメントを付けているのかということを、ユーザーの皆さまが統一してわかるようにしたいと考えているからです。

そのため、このAPIをご利用いただいてブックマーク数を画像表示する場合、画像にそのエントリーに関するはてなブックマークのエントリーページへのリンクをお願いいたします。たとえば https://hatenablog.com/ のはてなブックマークのエントリーページの URL は https://b.hatena.ne.jp/entry/https://hatenablog.com/ となります。

例:

<a href="https://b.hatena.ne.jp/entry/https://hatenablog.com/">

<img src="https://b.hatena.ne.jp/entry/image/https://hatenablog.com/">

</a>

※実際には改行をいれずに一行で記述してください。

画像の大きさは以下の三サイズを用意しております。

大

https://b.hatena.ne.jp/entry/image/large/エントリーのURL

中 (デフォルト)

https://b.hatena.ne.jp/entry/image/エントリーのURL

小

https://b.hatena.ne.jp/entry/image/small/エントリーのURL

なお、ブックマークされてないエントリーの場合、1x1 の透過png 画像を返します。また内部でキャッシュを利用しているため、実際のブックマーク数と画像が示すユーザ数の表示が異なる場合がございます。ご了承下さい。

「#」を含むURLのブックマーク数の画像を取得したい場合は、URIエンコードを行い「#」を「%23」に変更する必要があります。