はてなスターを設置

はてなスターを設置した。以前にも設置していたけど、Wordpressのテーマを切り替えたりで無くなっていた（ここらへんの運用はかなりテキトーなのでちょっと申し訳ない）。

基本的にははてなスターをブログに設置するにはを読めば良いんだけど、設置する際にちょっと手間取ったのでメモ。

Wordpress対応と書いてあるけどそれは多分Wordpress.comの話で、自由にテーマを切り替えられる野良Wordpressでは「はてなスター非対応のページでスターを設置するには、」以下を参考にentryNodesを設定する必要がある。

entryNodesで何を設定するのかというと、ページを読み込んだときのHTMLのどこにそのエントリのURL（uri）、タイトル（title）、スターを配置する要素（container）の3つをCSSのセレクタで指定してやる。

Wordpressのテーマはコードの整形が残念だったりすることがままあるので、そこはGoogle ChromeやSafari、Firefox（+Firebug）でInspect ElementしてDOMツリーを見た方が断然楽。

例えば次のようなツリー構造があったとする：

<div class="section">
  <h3 class="section_title">
    <a href="http://example.com/blog/20101205" class="permalink">エントリのタイトル</a>
  </h3>
  <div class="section_body">
    <p>本文</p>
  </div>
</div>

この場合、ヘッダ（header.php内のhead要素内）には次のような記述をする：

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = "（ブログを登録したときに与えられるToken）";
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.section': {
      uri: 'h3 a.permalink',
      title: 'h3',
      container: 'h3'
    }
  }
};
</script>

これははてなのサンプルのuriの部分を'h3 a'から'h3 a.permalink'に変更したもの。はてなブックマークのブックマーク数とか表示している場合にh3内に複数のa要素が出来て微妙じゃないか？もうちょっとclassを指定したほうが安全なんじゃ？と思ったので。

ただこの辺の調整はテーマによりけりなので、DOMツリーとCSSセレクタとを見比べながらやるしかない。