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

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弾に応募してみます。

July 14, 2007 20:52 fenrir が投稿 : 固定リンク | | このエントリーを含むはてなブックマーク

コメント

コメントする