Wordpressにはてなスターの色を変えて設置

2007.07.12

はてなの新サービス、はてなスターを設置しました。それとスターの色をこのBlogデザインと調和がとれるように黄色から緑色に変えてみました。

はてなスターはどんなサービスかと言うと、ブログを読んで感じた「ちょっといいな」を気軽に☆にするサービスだそうです。ですから、このBlogでもどんどんスター追加ボタン「 Add Star 」をクリックしてください。

ブログに書かれた各エントリーに表示された「」ボタンをクリックすることで、簡単に☆を付けることができます。一つのエントリーに対して何個も☆をつけることができます。あなたがブログを読んで感じた「ちょっといいな」を気軽に☆にしてください。

引用元：はてなスターはじめてガイド – Hatena Star

Wordpressはてなスター設置方法

Wordpressにはてなスターを設置するのには、以下のコードを<head>〜</head>内に挿入するだけです。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript" src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js"></script>

コードの2行目のhttp://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.jsは、Wordpress用のスクリプトです。このスクリプトを使わないデフォルトの状態では<h3>タグの後にはてなスターが設置されるのですが、それを、<h2>タグの後に設置するようにします。

コメント機能を有効にする

コメント機能を有効にするには、はてなのアカウントを取得してログインし、[はてなスター] -> [ホーム] -> [Blogs]から、[外部のブログサイトを登録する]で自分のサイトを登録します。そうすれば追加のトークンってのを得られるので、それを <head>〜</head>内に挿入します。Wordpress用のスクリプトも忘れずに。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript" src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '*****************************';
</script>

はてなスターの色（画像）を変える

スターの画像を変更するには、以下のスクリプトを追加するだけです。
Hatena.Star.Star.ImgSrc = ’画像へのパス’;

僕は、緑色のスター画像 greenstar.gif をテーマディレクトリの下のimagesディレクトリに入れたので、画像へのパスは、<?php bloginfo(’template_directory’); ?>/images/greenstar.gif なので、 <head>〜</head>内に挿入するコードは以下のようになります。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript" src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '***************';
Hatena.Star.Star.ImgSrc = '<?php bloginfo('template_directory'); ?>/images/greenstar.gif';
</script>

コメント機能がいらない人は、Hatena.Star.Token = ’***************’;を省いても問題無いです。

僕はスターの色を変えただけだけど、これなら色んな画像が使えますね。
他にもコードを読めば色んな事を変更出来ると思う。