WordPressに【はてなスター】を設置してみる

意外と簡単に設置出来ますね

記事探してみると、うまくいくーとかいかないーとか、いろんな記事が出てきたのですが、実際に設置してみると驚くほど簡単に設置出来ました。はてなは好きので、せっかくなので設置してみました!

設置の仕方

WordPressだけではなくいろんなサイトにも簡単に設置出来るようですね。カスタムが難しいブログなどは面倒くさそうですが、そこはどうでもいいので触れないでおきます。
さて、設置方法ですが、詳しくは【はてなスターをブログに設置するには】見ろよハゲと言いたいところですが、簡単に説明も書いておきます。
以下のコードを内に設置しましょう。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.SiteConfig = {
  entryNodes: {
    'header.entry-header': {
      uri: 'h1 a',
      title: 'h1',
      container: 'div.entry-meta'
    }
  }
};
</script>

これだけで終わりです。簡単でしょ?entryNodesには、表示させたい場所や、スターを表示させるURLなどを設置していきます。これではてなスターを自分のブログに設置することが出来るようになります!
ただ、このままですと、自分のはてなアカウントとの連動が出来ないようです。コメント機能などが使えないようですね。ですので、トークンというものも設置します。

トークンの取得方法は以下のとおり。

  1. はてなスターへアクセスする(ログインしていない場合は、ログインをする)
  2. 画面真ん中に表示される自分の名前をクリック
  3. そこには自分のアカウントと連動しているブログやコンテンツが表示されます。私だとこんな感じ
  4. 自分自身のアカウントで、このページの一番下を見ると「外部のブログサイトを登録する」というフォームがあります。
  5. 自分のブログのURLを入力し、【追加】を押す。
  6. 画面が再更新され、先ほど入力したブログの追加がされます。その下にトークンの英数字も表示されます。

これでトークンの発行は終わりです。
最後にトークン付きのJavaScriptに置き換えて、自分のアカウントと連動したはてなスターの設置完了となります。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '0123456789abcdef0123456789abcdef01234567';
Hatena.Star.SiteConfig = {
  entryNodes: {
    'header.entry-header': {
      uri: 'h1 a',
      title: 'h1',
      container: 'div.entry-meta'
    }
  }
};
</script>

複数箇所にはてなスターを設置

複数箇所に設置するのも簡単です。entryNodesを増やせば良いのです。(詳しくは【はてなスターをブログに設置するには】)

こんな感じで、私のブログにも一つぐらいはてなスターを付けてあげて下さい^^

参考サイト

スポンサードリンク

One thought on “WordPressに【はてなスター】を設置してみる

  1. Pingback: WordPressにはてなスターを設置した | うなすけとあれこれ

コメントを残す

メールアドレスが公開されることはありません。