はてな(Hatena?)から、はてなスターという新しいサービスが始まりました。
はてなスターとは、コメントやトラックバックが敷居が高いこともあるのでブログに対して自分の気持ちを気軽に☆で表せたら良いよね。というサービスのようです。
はてなBlog以外でもJavaScriptが使えれば対応可能なようで、以下の登録を行えばコメント機能も利用できるそうです。
HatenaStar(http://s.hatena.ne.jp/)->ホーム->Blogs
から自分のブログのアドレス(http://makotokw.com/weblog/)を登録
するとJavaScriptのコードが出力される。
こんなん。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> <script type="text/javascript"> Hatena.Star.Token = '(ひみつ)'; </script>
これを「ブログテンプレートのhead内に追記してください」とのこと。はて。。エントリーごとに☆つけたい場合にはどうすればよいのでしょう。
とりあえず、HatenaStar.jsの中身を見てみることにしました。
どうやらh3タグにエントリのヘッダがある前提っぽい。というか、よく見たらHatenaStar.jsの中の最後にコメントで説明が書いてありました。独自のブログで対応するには
1) HatenaStar.jsの仕様にブログを合わせる
<h3><a href="http://uri.for/entry">Title of Entry</a></h3>
というようなヘッダを入れてしまう。
2) 検索するヘッダのタグを変更する
たとえば
<h2 class="header"><a href="http://uri.for/entry">Title of Entry</a></h2>
のようにh2タグでClassNameをつけて書いている場合は検索しているfilter部分を以下のようにoverrideできます。
<script type="text/javascript"> Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','header']; </script>
3) 自前でentryを検索する
以下のようにエントリを検索するfunctionをoverrideできます。
Hatena.Star.EntryLoader.loadEntries = function () {
return [
{
uri: 'http://your.blog/entry/123',
title: 'Hello Star!',
star_container: $('stars-123'),
comment_container: $('comments-123')
},
{
uri => 'http://your.blog/entry/456',
...
}
];
}
があるようです。
さて今回は#3で行こうと思って書き始めたのですが、結果的な対応としては#2で済んでしまいました。
Movable Typeのテンプレートを以下のように統一して
<div class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></div>
JavaScript側は
Hatena.Star.EntryLoader.headerTagAndClassName = ['div','entry-header'];
で終わりです。
これをHatenaStarWrapper.jsで保存してhead内で
<script type="text/javascript" src="http://s.hatena.com/js/HatenaStar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>js/HatenaStarWrapper.js"></script>
としました。
テストで☆つけてみたんですが、☆の消し方がわかりません。自分で自分のblogに☆つける自作自演状態になってしまいました・・・・