前の記事< ish >次の記事
2007年07月13日

はてなスターをMovable Typeで好きな位置に表示させる

はてなブックマークに追加  delicious_s.gif  このエントリをlivedoorクリップに追加

 はてなスターについて、賛否両論盛り上がっているようですが、とりあえずもの珍しいのでMovable Typeの我がサイトにもつけてみることにしました。
 はてなスターはじめてガイドに「はてなダイアリー以外のブログでも表示可能」とあり、下のコードを貼り付けるだけでOK!みたいに書いてあります。


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

 ですが、これを貼っただけでは何も起こりません

 やるべきことは二つ。

はてなスターにブログを登録

 「はじめてガイド」の下の方に、

コメント機能を利用するにはさらにブログ一覧ページからブログの登録を行い、追加のトークンを貼り付けてください

 とあるように、はてなスターのトップからログインし、「ブログ一覧」に自分のサイトを追加する必要があります。はてなIDを取得していない場合、まずはてなに登録しなければなりません。
 ログイン状態ではてなスターにアクセスしたときに表示される「ようこそ、○○さん」の「○○」をクリックすると管理ページに入れます。右側の「Blogs」をクリックすると「外部のブログサイトを登録する」という画面になるので、URLを入力して「登録」。
 すると「以下のコードをブログテンプレートのhead内に追記してください。このメッセージは最初の☆が付けられた際に消えます」という指示と共にこういうソースが表示されます。


<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '(your_token)';
</script>

 運がよければ、これを貼り付ければ完了です。
 「追加の」とありますが、これは「Hatena.Star.Tokenを割り当てる部分を追加してね」という意味なので、最初に表示される一行だけのスクリプトと両方貼り付けてはいけません。
 しかしテンプレートをカスタマイズしている場合、これでもまだダメです(このサイトはダメでした)。

テンプレートに合わせてタグを指定

 元々大してやる気もなく「☆とかつくなら貼ってみようかな~」くらいだったのですが、いい加減諦めてはてなスターはじめてガイドの一番下にあるHatenaStar.jsを落として読んでみました。
 要するにH3タグの中にアンカーテキストがあった場合、それをタイトルのpermlinkとみなして横に星を表示する、という仕組みです。
 ですから、H3以外にタイトルを書いていたり、H3でもタイトル文字列を個別ページへのリンクにしていない場合は、個別に設定してやらないと何も起こりません。
 HatenaStar.jsの下の方に丁寧な説明があって、例えばH2タグをタイトルに使っているなら、


Hatena.Star.EntryLoader.headerTagAndClassName = ['h2',null];

 としてやれば大丈夫です。
 しかし、タイトルをアンカーテキストにしていない場合は、当然拾ってくれません。
 headerTagAndClassNameの二つ目の要素でクラス名を指定できるので、とにかく個別ページへのリンクになっているタグにクラスをつけて指定すれば良いのですが、そこが星の出したい場所とは限りません。一番美しいのはblog.fuktommy.comさんが紹介している方法。
 個別エントリーテンプレートで、まず、はてなスターを表示したい場所に以下のソースを追加します。


<span class="hatenastar"><a href="<$MTEntryPermalink$>" style="display:none;">.</a></span>

 その上で、テンプレートのどこかに次のスクリプトを貼り付けます。


<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '(your_token)';
Hatena.Star.EntryLoader.headerTagAndClassName = ['span', 'hatenastar'];
</script>

 別にhead内である必要はありません。bodyの終わる直前あたりで良いでしょう。your_tokenはあなたのトークンに書き換えてください。
 これでカスタマイズしまくったMovable Typeのブログでもはてなスターが使えます。


 つくづくはてなはギーク臭いです。サイトの作りもサービスの提供の仕方も、国語0点に使いにくいです。文系人間の心を全然わかっていません。
 HatenaStar.jsのソースはとてもキレイだと思います。また、一応プログラマの端くれなので、サイトやサービスについてもこういうノリになる流れはわかります。さらに、ある種の人間にとってはわかりやすい作りであることも理解できます。何せ職場の人間はそういう人ばかりですから。
 でもその「ある種の人間」って、あなたたちの思っている以上に少数派ですよ。水商売から翻訳業まで渡り歩いた挙句の超変則IT業界寄生者なので、この辺の段差をよく感じられる立場にいるのですが、叩き上げの方々は時々びっくりするくらい自分たちの「特別さ」に気づいていないです。はてなには、そういうエッセンスが詰まっています。
 もちろん、特別であることは悪いことではありません。それが職人というものですし、流れ者としては叩き上げ系に敬意も抱いています。少数派というなら、わたしの方が究極の「少数派」です。そのこと自体はむしろ素晴らしいことだと思っています。
 ただ、はてなさんは商売でやられているわけですから、おばあちゃんの心まで見通す心意気があった方が、もっと儲かるのではないでしょうか。大きなお世話ですけれど。
 ちなみに、そもそもはてなスターが何をするサービスなのかということは、未だに理解していません
 星? 星がつくの? 七個集めると願いが叶うの?

 良い通訳になるのでわたしを雇えば?と、ものすごい傲慢な考えが一瞬よぎったのですが、あまりにも変則すぎるので一番お客さんにしたい真ん中のところはバイパスです。

はてなブックマークに追加  delicious_s.gif  このエントリをlivedoorクリップに追加 FC2ブックマーク ニフティクリップ Yahoo!ブックマーク .

カテゴリ:ブログ・ネット <この記事を気に入って頂けたら、同カテゴリの過去ログを参照してみてください
よろしければクリックしてください>人文blogランキング  ランキングオンライン にほんブログ村ブログランキング


はてなスターをMovable Typeで好きな位置に表示させる

« ブートキャンプのちょっと格闘技な使い方 | ish☆手作りスキンケア・サイボーグ | 大川周明とイスラーム、日本のイスラーム化と「さておかれない冗談」 »

コメント

サイン・インを確認しました、 . さん。コメントしてください。 (サイン・アウト)

(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)


情報を登録する?