滋賀咲くブログでやってみよう♪:18. はてなスターを付けてみる Part2

18. はてなスターを付けてみる Part2

2007年10月22日

コメントボタンとAddボタンを表示させる

コメントと☆が付いた時の表示

いつ頃からか、「6. はてなスターを付けてみる」の方法では、はてなスターが表示されてなくなってしまいました。

そこで、このブログをはてなスターに登録し、トークンの設定を行って、はてなスターを設置してみることにしました。

+ はてなスター +
http://s.hatena.ne.jp/

はてなスターを設置する前に、次の作業を行います。

　1.　はてなスターのユーザー登録を行う
　2.　はてなスターにログイン状態にする
　3.　外部のブログサイトとして滋賀咲くBlog を登録する

3 で、自分が運営している滋賀咲くBlog を登録した時に表示される JavaScript のコードを、メモ帳などにコピー & ペーストして、記憶させておいてください。

たとえば、次のような表示になります。

実際の表示では、「** ～ **」の部分は英数字がになっています。
この英数字が、登録したブログとはてなのアカウントを関連づける「トークン」です。

滋賀咲くBlog の場合、はてなスターの説明にあるように、JavaScript のコードをテンプレートの <head> ～ </head> でくくられたどこかに記述するだけでは、はてなスターが設置できないようです。
わたしが使っているテンプレートは「2カラム　マリーン」なのですが。
このテンプレートの場合、「Hatena.Star.Token = 」が書かれている行の前に

Hatena.Star.EntryLoader.headerTagAndClassName = ['h3','title'];

を追記すると、はてなスターが設置できるようです。

この方法ですと、

　・Add ボタン（はてなスターのAdd ボタン

：☆マークを追加する）
　・コメントボタン（はてなスターのコメントボタン

：コメントを残す）

が、表示されるようです。

滋賀咲くBlog でやるべき作業は、

テンプレートの変更
　・トップページ
　・個別記事
　・アーカイブ

です。
テンプレートの編集は、

　1)　左メニューの「テンプレート」
　2)　「カスタマイズ」

から、行います。

トップページ

個別記事

アーカイブ

変更前

内容

</head>

変更後
それぞれの </head> タグの直前に、次の JavaScript を挿入してください。

内容

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h3','title'];
Hatena.Star.Token = '** ～ **';
</script>

</head>

青い太い文字の** ～ **の部分を、トークン（英数字）に置き換えてください。
Hatena.Star.Token = '** ～ **';
ピンクの太い文字の部分は、消したり書き替えたりしないようにしてください。