はてなスターつけてみました

はてなスター

はてなが新しくはてなスターというサービスを開始したので、早速つけてみました。記事の見出しの右にある小さなアイコンがそれです。

この機能は、はてなスターのサイトによると、

日々ブログを読んでいていいなと思っても、コメントを書いたりトラックバックを送るのは敷居が高く、気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。はてなスターは既存のブログにワンクリックで☆がつけられます。あなたのいいなと思った気持ちを☆に変えて、世界のブログに☆をつけよう!

という趣旨のもののようです。

設置方法

設置方法は、はてなスターのはじめてガイドに記述されているように、基本的には

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

というコードを<head></head>内に挿入するだけ。

ただし、上記タグだけで動作するには以下の条件があります。

  • 記事の見出しがpermalinkへリンクするようにマークアップされていること
  • リンクされた記事の見出しが<h3>でマークアップされていること

では、私のブログのように上記の条件を満たさない場合はどうすればいいのでしょうか。

カスタマイズ方法

はじめてガイドにもちょっとだけ書いてありますが、方法は実はJavascriptのソースの中に英語で記述されています。

たとえば、WordPressで使いたい方は以下のコードも付け加えると良いようです。

<script type="text/javascript" src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js"></script>

フリップフラップはWordPressですが、私は以下のコードを記述しました。

<script type="text/javascript">
//<![CDATA[
Hatena.Star.Token = '86c9ff21b6bc2e90675775cae46e41f56dd38f10';
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2',null];
Hatena.Star.Star.ImgSrc = '/img/star.gif';
//]]>
</script>

Tokenは、はてなスターのマイページでblogのURLを登録するともらえます。
あとは、h2タグに反応するように変更したのとスターの画像を自作のものに変更しました。

賛否両論あるサービスのようですが、はずすのもつけるのも簡単なので、みなさんも試してみては。

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です