Hatena::ブログ(Diary)

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

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

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

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

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種類のテンプレート(クラッシックテンプレートウィジェットテンプレート)がありますが、この解説はウィジェットテンプレートを利用したものです。

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/1184453490
 |