アメブロにはてなスターを設置 | アメブロ解体新書

アメブロ解体新書

Amebaブログウォッチング・・・

はてなスター

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

はてなスターとは?

日々ブログを読んでいていいなと思っても、コメントを書いたりトラックバックを送るのは敷居が高く、気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。

はてなスターは既存のブログにワンクリックでがつけられます。あなたのいいなと思った気持ちをに変えて、世界のブログにをつけよう!


はてな版の「イイネ」ボタンのようなものらしいんですが残念ながらあまり普及してません。

はてなダイアリーにはデフォでついてるんですがよほどの人気ブログじゃないかぎりクリックされないようです・・・

そんなはてなスターですがアメブロにも設置できます。

旧スキンだと面倒だったんですが新スキンになってちょっと簡単になりました。

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


はてなのガイドページの「トークンの設定を行わずにはてなスターを使うことも可能です」を参考に、

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

アメブロ新スキンの記事タイトルは「skinArticleHeader2」のclass要素の「h1」になってるので「entryNodes」の内容を上の例のようにしてフリープラグインに挿入すれば記事タイトルの末尾にはてなスターが表示されます。

フリープラグインの文字数制限があるのではてなスター設置だけのためにエリアが圧迫されちゃいますが・・・