新しいはてなブックマークボタンをBloggerに貼り付ける

使いやすくなりました! はてなブックマークボタン



はてなブックマークが「いいね！」っぽいスタイルのボタンをリリースしたようです。Bloggerトップページの記事一覧に貼り付けると、表示中のページURLをそのまま適用して全記事が同じカウント数になってしまうので、記事別に対応するコードに書き換えてみました。

1. 新はてなボタンのページでブログURLとタイトルを入力し、ボタンデザインを選択してコードを取得。どうせ後で書き換えるので適当でもいいと思います。
   
   

   <a href="http://b.hatena.ne.jp/entry/http://smac.catphoto.net"
        class="hatena-bookmark-button"
        data-hatena-bookmark-title="SMAC: Diary"
        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>
   

2. Bloggerに貼るには「expr:」を使ってタイトルとURLの部分を個別記事用に書き換えます。ついでに、JavaScriptを記事毎に繰り返して呼び出さず最初の一回だけ読み込むようにします。
   

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

3. Bloggerの「デザイン＞HTMLの編集」で「ウィジェットのテンプレートを展開」にチェックを入れ、上記コードを記事のヘッダかフッタあたりに貼り付けます。<span class='post-share-buttons'>〜</span>の間あたりに入れたりするといいんじゃないかと思います。
   

トップページやアーカイブページにはボタンを表示させず、個別記事ページだけに適用したい場合は、以下のように<b:if cond='data:blog.pageType == "item"'>〜</b:if>でくくればOK。この場合は取得してきたコードをそのまま貼り付けてもいいですね。

<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>