18. はてなスターを付けてみる Part2
はてなスターを設置する前に、次の作業を行います。
1. はてなスターのユーザー登録を行う
2. はてなスターにログイン状態にする
3. 外部のブログサイトとして滋賀咲くBlog を登録する
3 で、自分が運営している滋賀咲くBlog を登録した時に表示される JavaScript のコードを、メモ帳などにコピー & ペーストして、記憶させておいてください。
たとえば、次のような表示になります。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '
** ～ **';
</script>
実際の表示では、「
** ～ **」の部分は英数字がになっています。
この英数字が、登録したブログとはてなのアカウントを関連づける「トークン」です。
滋賀咲くBlog の場合、はてなスターの説明にあるように、JavaScript のコードをテンプレートの <head> ～ </head>
でくくられたどこかに記述するだけでは、はてなスターが設置できないようです。
わたしが使っているテンプレートは「2カラム マリーン」なのですが。
このテンプレートの場合、「Hatena.Star.Token = 」が書かれている行の前に
Hatena.Star.EntryLoader.headerTagAndClassName = ['h3','title'];
を追記すると、はてなスターが設置できるようです。
この方法ですと、
・Add ボタン（：☆マークを追加する）
・コメントボタン（：コメントを残す）
が、表示されるようです。
滋賀咲くBlog でやるべき作業は、
テンプレートの変更
・トップページ
・個別記事
・アーカイブ
です。
テンプレートの編集は、
1) 左メニューの「テンプレート」
2) 「カスタマイズ」
から、行います。
トップページ
個別記事
アーカイブ
変更前
内容
</head>
変更後
それぞれの </head> タグの直前に、次の JavaScript を挿入してください。
内容
<!--はてなスター-->
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h3','title'];
Hatena.Star.Token = '
** ～ **';
</script>
<!--はてなスターEND-->
</head>
青い太い文字の
** ～ **の部分を、トークン（英数字）に置き換えてください。
Hatena.Star.Token = '** ～ **';
ピンクの太い文字の部分は、消したり書き替えたりしないようにしてください。
関連記事