Bloggerにはてなスターを設置するためには(まとめ)

はてなのサービス『はてなスター』は、はてなダイアリーだけしか設置できない…というわけではなく、livedoor, blogger, seeseaなど、外部のブログでも導入することができます。

Bloggerにはてなスターを導入するための具体的な方法は『はてなスターをブログに設置するには』を参照すればすべて書いてありますが、この内容はテンプレートがクラシックなど、標準のものしか対応していません。なのでこのブログのようにいろいろとカスタマイズしているブログに設置するためには、いささか面倒な手順を踏まなければいけません。ここではBloggerでの変更手順を、上記の記事を補足する形で説明します。

まず、はてなスターのJavaScriptは、h3タグに囲まれている内容を記事のタイトル、h3タグ内のaタグのリンク先を記事のpermalinkと推測して処理を行っています。よって、ブログのHTML構造がその方式に従っている場合は特に変更する必要はなく、ただheadタグ内直下に

<script type="text/javascript" src="http://s.hatena.com/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = 'your-original-token';
</script>

を挿入するだけで良いです。

しかし、h3タグの中にaタグが複数個入っている場合や、ブログタイトルにh2タグなど別のタグを使っている場合には、正解のURLを教えてあげる必要があるため、h3タグの直下に

<h3 class='post-title'>
<a expr:href='data:post.url' style='display:none;' title='permanent link'></a>

とダミーのaタグを挿入し、Hatena.Star.SiteConfigにカスタマイズした辞書を入れてやります。

また、複数のJSを使っている場合、時々JS同士が競合して正常な動作が行われない場合があります。筆者の場合ははてなスターのJSとGoogle AnalyticsのJSが競合してしまったために、Add Starボタンを押してもログインのダイアログが表示され、正常にスターが追加されないというエラーが生じていました(*1)。こういった場合、JavaScriptのロード順を変えることによって解決する場合があります。具体的には、このブログですとbodyタグ終了の直前に以下のようにコードを挿入することによって解決しました。

<script type='text/javascript'>
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
<script type='text/javascript'>
  try {
  var pageTracker = _gat._getTracker("your-UA-code");
  pageTracker._trackPageview();
  } catch(err) {}</script>
<script src='http://s.hatena.ne.jp/js/HatenaStar.js' type='text/javascript'></script>
<script type='text/javascript'>
Hatena.Star.Token = 'your-original-token';
Hatena.Star.SiteConfig = {
entryNodes: {
'div.post': {
uri: 'h3 a',
title: 'h3',
container: 'h3'
}
}
};
</script>

要はGoogle Analyticsの次にはてなスターのJSが読み込まれるように修正したわけです。以上の手順によって、はてなスターの正常な動作を確認しました。この記事が皆様のお役に立てば幸いです。

(*1) おそらく競合の原因はクリックイベントのフックによるものと考えられます。