はてなスター設置 on Blogger

ブログをBloggerに移行したので、Blogger上にもはてなスターを設置しました。そのためにはてなスターのページやウェブ上の各サイトを参考にしたんですが、おそらく各情報が書かれた当時とBloggerの現在の仕様に違いが生じてそのままだとうまく読み取れない部分があると思うので、2013年6月現在での設置方法をまとめておきます。

まず基本となる設置方法はここ。
http://www.biblation.com/2008/09/blogger.html
このサイトに書かれている方法でまずはスターが設置できます。ところがこれだけだとトップを見てる時にはスターが表示されるけど個別エントリーに出てきません。そこで各h3内にリンクを作る必要があります。

次にはてなスターの公式案内を読みます。
http://d.hatena.ne.jp/hatenastar/20070707/1184453490
ここのBlogger部分に書かれた

テンプレートの中からh3タグを探し、その直下に以下のようにリンクを挿入します。
<h3 class='post-title'><a expr:href='data:post.url' style='display:none;' title='permanent link'></a>

という部分ですが、ここが素人の自分にはわかりにくかった。h3タグひとつずつにこのリンクを挿入する必要があります。つまり、前リンクで定義されているh3にひとつずつリンクを作っていく必要があります。

この二つを組み合わせることでBloggerのトップページと個別エントリーにはてなスターが表示され、ちゃんと個別エントリーでスターつけてもトップでみたときに反映されている状態になります。