はてなスターを設置

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

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

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

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

Wordpressのテーマはコードの整形が残念だったりすることがままあるので、そこはGoogle ChromeSafariFirefox(+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 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セレクタとを見比べながらやるしかない。