はてブボタンを設置しました

はてなブックマークボタンの作成・設置についてにならって、当ブログでも設置してみました。
でも、上記サイトで作成した場合、1エントリごとに作成しなければいけなくなります。

• URLに「ゆーあーるえる」、タイトルに「たいとる - chimtty.net」と入れて作成したコード

<a href="http://b.hatena.ne.jp/entry/ゆーあーるえる"
class="hatena-bookmark-button"
data-hatena-bookmark-title="たいとる - chimtty.net"
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>


上記ソースコードのherfとdata-hatena-bookmark-ltitle要素を各記事に自動的に当てはめればいいので、”expr:”を使用します。

• ”expr:”を利用して赤字部分を変更

<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>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

”expr:”内で、データに依存しない固有文字を入れる場合は、ダブルクォーテーション「""」ではさんであげればOK。タイトルの「-」の部分は、替わりに「by」とか「:」とか「|」とか好きな物を入れたりしても、入れなくてもOK。

これで終わったと思ったら、複数のエントリが同時に表示されている場合のカウント数が全て同じになってしまうそうなので、”b:if”要素を使って個別エントリ毎の表示にしました。

• ”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>

コメントアウトして作成したコードを貼り付けて保存すると、以下のように変換されました。

<!-- はてぶボタン -->

<a class='hatena-bookmark-button'

data-hatena-bookmark-layout='standard'

expr:data-hatena-bookmark-title='data:post.title + &quot; : &quot; + data:title' 

expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url'

title='このエントリーをはてなブックマークに追加'>  

<img alt='このエントリーをはてなブックマークに追加'

height='20'

src='http://b.st-hatena.com/images/entry-button/button-only.gif'

style='border: none;' width='20'/>  

</a>  

<b:if cond='data:post.isFirstPost'>  

<script async='async' charset='utf-8'

src='http://b.st-hatena.com/js/bookmark_button.js'

type='text/javascript'/>  

</b:if>

<!-- はてぶボタン --> 

各種ボタンを追加しました。のエントリでも紹介したけれど、「”」は「&quot;」に変換されます。

<div class='post-header-line-1'/>の直後くらいに追加した、Tweetボタンの後ろに追加しました。

よかったらブックマークしていってください♪

<2012/03/12追記>
はてなブックマークボタンのトラッキング問題について。にて記載したとおり、ボタンは一旦削除しています。