Hatenaのサービスで、はてなスターというものがあります。はてなスターとは、
日々ブログを読んでいていいなと思っても、コメントを書いたりトラックバックを送るのは敷居が高く、気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。はてなスターは既存のブログにワンクリックで☆がつけられます。あなたのいいなと思った気持ちを☆に変えて、世界のブログに☆をつけよう！ （はてなスターはじめてガイド - Hatena Star）
というもので、ちょっと良かったなというエントリーに☆を付けてあげるというものです。このサービスを自分のblog内でも設置できるということなので、設置してみることにしました。
（追記）
改良版を、次のエントリー"Hatena starを付けてみる その２"にて行ってみています。そちらの方が変更点が少なく良いと思います。
方法は、MovableType4.1で設置しているTREND SPOTTINGさんのMovable Type4にはてなスターを設置を参考にしてみました。
１．はてなスターにアクセス。ログインして右上のBlogsをクリック。
２．"外部のブログサイトを登録する"にblogのURLを入れ、追加する。
３．トークンが発行される。出てきたHTMLコードをコピーする。
MovableTypeの管理画面より、
デザイン＞テンプレート＞メインページ＞ヘッダー
のheadタグの中に、コピーしたコードをペーストする。
４．トップページのタイトルの横に設置させるために、Hatena.Star.EntryLoader.header...以下の一行を加え、保存。以下のものがheadタグ内に加えられた。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> <script type="text/javascript"> Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','asset-name']; Hatena.Star.Token = 'your トークン'; </script>
５．記事個別ページ用のヘッダーを作成する。まず、モジュールテンプレートにあるヘッダーの中身全てをコピーする。
６．"モジュールテンプレート一覧"より"モジュールテンプレートの作成"して、上記をコピーする。
７．記事個別ページに合わせるように、下の行の'h2'を'h1'に書き換える。
Hatena.Star.EntryLoader.headerTagAndClassName = ['h1','asset-name'];
８．"ヘッダー個別リンク用"などと任意の名前を付けて保存。
９．個別ページでの"ヘッダー"を作成した"ヘッダー個別リンク用"に変える。
デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事
<$MTInclude module="ヘッダー"$を、
<$MTInclude module="ヘッダー個別リンク用"$>に書き換え。保存。
１０． デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事＞ブログ記事の詳細
の、"ブログ記事のメタデータ"のモジュールインクルードの上にある、
<h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$></h1>
を、
<h1 class="asset-name"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h1>
に書き換え。保存。
１１．再構築して、出てくるか確認。
個別記事のタイトルを認識させるところが少しややこしい。はてなスターが必要とする情報は、タイトルとpermalinkのURLということですが、メインページと個別ページでタグとpermalinkが違っていて、それぞれに作る必要があった。メインページではタグがh2、個別ページではh1と異なり、また個別ページではタイトルにpermalinkされていないので、１０．で追加させている。
Not quick a Nineさんのはてなスター付けましたでは、divタグでArticleTitleクラスを認識させているが、上手く行かなかった。。残念。そのため、ヘッダーのテンプレートを二つ作り、それぞれでタイトルを認識させようとしています。
ほとんど、TREND SPOTTINGさんのMovable Type4にはてなスターを設置のエントリーをなぞっただけですが、上手く行ったようです。良い記事がありましたら、☆を付けてもらえたらうれしいです。
コメントする