はてなスターをつけてみる

先日リリースされたはてなスターを導入してみます。

WordPress でやってますが、テーマが違うとタグも微妙に違うし一概にこの方法でばっちしだぜとはいかないでしょうが、一応書いときます。

というわけで、基本的にははてなスターをブログに設置するにはに沿ってやってけばいいです、終わり、だと終わっちゃうので頑張ります。

そのページの手続きに沿って、はてなスターのトップページの「ようこそ、hogehogeさん」の hogehoge から自分のページに行って、画面の右上にある「Blogs」をクリック、「外部のブログサイトを登録する」から自分ちのサイトの URL を追加します。そしたら貼り付けるコードが表示されます。こんな感じ。

HTML:
  1. <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
  2. <script type="text/javascript">
  3. Hatena.Star.Token = 'xxxxxxxxxxxxxxxxxxxx';
  4. </script>

これをブログの各エントリのページ、single.php の頭の <?php get_header(); ?> の直後くらいに貼り付け。

h3 と permalink を含むっていうルールに沿ってないので、ちょっと書き換え。

HTML:
  1. <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
  2. <script type="text/javascript">
  3. Hatena.Start.EntryLoader.headerTagAndClassName = ['h1', 'entry-title'];
  4. Hatena.Star.Token = 'xxxxxxxxxxxxxxxxxxxx';
  5. </script>

なんですが、はてなのページの記載には誤りがあって、foodp さんがコメントされている通り、Hatena.Star.headerTagAndClassName ではなく Hatena.Start.EntryLoader.headerTagAndClassName が正しそう。はまるよな。

で、実際記事のタイトルを上の設定に沿った感じに変えないといけないので、single.php 内の該当部分、

HTML:
  1.   <?php the_title(); ?>
  2. </h1>

HTML:
  1. <h1 class="entry-title">
  2.   <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
  3. </h1>

に変更。h1 に class="entry-title" を追加してパーマリンクを貼った感じ。

あとは、トップページにもトークンを入れろっつうことなので、index.php も <?php get_header(); ?> の直後に以下を追加。

HTML:
  1. <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
  2. <script type="text/javascript">
  3. Hatena.Star.Token = 'xxxxxxxxxxxxxxxxxxxx';
  4. </script>

こんなもんっすか。

で、トップページと各記事のページにはてなスターが出るようになりました。ワイ。

世の中の一部的にはいろいろ言われてるみたいですが、コメントするほどでもないけどなんか伝えたいみたいな感じってあると思いますし、全然悪くないと思います。★が超クリックされる時間帯とかあると思うんですけど、どうやって仕組みを実現してるのかは興味ありますね。


About this entry