[hatena] 今さらながらはてなスターの仕様に関するまとめ。

先日のはてなスターに関する記述の誤りで分かったことをまとめておこうかと。

はてなスターリリース時にはなんだか難しく考えすぎていたんだけど、
ブログ始めページにはてなスターを付けることは案外難しくない。
以下、非常に単純化してまとめておくと。

1. はてなスター用JavaScript

まず、前提としてはてなスター用のJavaScript記述が必要。

各ブログサービス用などより省略された記述はあるものの（例えばwordpress用とか）、
基本になる記述は以下。

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['はてなスター用タグ名', 'はてなスター用クラス名'];
Hatena.Star.Token = 'トークン';
</script>

はてなスター用クラス名は自由に決めればいいけれども、
はてなスターで定義されている主なクラス名にかぶらないようにしたい。
定義済の主なクラス名は以下。

span.hatena-star-comment-container
img.hatena-star-comment-button
span.hatena-star-star-container
img.hatena-star-add-button
img.hatena-star-star

まぁ普通に考えたらかぶらないけど。

2. はてなスター用タグの用意

1で規定したタグ、クラスに従ってスターを表示させる場所に要素を追加。
設置させる場所はどこでも可。

例えば先ほど決めたタグが『span』、クラス名が『hatenastar』だったとしたら、
中にアンカータグを1ついれたもの、つまり最小限で言うと、
次のコードを任意の場所に挿入してやればそれが全てはてなスターになる（複数設置可）。

<span class="hatenastar"><a /></span>

サンプル

このとき、要素内にアンカータグが設置されていれば、
そのリンク先（href要素）がそのスターと紐づけられるURLに、
アンカータグのテキストがそのスターが参照するページタイトルとして取得される。

つまり、以下のようになっていればURL、タイトル共に正常に取得される。

<span class="hatenastar"><a href="スター対象ページのURL">スター対象ページのタイトル</a></span>

サンプル

[hatena] 今さらながらはてなスターの仕様に関するまとめ。

もし、スター対象ページのタイトルを表示させず、
スターおよび追加ボタンだけを表示させたいときには、アンカーに対してクラスを指定しておいて、

<span class="hatenastar"><a href="スター対象ページのURL" class="hatenastar-title">スター対象ページのタイトル</a></span>

そのクラスを非表示にしてやれば実現できる。

.hatenastar-title {display: none}

サンプル

[hatena] 今さらながらはてなスターの仕様に関するまとめ。

このとき以下のようにすると、スターや追加ボタンが消えてしまうので、
面倒でもアンカーにクラス名を付けておいた方がよさげ。

.hatenastar {display: none} /* 追加ボタン含めて全て表示されない */
.hatenastar a {display: none} /* スターが表示されない */

以前していた誤解。

はてなブックマーク追加ボタンの場合は、プログラムに渡すのはURLだけで、
追加ページに飛ぶとはてなからクローラーが巡回してページタイトルを自動的に取得している。

なので、はてなスターの場合もそのページのページタイトルを、
自動的に取得しているもんだと思っていたんだけど…実際にはそんなことはしていなくて、
もし仮にページタイトルが指定されていない場合、
デフォルトではURLのみが一覧に表示されることになる。

要するに、スターを表示しているページの情報（URL/タイトル）と、
はてなスターとでは特に何も依存関係がないってこと。
全部こちらで指定できるので。

つまるところ他人のページだろうが何だろうがどんどんスターを付けられるってことなんだなぁ。
何かのまとめエントリみたいな時に、そのまとめに対するスターだけではなくて、
まとめでピックアップした各サイト/エントリに対するスターも合わせて設置するとか。

以上、簡単ながらはてなスターの設置に関するまとめでした。