自作Webサイトへのはてなスター導入
自作Webサイトへ、はてなスターを導入する手順のメモです。次の2つを行えばとりあえず★が付けられるようになります。
- はてなスターから提供されているスクリプトを読み込む。
- ★を付けられるエントリの一覧を返すメソッド(Hatena.Star.EntryLoader.loadEntries)をカスタマイズして、★を付けたいエントリの情報を返すようにする。
- 以下のデータが最低限必要。これを配列で返す。
- エントリのタイトル(文字列)
- エントリの識別用URL(文字列)
- addボタンと★の表示に使う要素(Element)
- コメントボタンの表示に使う要素(Element)
- カスタマイズは1.でのスクリプト読み込みの後に行うこと。順番が逆だと上書きにならないので注意。viva JavaScript!
- 「addボタンと★の表示に使う要素」と「コメントボタンの表示に使う要素」はユーテイリティAPIがあるのでそれを使って作ってもOK
- 以下のデータが最低限必要。これを配列で返す。
サンプルです。
<!-- はてなスターから提供されているスクリプトを読み込む --> <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> <script type="text/javascript"> ROOT = "http://unageanu.sakura.ne.jp/blog-samples/080204/"; /** * はてなスターの設定対象を探してくるメソッドをカスタマイズ。 * 自前で用意した対象を探して返すようにする。 * * ※http://s.hatena.ne.jp/js/HatenaStar.jsの読み込み後、ドキュメントのonLoad前に行うこと。 */ Hatena.Star.EntryLoader.loadEntries = function() { var entries = []; // star_1を追加 // 識別用のuriとtitle、スター/Add Star/コメント表示用エレメントを指定する。 entries.push( { uri: ROOT + "#star_1", title: "★が付けられる要素1", star_container: document.getElementById('add_1'), comment_container: document.getElementById('comment_1') } ); // star_2を追加 // スター/Add Star/コメント表示用エレメントは動的に作成してもOK // ユーティリティが用意されている。 var s2 = document.getElementById('star_2'); var comment = Hatena.Star.EntryLoader.createStarContainer(); var add = Hatena.Star.EntryLoader.createStarContainer(); s2.appendChild( comment ); s2.appendChild( add ); entries.push( { uri: ROOT + "#star_2", title: "★が付けられる要素2", star_container: add, comment_container: comment } ); // star_3を追加 var s3 = document.getElementById('star_3'); comment = Hatena.Star.EntryLoader.createStarContainer(); add = Hatena.Star.EntryLoader.createStarContainer(); s3.appendChild( comment ); s3.appendChild( add ); entries.push( { uri: ROOT + "#star_3", title: "★が付けられる要素3", star_container: add, comment_container: comment } ); return entries; } </script>
ただし、これだけだと、はてなユーザーとサイトの関連づけがされていないので、コメント機能などが使えません。別途トークンを発行してもらって認証を受けるとその辺もできるようになるみたい(→はてなスターをブログに設置するには)ですが、よくわかってないのでまた今度!!