blogger に新しいはてブボタンを導入してみた

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

新しいはてブボタンができたということで早速導入。

• blog タイトルの隣に blog 全体のブックマークボタン
• 各エントリの下部にエントリオンリーのブックマークボタン

の二種を配置したかったので、ちょっと作業が必要だった。
まず、上記のリンクから自分のサイト用のスクリプトを作成。

<a
  href="http://b.hatena.ne.jp/entry/http://pinzolog.blogspot.com/"
  class="hatena-bookmark-button"
  data-hatena-bookmark-title="tail -f pinzo.log"
  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>

1. blogger のダッシュボードからデザイン→htmlの編集で、編集画面を表示する。
2. ウィジェットのテンプレートを展開にチェックを入れて、テンプレート内部を編集できるようにする。
3. //div[@id='header-innder']/div[@class='titlewrapper']/h1[@class='title']/b:include[@name='title']の直後に上記のスクリプトを配置する。（ただ、'このエントリーを'は取り除いた）
4. //div[@class='post-share-buttons']の直後に下記のスクリプトを配置する
   

   <a 
     expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url'
     class="hatena-bookmark-button"
     expr:data-hatena-bookmark-title='tail -f pinzo.log : &quot; + data:post.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>
   

5. 作業終了。お疲れ様でした

新しいはてブボタンはなかなか便利ですね。
ただ、alt から'このエントリーを'を取り除いたのがきいてない気がするぞ
※ちなみに、はてブボタンのソースは実際は一行ですが、適宜改行・インデントしてあります