Bloggerに、はてブボタンとはてブユーザ数を実装する方法：e-Agency ECの味方・見方

※2010/01/25

タグに間違いがあったので修正しました。すいません。。

このブログにもはてブボタンとはてブユーザ数を表示させるようにしてみました。

実装するのに少し手間取ったので、今回はBloggerに実装する方法を忘備録的に書いておきます。
Bloggerを利用する方にお役に立てましたら幸いです。

はてブボタン（Bボタン）

まずは、はてブボタンの準備から

まずは、はてブボタンをダウンロードします。
⇒

　このボタンですね。

こちらのURLをクリックすると画像が表示されますので、ローカルに保存してください。
http://d.hatena.ne.jp/images/b_entry.gif

これを、Bloggerの「投稿」からアップロードします。
投稿画面で画像の投稿をクリックし、通常ブログに投稿する時と同じようにアップロード。
右上の「HTMLの編集」をクリックし、HTML編集モードにすると、↓↓のようなタグが吐き出されているはずです。

<a href="http://draft.blogger.com/%3Cb%3Ehttp://3.bp.blogspot.com/_ar0RB7fjrW0/S10IPKxEniI/AAAAAAAAAEA/OxLH69Tw_6I/s1600-h/b_entry.png%3C/b%3E" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_ar0RB7fjrW0/S10IPKxEniI/AAAAAAAAAEA/OxLH69Tw_6I/s1600/b_entry.png" /></a>

このタグの中の

http://3.bp.blogspot.com/_ar0RB7fjrW0/S10IPKxEniI/AAAAAAAAAEA/OxLH69Tw_6I/s1600/b_entry.png

が画像のURLとなるのですが、要注意。

このURLを直接叩くと画像は見えるのですが、
if (top.location != self.location) top.location = self.location;
というJavaScriptが埋め込まれているため、そのままでは表示することができません。
ではどうするかというと、

http://3.bp.blogspot.com/_ar0RB7fjrW0/S10IPKxEniI/AAAAAAAAAEA/OxLH69Tw_6I/s1600/b_entry.png

このURLを直接ブラウザで表示させた後、ページのソースを表示させます。（ページのソースの表示のさせ方はブラウザによって違うので、割愛します。）
ソースの中に<img～～で始まるタグがあるはずです。その中にある画像へのURLが画像への直リンクURLとなります。

ちなみにこのブログでは
http://4.bp.blogspot.com/_ar0RB7fjrW0/S10IPKxEniI/AAAAAAAAAEA/OxLH69Tw_6I/s1600/b_entry.png
こんな感じ。

これで、はてブボタンの準備は整いました。次ははてブボタンの表示です。

はてブボタンを表示させる

では次にBloggerにはてブボタンを表示させてみましょう。

<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'><img src='ここに画像のURL' width='16' height='12' style='border: none;' alt='このエントリーを含むはてなブックマーク' title='このエントリーを含むはてなブックマーク' /></a>

これだけです。これを好きな場所、例えばタイトルの下などに貼り付けると

ボタンが表示されます。

ちなみに、はてブのヘルプページには

</BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$><a href="http://b.hatena.ne.jp/entry/<$BlogItemPermalinkUrl$>"><img src="アップロードした画像のURL" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>

を貼り付けるように書かれていますが、これはクラシックテンプレートの場合で、新バージョンのテンプレートタグには適用できないようですのでご注意ください。

はてブユーザの表示

こちらはすごく簡単です。↓↓こちらのタグを、表示させたい場所に埋め込んでください。

<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'><img expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' alt='"はてなブックマーク - " + data:title' title='"はてなブックマーク - " + data:title' /></a>

※2010/01/25 修正

上記のタグは間違いでした。下記が正しいタグになります。

<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'><img expr:alt='"はてなブックマーク - " + data:title' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' expr:title='"はてなブックマーク - " + data:title'/></a>

文字列にプラスしてBloggerのタグを入れる場合には属性の前に expr: が必要なのですね。

これで完了です。

ちなみにこちらも、新バージョンのテンプレートタグとなり、はてブヘルプページにある

<a href="http://b.hatena.ne.jp/entry/<$BlogItemPermalinkUrl$>"><img src="http://b.hatena.ne.jp/entry/image/<$BlogItemPermalinkUrl$>" alt="はてなブックマーク - <$BlogItemTitle$>" title="はてなブックマーク - <$BlogItemTitle$>"></a>

は、クラシックテンプレートの場合のものとなるようです。

2010/01/25