このブログにはてなが提供するはてなスターを設置してみました。
はてなスターってはてなダイヤリーにしか設置できないのかと思ったら、外部ブログでも普通に設置できるんですね。
設置の仕方はここに書いてあったのですが、記事内容がごちゃごちゃしていて分かりにくいですね。
でも実際に設置するのは簡単で、以下の２ステップで完了します。
ステップ １． はてなへの登録
まずは、はてなにブログを登録します。
はてなにログインした状態で、はてなスターのページを開き、「ようこそ、****さん」というリンクの部分をクリックして開きます。
すると、「外部のブログサイトを登録する」という入力フォームが出てくるので、そこでブログのURLを登録します。
登録すると、はてなスターを設置するためのサンプルスクリプトが現れるので、そこに含まれるトークンを記録しておいて下さい。
'*' で書いた部分がトークンで、実際はここに英数字が並んでいます。
このトークンは次のステップで使います。
ステップ ２． ブログへコードを追加
次に、ブログの<head>タグの中に以下のようなコードを記述します。
<script type="text/javascript">
Hatena.Star.Token = '****************************************';
Hatena.Star.SiteConfig = {
entryNodes: {
'div.section': {
uri: 'h3.item a',
title: 'h3.item',
container: 'h3.item'
}
}
};
</script>
おまじないの部分は無視して、自分で書かなければいけないのは文字を赤くした部分、はてなスターを付ける対象に関する情報です。
これをCSSでタグを指定するときと同じ書式1で記述します。
まず、ステップ１で取得したトークンを記入します。
次に、それぞれの記事（エントリー）を囲っているタグを指定します。ここでは、 'div.section' となっていますが、それぞれのブログのマーキングに合わせて記述して下さい。
特に記事を個別にタグで囲っていなかった場合は、新しくタグで囲んで下さい。Nucleusの場合は「テンプレートの編集」を開き、 full / short 共に「編集」から「アイテムの本体」のテキストボックスで、コード全体を囲むタグを書けばOKです。
次の行では、記事のURI(URL)を指す<a>タグを指定します。
だいたいの場合は、記事のタイトルが記事へのリンクになっていたりするので、それを指定します。
記事一覧ページと記事詳細のページでURIの書かれている場所が違う場合は工夫が必要になるので、同じになるようにブログのマークアップを変えちゃった方がらくかもしれません。
次の行では、記事のタイトルが書かれているタグを指定します。
公式のサンプルでは 'h3' となっていましたが、僕は念の為クラス名も加えておきました。
最後に、はてなスターのアイコンを設置する場所を指定します。
はてなダイアリーのようにするなら、上に書いたようにタイトルが書かれているタグを指定すればいいですし、別の場所に置きたかったら、からのタグを設置してそれを指定すればいいでしょう。
という感じで、簡単にはてなスターを設置することができましたとさ。