Hatena::ブログ(Diary)

はてなスター日記 このページをアンテナに追加 RSSフィード

はてなスタッフのはてなスターに関する日記です。
使い方に関するご質問、不具合報告やご要望は、お問い合わせ窓口で承ります。
使い方のコツなどを知りたい時は、人力検索はてなの「はてなの使い方」カテゴリーをご利用ください。
※コメント欄へのご質問には対応できない場合がございますのでご了承ください。

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

はてなスターの仕組み

07:51 |  はてなスターの仕組みを含むブックマーク

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

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

http://s.hatena.ne.jp/images/add.gifAddボタン」が押された際にも、はてなスターサーバに問い合わせが行われ、スターの情報が保存されます。

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

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

また、「正しく動作させる」だけでなく、http://s.hatena.ne.jp/images/star.gifスターや「http://s.hatena.ne.jp/images/add.gifAddボタン」、「http://s.hatena.ne.jp/images/comment.gifコメントボタン」のアイコンを変える、といった好みに応じたカスタマイズも可能になっています。

お好みにあわせて、はてなスターをお楽しみください。

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

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

07:51 | はてなスターをブログに貼り付けるを含むブックマーク

はてなスターを利用するには、まずはてなスターにアクセスし、ログインを行った後、トップページ中央にある「ようこそ、○○さん」のリンクか右上のメニューの「ホーム」をクリックして、あなたのユーザーページにアクセスしてください。

f:id:hatenastar:20070714143642p:image

そして、ページ右側にある「Blogs」をクリックして、登録ブログ一覧にアクセスします。ここにブログを登録することで、これからスターを貼り付けるブログが、あなたのはてなアカウントとひも付けられ、星のつけられた数をブログ一覧で確認したり、メッセージが書き込まれた際にメールを受け取ったり、といったことが可能になります。

ページの一番下に「外部のブログサイトを登録する」という項目があるので、そこにスターを表示させたいブログのトップページのURLを入力して「追加」ボタンを押してください。

f:id:hatenastar:20070714143554p:image

すると、ブログが登録されて「トークン」が発行され、ブログに貼り付けるHTMLのコードが表示されます。

f:id:hatenastar:20070714143549p:image

Hatena.Star.Tokenであらわされている英数字が、あなたのブログと、はてなアカウントを結びつけるトークンです。

トークンの設定を行わずにはてなスターを使うことも可能です

このトークンの設定を行わずにはてなスターの機能を埋め込むことも可能です。この場合は上記のブログ登録とトークンの設定を省いて、以下の1行だけあなたのブログに貼り付けてください。

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

トークンの設定を行わない場合も☆を付ける機能をご利用いただくことができます。この際、はてなスターのBlogsページからのブログ登録の必要はありませんが、コメント機能をご利用いただくことはできません。また、トークンの設定を行わずにスターを設置したブログで、後からトークンを設定した場合は過去にさかのぼってブログ内のエントリーに対するユーザーの紐付けが行われますので、まず最初はトークンなしで試してみて、その後登録を行う、という使い方も可能です。

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

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

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

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

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

  • エントリに対応する HTML 要素 (entryNode)
    • エントリのタイトルに対応する要素 (entryNode.title)
    • エントリの permalink に対応する要素 (entryNode.uri)
    • "Add Star http://s.hatena.ne.jp/images/add.gif" ボタンが入る要素 (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) の末尾に http://s.hatena.ne.jp/images/add.gif ボタンが表示されます。

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

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

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

E
タグ EHTML 要素
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)
要素 En 番目の子要素
E:nth-child(an+b)
要素 Ea × 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 構造を持つページにスターを設置しようとしている他のユーザさんが同じ設定を書く手間がはぶけます。また、どこでもはてなスターが使えるサイトが増えるので一石二鳥です。


外部ブログの認証にはブログトップページにトークンの記述が必要です

外部ブログはてなスターの機能を追加した際に、個別のエントリーページのみにはてなスターの機能を追加しようとするとトークンに認証が正常に行われません。

これは、トークンの認証の際に、はてなスター側からブログトップページのHTMLを取得し、内部にトークンが含まれているかどうかのチェックを行っているためです。

外部ブログはてなスターを利用される場合には、個別のエントリーページにだけスターを表示する場合でも、

  • トップページにトークンだけを記述する
  • 最初の認証の際にだけトップページにもコードを設置する

などの対応を行ってください。

livedoor blog

まず、はてなスターに行き、自分のブログはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。

f:id:hatenastar:20070714135736p:image

続いて、livedoor blogにアクセスして、ブログの管理ページから、「カスタマイズ/管理」ページにアクセスします。左側のメニューに「デザインの設定」というリンクがあるので、そこからデザインの設定ページのアクセスします。

f:id:hatenastar:20070714135735p:image

さまざまなブログのデザインの一覧が表示されるので、その一番下にある「カスタマイズ」を選択します。

f:id:hatenastar:20070714135734p:image

