はてなブックマークボタンを調整

先日書いた、はてなブックマークを本文中に設置する記事（URL）ですが、取得してきたコードをそのまま設置すると、個別エントリーに対するブックマークではなく、このブログ全体のブックマークになってしまうようです。それでは非常に都合が悪く困っていたところ、解決策を公開しているサイトがありましたので適用してみました。



今回参考にさせてもらったのは、こちらのサイト。
新しいはてなブックマークボタンをBloggerに貼り付ける

はてなブックマークから取得したままのコードはこちら。

<a href="http://b.hatena.ne.jp/entry/http://etotakashi.blogspot.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="ふっとぼうず" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

このコードに、exprというコードを挿入します。また、JavaScriptも一度だけ読み込むように以下のコードで挟みます。

<b:if cond='data:post.isFirstPost'>
JavaScriptコード
</b:if> 

その結果がこちら。

<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'
     class="hatena-bookmark-button"
     expr:data-hatena-bookmark-title='data:post.title + " : " + data:title'
     data-hatena-bookmark-layout="standard"
     title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
     alt="このエントリーをはてなブックマークに追加"
     width="20" height="20" style="border: none;" />
</a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</b:if>  

参考URLのコードそのままなんですけどね。ちなみに手打ちで自分で上記コードを打ちなおしたんですが「タグが閉じてないよ」とbloggerさんに注意されて先に進めなかったので、コピペしたところ問題が解決。目視では問題ないんですが、コンピューターさんは一つでも間違ってたらダメなので、自己解決できませんでした。

なお、このブックアイコンを個別記事に表示させたい場合は、上記コードを以下のタグで囲むといいようです。参考までに。

<b:if cond='data:blog.pageType == "item"'>

取得したコード

</b:if>