blog.fuktommy.com

「はてなスター」を導入してみた

はてなダイアリー日記 - ブログをいっそう楽しくする「はてなスター」をリリースしました」をみて、 はてなスターをこのブログにも導入しました。 はてなスターはじめてガイド - Hatena Starには 対応ブログ以外でもHTMLの構造が同じ場合は☆が動きます とあるんですけど、具体的にはどうすればいいのか書いてません。 参った参った。 困ったときはソース嫁とばっちゃが言ってたので、 HatenaStar.js を開いたところ、親切にもコメントでこんなことが書いてありました。

In many standard blog sites (Blogger, MovableType etc..), you can add
Hatena Star by just embedding the script code above.
HatenaStar.js assumes that blogs have the structure as follows.
H3 means headers of entries and they include the permalinks and
the titles of each entry.

  <h3><a href="http://uri.for/entry">Title of Entry</a></h3>

In other blogs which have other structures, you have to embed other
optional script or write JavaScript code manually.

  // This is the optional script for WordPress blogs
  <script type="text/javascript" src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js"></script>

  // Or you can write your code by yourself.
  <script type="text/javascript">
    // customize for other html structure.
    // H2 tags are the headers of each entry in this case.
    Hatena.Star.EntryLoader.headerTagAndClassName = ['h2',null];
  </script>

うーん、なるほど。 h3要素中のa要素直後に☆ボタンを追加してたんですね。 というわけで、このブログではh2を設定しました。 ところが、これでは動かないんですよ。 テンプレートをいじって、h2の方をh3にしたところ、☆ボタンが2個つくんですよ。 なぜ?

実はこれ、説明が不親切だからだったんです。

上記のコードを貼り付けることで☆が付けられるようになりますが、コメント機能を利用するにはさらにブログ一覧ページからブログの登録を行い、追加のトークンを貼り付けてください

以下のコードをブログテンプレートのhead内に追記してください。このメッセージは最初の☆が付けられた際に消えます。

とあるんですけど、これらのコードは重複していて、 同じjsを2回読むことになるんですよ。 それに気付いて片方を削除しました。 それと、head内 じゃなくて、bodyの最後のあたりにjsをまとめて読むところがあるので、 そこに追加しています。

Copyright© 1998-2014 Fuktommy. All Rights Reserved.
webmaster@fuktommy.com (Legal Notices)