【Contempo他】Bloggerにはてなスターを付ける

｜2023/09/06
アイキャッチ

今回のカスタマイズ内容は Contempo 等の公式新テーマ(Emporio を除く)限定です。
Emporio や旧テーマでもテストしてみましたが上手くいきませんでした。

Bloggerにはてなスター
CONTENTS

Blogger でも使える？

はてなのリアクションサービスである「はてなスター」は、はてな以外のブログサービスにも設置が可能で、当ブログでも以前から利用しています。

ファビコンはてな Support
サムネイル
はてなスターはじめてガイド
https://hatena.zendesk.com/hc/ja/articles/900002669366

対応ブログサービスのリストには Blogger も含まれています。

ですが、Blogger の場合は手順通りにスクリプトを設置しても、トップページの記事タイトル横にはてなスターは表示されますが、個別ページでは表示されません。これではあまり意味がないですよね。
表示されない原因は単純で、個別ページでは記事タイトルが記事ページのパーマリンクになっていない為です(h3 の a 要素を判別して表示している)。つまりリンクを付けてやればいいということです。

記事タイトルにリンクを付ける手順

個別ページのタイトルにパーマリンクを付ける手順はこちらの結城永人さんのブログに詳しく書かれています。

ファビコン些細な日常
サムネイル
Bloggerブログで投稿の日付からアーカイブページへ記事タイトルから記事ページへリンクする方法
Bloggerの公式テーマは投稿の日付から記事ページへリンクが付けられていてちょっと不可解だ。構わないといえば構わないけれども記事タイトルに変更しながら投稿の日付からはアーカイブページへのリンクと付け替えた。
https://www.nagahitoyuki.com/2018/09/how-to-link-from-posting-date-to-archive-page-and-from-article-title-to-article-page-in-blogger-blog.html

テーマ編集は必ず予めバックアップを取ってから行って下さい。

テーマ編集(HTML)画面にて <b:includable id='postTitle' var='post'> を検索で探します(編集画面内をクリックでアクティブな状態にして Ctrl + F で検索できます)。

<b:includable id='postTitle' var='post'> から </b:includable> までの部分を丸ごと以下のコードと入れ替えます。

※ Emporio を除く新テーマ共通のコードです。
※タイトルの見出しを h3 以外に変更している環境では はてなスターが表示されない可能性があります。

<b:includable id='postTitle' var='post'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title != ""'>
    <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <meta expr:content='data:post.url.canonical'/>
        <a expr:href='data:post.link ?: data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a>
      <b:else/>
        <meta expr:content='data:post.url.canonical'/>
        <a expr:href='data:post.url' rel='bookmark' title='permanent link'>
        <data:post.title/>
        </a>
      </b:if>
    </h3>
  </b:if>
</b:includable>

これで記事ページや固定ページのタイトルにパーマリンクが付いてるはずです。
あとははてなスターのスクリプトを設置するだけです。

はてなスター スクリプトの設置

ファビコンHatena Developer Center
サムネイル
はてなスターをブログに設置するには | Hatena Developer Center
はてなスターの仕組み
https://developer.hatena.ne.jp/ja/documents/star/misc/hatenastarjs

登録方法やトークン設定やカスタマイズ等の詳細は上記リンク先を御覧ください。
基本的には以下のスクリプトを「HTML/JavaScript」ウィジェットとして適当な場所に設置するだけで、はてなスターが表示されてちゃんと機能するはずです。

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

以上、ちょっと限定的な環境での導入方法しか検証できてなくて申し訳ないですけど、当該テーマをご使用の方はお試しくださいませ。