Blogger で新しいはてなブックマークボタンを設置

はてなブックマークボタンが使いやすくなったらしいので、Blogger の各記事の下に加えるようにしてみた。

Blogger では記事の側にボタンを設置しようと思うと HTML 編集モードに入らないといけないっぽいのだが、どうも記事ひとつひとつに対して調節しようと思うと「ウィジェットのテンプレートを展開」を使って展開されたソースに対して書き換えを行う必要があるらしい。
ただこれを一度展開してしまうとテンプレが巨大になって見通しが悪くなるし「ここから先は自力で頑張って下さい」ムードが漂っていてせっかくのインターフェイスが使えなくなりそうで怖いので（※実際にどうなるのかは未確認）、JavaScript 経由で挿入する方法でお茶を濁すことにした。

このブログには既にシンタックスハイライト用の JavaScript を仕込んでいて、その時に jQuery も読み込んでいたので jQuery を使った。実際に必要なコードはこんな感じ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $('h3.post-title.entry-title').each(function(){
    var $this = $(this), title = $this.text(), url = $this.find('a:first').attr('href') || $('head:first link[rel=canonical]:first').attr('href'), encoded_url = encodeURIComponent(url);
    $this.closest('div.post.hentry').find('div.post-footer-line.post-footer-line-1')
      .prepend('<a href="http://b.hatena.ne.jp/entry/'+encoded_url+'" class="hatena-bookmark-button" 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"></scr'+'ipt>')
      ;
  })
});
//]]>
</script>

※記事個別ページで上手く出ていなかったのでURL取得処理を変更

最初に h3 拾ってきてるのでそんなに重くないと思いたい。
ただ、このままだと微妙にデザインが崩れた感じになってしまったので以下のCSSも追加。

a.hatena-bookmark-button, iframe.hatena-bookmark-button-frame {
  vertical-align: middle;
}

出来上がったのがこんな感じ。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