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

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

このページでは、このブックマーク数を画像で取得するAPIを利用して、各ブログサービスで被ブックマーク数を表示させる方法を紹介しています。 「このエントリーを含むはてなブックマーク」ボタンと並べて設置すると効果的です。

はてなダイアリー

1. ページ右上の「管理」をクリックして、管理ツールに移動する。
2. 左サイドバーの「設定」をクリック、「記事の設定」に移動する。
3. 「表示設定」の「 「このエントリーのブックマーク数」を表示する」にチェックを入れて、内容を保存してください。

   ※はてなグループの日記でも同様の設定をすることで、自分の日記に被ブックマーク数を表示させることができます。

Blogger

1. 「テンプレート」タブから「現在の内容を編集」欄の <!-- 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$>">
   </a>
   </p>
   ...
   

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

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

ココログプロ

1. 「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>">
   
   </a>
   </p>
   ...
   

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

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

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

FC2 BLOG

1. 「テンプレートの設定＞修正」から「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>">
   </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="http://b.hatena.ne.jp/entry/{$entry_url[entry]}">
   <img src="http://b.hatena.ne.jp/entry/image/{$entry_url[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="http://b.hatena.ne.jp/entry/{entry_permalink}">
   <img src="http://b.hatena.ne.jp/entry/image/{entry_permalink}"></a>
   </div>
   ...
   

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

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

livedoor Blog

1. スタンダードカテゴリ＞CUSTOMをクリックし、編集したい任意のテンプレートを選んで「HTMLテンプレート編集機能ができました！こちらのページからどうぞ。」からHTMLテンプレート編集へ移動します。
2. 「トップページ」と「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」のテンプレートをそれぞれ以下のように編集します。

   ...
   </IfArticleCategory></div>
   ...
   

   を

   ...
   </IfArticleCategory>│<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
   <img src="http://b.hatena.ne.jp/entry/image/<$ArticlePermalink$>">
   </a></div>
   ...
   

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

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

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

Movable Type

1. 「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$>">
   
   </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="http://b.hatena.ne.jp/entry/ブログのURL<!--$entry_link-->">
   <img src="http://b.hatena.ne.jp/entry/image/ブログのURL<!--$entry_link-->"></a>
   </span>
   <br>
   ...
   

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

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

2. 最後に、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="http://b.hatena.ne.jp/entry/<% article.page_url %>">
   <img src="http://b.hatena.ne.jp/entry/image/<% article.page_url %>">
   </a>
   </div>
   ...
   

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

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

ヤプログ！

1. 「スキン＞フリースキン編集」から「メインテンプレート」「アーカイブテンプレート」「１記事テンプレート」を以下のように編集します。

   ...
   <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$}">
   </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/">

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

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

大

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

中 (デフォルト)

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

小

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

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

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

• トップ
• 人気エントリー
• 注目エントリー
• ニュース
• 動画
• 商品
• 注目キーワード
• お知らせ

Copyright (C) 2005-2007 hatena. All Rights Reserved.