すると、ブログHTMLを直接編集できる画面が表示されます。そこで「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の4つのHTMLテンプレートをそれぞれ表示して、その中の</html>というタグの直前に、はてなスターブログ登録画面で表示されたHTMLのコードをコピーします。

f:id:hatenastar:20070714135733p:image

続いて、同じく「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の4つのテンプレートの中で、「<div class="blogbody">」という部分を探し、そのすぐ下に以下のようにリンクを記述します。

<div class="blogbody">
<div class="posted" style="display:none;"><a href="<$ArticlePermalink$>"></a></div>

そして「この内容で保存する」を押して保存します。

最後に、画面左上の「ブログに設定を反映(再構築)」を選び、再構築を行います。その際には、すべてのページを再構築してください。そうすれば、すべてのページのタイトルの横に、スターが表示されるようになっているはずです。

f:id:hatenastar:20070714135922p:image

なお、一度スターを設定した後に、ブログテンプレートを変更してしまうと、それぞれのHTMLも書き換わってしまい、はてなスターの設定も消えてしまうので、その場合はもう一度この作業をやり直してください。

Blogger

まず、はてなスターに行き、自分のブログはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。

f:id:hatenastar:20070714181037p:image

続いて、Bloggerの管理画面にアクセスして、スターを設定したいブログの「テンプレート」の「HTMLの編集」画面を開きます。

f:id:hatenastar:20070714181036p:image

続いて編集画面の「ウィジットのテンプレートを展開」をクリックします。

f:id:hatenastar:20070714181035p:image

すると、テンプレートが編集できるようになっているので、</head>の直前に、貼り付け用コードをペーストします。

f:id:hatenastar:20070714181034p:image

続いて、テンプレートの中からh3タグを探し、その直下に以下のようにリンクを挿入します。

<h3 class='post-title'>
<a expr:href='data:post.url' style='display:none;' title='permanent link'></a>

これで設定を保存すると、スターが表示されるようになります。

f:id:hatenastar:20070714181033p:image

なお、Bloggerには現在、2種類のテンプレート(クラッシックテンプレートウィジェットテンプレート)がありますが、この解説はウィジェットテンプレートを利用したものです。

もっとカスタマイズをしよう

07:51 | もっとカスタマイズをしようを含むブックマーク

はてなスターでは、標準ではオレンジ色のhttp://s.hatena.ne.jp/images/star.gif星の画像が表示されるようになっていますが、この星の画像は、自分の好きなものに変更することができます。画像を、あなたのブログやサイトにもっとよくあうものに変更すれば、はてなスターをより楽しく使うことができるでしょう。

画像を変更するには、まずは使いたい画像を用意して、それをどこかにアップロードしておく必要があります。ブログサービスであれば、画像をアップロードする仕組が用意されている場合も多いので、それを利用のもよいでしょう。はてなのフォトシェアリングサービス「フォトライフ」を使うこともできます。

画像を用意したら、はてなスターを貼り付けたページのヘッダにて、以下のようなCSSを記述します。

