はてなブログ以外に「はてなスター」を設置する方法 ⭐

2分くらいで読める

タグ:

概要

はてなブログにある「はてなスター」。 自分は、この「はてなスター」の文化が好きで、いいなと思ったブログには ⭐ ️をたくさんつけちゃう派。

はてなスターをはてなブログ以外のブログにも設置できることを知ったので、neko-kaburiにも設置してみることにした。

前置き

はてなスター設置方法のドキュメントは以下にあるょ。
Hatena Developer Center > はてなスター > はてなスターをブログに設置するには

はてなスターを設置する方法

はてなスターを設置するには、HatenaStar.js を読み込む必要がある。
ブログによっては、これだけではてなスターが表示される場合もあるが、独自で構築したブログでは大抵の場合は機能しないと思われる。


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

HatenaStar.js だけで機能しない場合は、別途以下のようなJSを書く必要がある。


  • Hatena.Star.SiteConfig に以下のオブジェクトを指定する
    • entryNodes というキーに対し、スターを設置したいページ (大抵は記事詳細ページになるはず) を表すHTML要素のオブジェクトを指定する
      • 上記の要素をキーにして、以下3つの要素を持つブジェクトを指定する
        • uri (スターを設置したいページのpermalink)
        • title (スターを設置したいページのブログタイトル)
        • container (Add Starボタンを設置したい場所)

neko-kaburi だと以下のような構造になる。


<script type="text/javascript">
  Hatena.Star.SiteConfig = {
    entryNodes: {
      'article': {
        uri: 'window.location',
        title: 'h1',
        container: 'div.hatena-star'
      },
    }
  };
</script>
  • neko-kaburiの記事詳細ページは <article> にあるので、article というオブジェクトのキーに対して、uri, title, container をそれぞれ指定した
  • 使用可能なCSSセレクタについても上記のドキュメントに記載がある

無事にはてなスター設置できた ⭐️ ️

ちなみに、つけたスターは取り消すこともできる。
(カラフルな星を押して、表示された画面の右下のアイコンから削除操作ができる)

おわり

最近、すごくありがたいなーと思うブログに出会っても、「いいね」やコメント機能がなく、一方通行で読ませてもらうだけになってしまい、もどかしい気持ちになることが多々あった。
そんな背景もあり、なるべく一方通行にならないようにしようと思い、neko-kaburiにもはてなスターを設置してみた。
簡単に導入できてありがたかった。

参考