July 14, 2007

はてなスターのカスタマイズ設置

[Site Management]

はてなスターというWeb拍手(気に入ったらボタンぽちっとな)のような機能が面白そうなので、このサイトでも設置してみました。今回はその設置に関する技術的なお話です。

このはてなスターですが、JavaScriptをテンプレートに貼り付けることによって実現されています。設置はMovableTypeなどの普通のブログなら解説サイトにあるように

<script type="text/javascript" src="http://s.hatena.com/js/HatenaStar.js"></script>

とすればよいようですが、デフォルトではhtmlのh3タグ内に記事のタイトル、ならびにその中のaタグに記事への固定リンク(permalink)があることが前提となっているようです。HTMLで書くと、

<h3><a href="(固定リンク)">(記事のタイトル)</a>

のようになっていることが想定されています。少しタグの構造が異なる人でも、『観測気球』での解説にあるように、ちょっとしたスクリプトを加えることで対応可能です。例えばこのような構造がtitleというclass属性がついたh2タグで実現されている場合は

<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','title'];
</script>

というような具合で対応できるようです。

しかしながら、このサイトは原型をとどめないほどテンプレートが改造されてしまっているので、上記のような簡単なカスタマイズだけでは対応できませんでした。特にタイトルにaタグでリンクをつけるのは個人的には好きでないので、例によって元のスクリプトを解析してみました。その結果、現在は以下のようなスクリプトではてなスターに対応しています。

<script type="text/javascript">
Hatena.Star.EntryLoader.loadEntries = function () {
var entries = new Array;
var headers = Ten.DOM.getElementsByTagAndClassName('h2','title',document);
var permalinks = Ten.DOM.getElementsByTagAndClassName('div','posted',document);
for (var i = 0; i < headers.length; i++) {
    var sc = Hatena.Star.EntryLoader.createStarContainer();
    var cc = Hatena.Star.EntryLoader.createCommentContainer();
    headers[i].appendChild(sc);
    headers[i].appendChild(cc);
    entries.push({
        uri: permalinks[i].getElementsByTagName('a')[0].href,
        title: Ten.DOM.scrapeText(headers[i]),
        star_container: sc,
        comment_container: cc
    });
}
return entries;
};
</script>

このサイトではタイトルはh2タグの中に納まっています。また記事への固定リンク(permalink)は別のところでpostedというclass属性がついたdivタグの中に収納されています。そこで上記のようなスクリプトで、はてなスター側に記事とURLの一覧を教えてあげることで、うまく動作することができました。

※はてスタT欲しい 第2弾に応募してみます。

20:52 fenrir が投稿 : 固定リンク |
| このエントリーを含むはてなブックマーク | トラックバック
このエントリーのトラックバックURL: https://fenrir.naruoka.org/mt/mt-tb.cgi/578
コメント
コメントする









名前、アドレスを登録しますか?
(次回以降コメント入力が楽になります)
  • 匿名でのコメントは受け付けておりません。
  • 名前（ハンドル名可）とメールアドレスは必ず入力してください。
  • メールアドレスを表示されたくないときはURLも必ず記入してください。
  • コメント欄でHTMLタグは使用できません。
  • コメント本文に日本語(全角文字)がある程度多く含まれている必要があります。
  • コメント欄内のURLと思われる文字列は自動的にリンクに変換されます。