.hatena-star-star-image {
  background-image: url(http://exapmle.com/star.gif);
}

指定している「http://exapmle.com/star.gif」というURLを、あなたが用意した画像のURLに置き換えてください。ブログサービスを利用している場合は、テンプレートや、CSSを設定する項目を探して、そこに記述してください。ブログによっては、この後再構築をする必要があります。

f:id:hatenastar:20070714163800p:image

そのほかの画像の変更方法

ちなみに、Addボタンや、コメントボタンも同様にして変更が可能です。それぞれ、以下の内容を同じように追記してください。この場合も、URLを自分がアップロードした画像に置き換えてください。

http://s.hatena.ne.jp/images/add.gifAddボタン
.hatena-star-add-button-image {
  background-image: url(http://exapmle.com/add.gif);
}
http://s.hatena.ne.jp/images/comment.gifコメントボタン(コメントなし)
.hatena-star-comment-button-image {
  background-image: url(http://exapmle.com/comment.gif);
}
http://s.hatena.ne.jp/images/comment_active.gifコメントボタン(コメントあり)
.hatena-star-comment-button-image-active {
  background-image: url(http://exapmle.com/comment_active.gif);
}

省略数字のスタイルも変えてみよう

はてなスターでは、ついたスターの数が増えてくると、すべてのスターが表示される代わりについたスターの数が表示されるようになります。このスタイルを変更することもできます。

その場合も、CSSで記述します。

.hatena-star-inner-count {
  color: #f4b128;
  font-weight: bold;
  font-size: 200%;
  padding: 0 8px;
}

 このように設定した場合には、数字の色を「#f4b128」に、フォントのスタイルを太字(bold)に、フォントのサイズを200%に、そして上下のスペースを0ピクセル、左右のスペースを8ピクセルに指定しています。

f:id:mizuno_takaaki:20070914174713p:image

 ほかにも、以下のように数字の後ろに画像を表示させることもできます(この場合は、その画像をアップロードしておく必要があります)。

.hatena-star-inner-count {
  background-image: url(http://exapmle.com/background.gif);
}

スターの表示位置を変更する

ちょっと難易度は高くなりますが、JavaScriptに手を入れることで、スターを出す位置を変更することも可能です。そのためには、Hatena.Star.EntryLoaderクラスのloadEntriesメソッドを書き換えます。このメソッドは、ブログごとに修正が必要になるメソッドです。

コメントとスターのデータを表示している部分は、以下のようになっています。

var cc = Hatena.Star.EntryLoader.createCommentContainer();
header.appendChild(cc);
var sc = Hatena.Star.EntryLoader.createStarContainer();
header.appendChild(sc);

ここでは、タイトル要素の一番後ろに両方をくっつけているため、タイトルの後ろにそれらが表示されるようになっていますが、これを違う場所に埋め込むよう、コードを書き換えることで、好きな場所に表示させることが可能です。

具体的な方法はここでは紹介しませんが、興味があったら、ぜひチャレンジしてみてください。

その他の参考情報

08:24 | その他の参考情報を含むブックマーク

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

はてなからの説明

ココログ

tDiary

JUGEM

ドリコムブログ

FC2ブログ

Seesaaブログ

ロリポブログ

WordPress

MovableType

その他

foodpfoodp 2007/07/21 23:23 h3 以外を用いたタイトルに対処する方法の記述ですが,
Hatena.Star.headerTagAndClassName
じゃなくて,
Hatena.Star.EntryLoader.headerTagAndClassName
かなと思うんですがどうでしょう(PukiWiki で試してみたら,後者の場合にちゃんと動きました).もし何かこちらの勘違いならすみませんが.

yamaco_coyamaco_co 2007/08/17 10:41 BlognPlusにも、はてなスターをブログに設置可能です。
http://www.blogn.org/


Blogn+に、はてなスターを付けてみました。
http://yamaco.jp/weblog/

hatenastarhatenastar 2007/08/27 05:41 foodpさん、ご指摘有難うございます。ご指摘のとおりでしたので、修正しました。

yohmeiyohmei 2007/12/22 16:29 Bloggerにスターを設置してみたのですが、なぜかスター追加ボタンと☆がタイトルの下に設置されてしまいます。☆も縦方向に追加されていきます。。どうやって横にするのかわかりません。。h3タグのところも直したのですが。。

HoppymanHoppyman 2007/12/26 15:02 >yohmeiさん、
ウィジットのテンプレートの .post h3 の前に
.post-title img {
display: inline;
}
を追加したら横に表示できました。

youkosekiyoukoseki 2008/11/09 22:45 E:first-childが二つあるようです。

NobuyanNobuyan 2009/03/14 02:58 初めまして、Nobuyanです。Bigrobe ウェブリブログでプログ(Blog)をやっています。
ウェブリブログで、「はてなスター」を導入する場合はどうすれば良いのでしょうか?
大変恐縮ですが、初心者で分かりつらいので、もし良かったら導入の手順を教えて頂ければ幸甚です。
今後とも宜しくお願い致します。

tom_nounaitom_nounai 2009/11/04 01:41 タグを貼りなおすために登録済みのブログのトークンをもう一度確認したいのですが
どうしたらよいですか?

massatmassat 2010/02/15 18:14 こんにちは。
上記の設置例の中の、

・WordPressに「はてなスター」を設置してみた

のエントリですがBlogの閉鎖を予定しておりまして、リンク削除していただいてよろしいでしょうか?

RanteRante 2010/03/24 21:59 ヤプログでも出してほしいなあ

Platinum-1997Platinum-1997 2011/05/11 16:24 たまに変更するとスター自体が出ないときがある

kuromajosankuromajosan 2012/02/11 16:05 amebloの「フリープラグイン」に入力しても反映されないのですが、違うところに貼り付けるのですか?

kaoritenakaoritena 2012/04/06 18:04 私のブログではてなスター設置箇所に2,3日前から「<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="" width="20" height="20" style="border: none;" />」なコードが出てきちゃうようになったのですが、どうやったら治りますか?
ここの記事のタイトルのところです。
http://www.kaoritter.com/archives/2012/0328_192932.html

ugomemo-ryotarougomemo-ryotaro 2012/07/06 18:02 >kuromajosanさん
<script type="text/javascript">
Hatena.Star.SiteConfig = {
entryNodes: {
'article': {
uri: '.skinArticleHeader2 h1 a',
title: '.skinArticleHeader2 h1',
container: '.skinArticleHeader2 h1'
}
}
};
</script>

conanTMconanTM 2013/02/10 09:59 Twitterではどうすればいいですか?

takuyarei0takuyarei0 2013/03/13 19:14 Twitterではできませんorz
星をつけるURLはあるけど見る方法なんて...。

トラックバック - http://d.hatena.ne.jp/hatenastar/20070707