はてなスターつけた

設置したのはいいけど、星が一個も付かなくてちょっぴり悲しい思いをしそうな気がしないでもない。

そんな事はさておき、はてなスターを設置するには「はてなスターをブログに設置するには」に書かれている JavaScript を head 内に埋め込めばいいのだけど、対応ブログサービス以外で設置するにはカスタマイズを行なわないといけない。まあ大抵の場合は、Hatena.Star.SiteConfig の entryNodes を自分のサイトに合わせてきちんと設定してやればいいだけだ。

ただ、ウチの場合 vicuna CMS を元にした Flavour を使っていて、一覧ページと個別ページでエントリの見出しレベルが変わってくる (具体的には、一覧ページでは h2 要素・個別ページでは h1 要素がエントリの見出しになる) ので、どちらか一方に合わせてしまうと、もう一方では意図した通りの部分に表示されなくなるということになってしまう。

これを回避するために、最初は一覧ページと個別ページの Flavour を別にしなくちゃダメかな…と思っていたのだけど、別に分けなくても entryNodes の各要素を interpolate_fancy プラグインで条件分岐して出してやれば良いことに気付いたので、最終的には以下のようなコードを書いて対応した。なるべく楽したかったので pagetype プラグインと組み合わせていますが。

<!-- 実際のコードは改行せずに一行で書いています -->
<script type="text/javascript">
Hatena.Star.SiteConfig = {
    entryNodes: {
        <?$pagetype::pagetype ne="story">'div.entry'</?>
        <?$pagetype::pagetype eq="story">'div#main'</?>: {
            uri: <?$pagetype::pagetype ne="story">'h2 a'</?>
                 <?$pagetype::pagetype eq="story">'window.location'</?>,
            title: <?$pagetype::pagetype ne="story">'h2'</?>
                   <?$pagetype::pagetype eq="story">'h1'</?>,
            container: <?$pagetype::pagetype ne="story">'h2'</?>
                       <?$pagetype::pagetype eq="story">'h1'</?>
        }
    }
};
</script>

こう書いておけば、一覧ページでは、

entryNodes : {
    'div.entry': {
        url: 'h2 a',
        title: 'h2',
        container: 'h2'
    }
}

個別ページでは、

entryNodes : {
    'div#main': {
        url: 'window.location',
        title: 'h1',
        container: 'h1'
    }
}

が出力されて、どちらの場合もエントリ見出しの後ろにはてなスターが設置できて、めでたしめでたしと。

素直に Flavour 分けた方がはるかに楽です。