遊星商會の商品ページに星を付けてみた。このシステムはpaperboy&co.のColor Me Shop!proを利用しているのだが、テンプレートはbody内しか変更できない。
はてなスターをブログに設置するには - はてなスター日記を見ても「head内にscriptを追加」としか書いていないのだが、そう言えば以前Google Analyticsを設置した時にbodyの最後に置いた覚えがある。読み込み自体はheadでもbodyでも問題ないはず、と試してみたらちゃんと動作した。
ただし、はてなスターはデフォルトではパーマリンク付きのh2に星を付けるようになっている。しかしページ内では他にもh2を使っていたし、☆を付けたいところ(この場合は商品名が適当だろう)にはパーマリンクが付いていない。この辺を、テンプレート変更で対処する。
まず、共通ページのテンプレートを上級モード(HTML・CSS編集)で開き、はてなスター用のスクリプトを追記する。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> <script type="text/javascript"> Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','product_name']; Hatena.Star.Token = '「外部ブログ登録」で出てきたID'; </script>
3行目が重要である。最後の部分、大括弧の中に引用符に囲まれカンマで区切られた文字列がある。
最初のh2は☆を付けるタグがh2であることを示すもの。多分デフォルトのテンプレートなら商品名部分はh2になっていると思う(自分の商品ページを開き、ソースを表示させて確認すること)ので、これはそのままでいい。
次の部分は、他のh2と区別するためにクラスを指定するもの。これと同じクラスを、テンプレートの商品名を示すh2に付けなければならない。
商品詳細テンプレートを上級モードで開き、<!-- Product(商品詳細) -->の文字を探す。このすぐ次の行が、多分商品名を表示する部分のはずだ。私の使っているデフォルトテンプレートでは、
<h2><{$product.name}></h2>となっていた。これを、
<h2 class="product_name"><a href="<{$product_link}>"><{$product.name}></a></h2>に書き換える。<{$〜}>の部分がColorMeShopの独自タグである。product_linkは商品詳細ページのURLを、product.nameは商品名を示す。
これで実際に☆(というか、☆を追加するボタン)が表示される筈。
