July 14, 2007
はてなスターのカスタマイズ設置
はてなスターという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>
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>
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弾に応募してみます。
コメント
コメントする
スポンサード リンク