Hatena::Grouphatenadeveloper

はてなスターをブログに設置するには

ja/star/misc/hatenastarjs

はてなスターをブログに設置するには

■ はてなスターの仕組み

はてなスターは、はてなブログでは自動的に表示されますが、それ以外のブログサービスでも、利用していただくことが可能です。ここでは、その方法と、はてなスターの仕組みについて解説します。

はてなスターでは、JavaScriptを利用しています。はてなスターの提供するJavaScriptファイルをご自分のブログのページ内で読み込むことで、ページの読み込み完了とともにそのJavaScriptが実行されます。JavaScriptでは、そのページに存在する記事とPermalink（記事ごとの固有のURL）を検出し、その記事につけられたスターの数をはてなスターのサーバに問い合わせます。そして、その結果と、星を追加する「 Addボタン」ボタンをページ内に埋め込みます。

「Addボタン」が押された際にも、はてなスターのサーバに問い合わせが行われ、スターの情報が保存されます。

スターの数の表示や、ボタンが押されたときの処理は、はてなスターのJavaScriptプログラムによって行われます。したがって、基本的にはそのJavaScriptを読み込みさえすれば、スターの機能をつけることが可能です。

ただし、各ブログサービス、システムによって、HTMLの構造は異なるため、タイトルやPermalink、星をつける位置などの検出を、はてなスターが正しく行えない場合があります。そうした場合は、さらにカスタマイズを行うことで、正しく動作させることが可能になります。

ちなみに、はてなスターを利用できるのは、ブログだけではありません。ある情報のカタマリ（たとえばWikiや、ニュースの記事、掲示板など）が、それぞれ固有のURL（Permalink）さえ持っていれば、スターをご利用いただくことができます。

■ はてなスターをブログに貼り付ける

以下の1行をあなたのブログに貼り付けてください。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>

このコードをあなたのブログに埋め込めば、準備は完了です。埋め込む場所は、ヘッダ（HEADタグ内）がお勧めですが、システムの制限などにより、それができない場合は、ほかの場所でもかまいません。ページ内のどこに埋め込んだ場合でも、はてなスターの処理が実行されるのは、ページの読み込みがすべて終了した後になります。

なお、このコードは入力したブログが利用しているサービスやシステムによって、それに対応したコードが表示される場合があります。

ブログによっては、これだけでスターの機能が利用できるようになりますが、残念ながらそれだけではうまく動作しないブログサービス・システムもあります。また、対応しているシステムであっても、テンプレートを変更している場合は、正しく動作しない場合があります。その場合は、さらにカスタマイズを行ってください。

ここからは各種ブログへの対応のためのカスタマイズの概要を解説します。ここから先は、ある程度のJavaScriptの知識が必要になってしまいます。対応しているブログサービスの場合は、そうしたカスタマイズが無くても利用できるので、各ブログでのはてなスターの使い方を参照してください。

はてなスター非対応のページでスターを設置するには、ページの HTML に以下の4種類の要素がある必要があります。

  • エントリに対応する HTML 要素 (entryNode)
    • エントリのタイトルに対応する要素 (entryNode.title)
    • エントリの permalink に対応する要素 (entryNode.uri)
    • "Add Star " ボタンが入る要素 (entryNode.container)

普通は、サイトに entryNode が1つまたは複数あり、そのそれぞれの中に entryNode.title, entryNode.uri, entryNode.container があるという構成になります。

それぞれの要素は、CSS のルールを用いて、JavaScript で指定します。例えば、あるブログでは次のように設定されているとします。 

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

この例では、section クラスを持つ div 要素のひとつひとつがエントリとなります。それぞれのエントリに対し、h3 要素 (記事の見出し) の中の a 要素 (uri) がエントリの permalink に、h3 要素 (title) がエントリのタイトルに対応します。h3 要素 (container) の末尾に スター ボタンが表示されます。

この設定の 'div.section', 'h3 a', 2つの 'h3' を目的のページに合わせて正しく変更することで、お使いのブログなどにスターを設置することができます。

はてなスターで使える CSS セレクタ

要素を指定するための CSS セレクタには、以下が使えます:

E
タグ E の HTML 要素
E.class
クラスが class である要素 E
E#id
ID が id である要素 E
E F
要素 E の子孫である要素 F
E, F
要素 E または 要素 F
E > F
要素 E の直接の子要素である要素 F
E:first-child
要素 E の最初の子要素
E:first-child
要素 E の最後の子要素
E:nth-child(n)
要素 E の n 番目の子要素
E:nth-child(an+b)
要素 E の a × n + b (n = 0, 1, 2, …) 番目の子要素

また、CSS の仕様には含まれていませんが、uri, title, container には次の特殊なセレクタも使えます:

parent
エントリのノード自身
window.location または document.location
ページのURL
document.title
ページのタイトル

複数の指定

さらに、次のようにエントリを複数指定することもできます。

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.section': {
      uri: 'h3 a',
      title: 'h3',
      container: 'h3'
    },
    'div.commentshort p': {
      uri: 'span.timestamp a',
      title: 'span.commentbody',
      container: 'span.timestamp'
    }
  }
};

1つのエントリの中に、複数のスターを表示することもできます。 

entryNodes: {
    'div.section': [
        { uri: 'h3 a', title: 'h3', container: 'h3' },
        { uri: 'h3 a', title: 'h3', container: 'parent' }
    ]
}

SiteConfig

あなたのサイトがブログサービスにホストされていて、テンプレートが決まっているような場合には、SiteConfigWiki - はてなスター にその設定を書いておくと、同じ HTML 構造を持つページにスターを設置しようとしている他のユーザさんが同じ設定を書く手間がはぶけます。

■ その他の参考情報

はてなスター機能を追加する際に参考になるページをご紹介します。

はてなからの説明

tDiary

JUGEM

ロリポブログ

WordPress

MovableType

その他