Bloggerに「いいねボタン」を自作しました【Firebaseでカウント機能を実装】

テーマをF-lightに変更したのを機に、ブログに「いいねボタン」を付けました。F-lightに変更した理由のひとつに「いいねボタン」を付けたいというのがありました。真似をすれば付けられるのかと思ったけどダメだった。またGemini頼りになってしまいました。

いいねボタンが欲しい

X(旧Twitter)での「いいね」が嬉しくて、ブログにも「いいねボタン」があったらいいのにと思っていました。実は前テーマSMARTの時にも、付けようと頑張ったことがありましたが、挫折してsharethisのリアクションボタンにしてしまいました。

F-lightなら付けられるかも

テーマをF-lightに変えたかったのは、テーマ作者である、ふじやんさんのサイトでいいねボタンが付いていたので、見様見真似ならできるかもという下心もありました。

真似でも難しかった

ふじやんさんのサイトを見たり、そこからリンクされているサイトを読んだりと頑張りましたが、完全に知識不足です。こちらのむーなかさんのサイトには更に詳しく書いてありましたが、Google Apps Scriptすら知らない私には歯が立ちません。

Google Apps ScriptとGoogleスプレッドシートを使っていいねボタンを作る | むーなかのお知らせ

Geminiに頼ってみた

👉わたし:「外部サイト使わないで、いいねボタンを付けたい」
✦Gemini:「Firebaseを使ってデーター保存がいいです」
👉わたし:「Firebase? 他の方はGASだよ?」
✦Gemini:「リアルタイム性が大事な機能には、Firebaseです！」
👉わたし:「そこまで言うなら、それ教えて」

Geminiの言う実装までの４ステップ

１．Firebase（データベース）の準備
２．Firebase SDKのコードを取得
３．BloggerのHTMLにコードを貼り付け
４．JavaScriptで連動させる

ステップ1：Firebaseプロジェクトの作成

Firebase コンソールにアクセスしてGoogleアカウントでログイン
「プロジェクトを追加」をクリック
プロジェクト名に「nozpn-like-button」など好きな名前を入力
「Google アナリティクス」の設定画面はオフにして「プロジェクトを作成」をクリック

※Firebaseは「Sparkプラン（無料）」で十分運用可能です。よほどアクセスが爆発しない限り無料で使い続けられます。

ステップ2：Realtime Databaseの作成

ダッシュボード左メニューから「構築」→「Realtime Database」を選択
「データベースを作成」をクリック
ロケーションは「米国（us-central1）」のままで「次へ」をクリック
「テストモードで開始」を選択して「有効にする」をクリック

注意：テストモードは30日間限定のため、最後に設定変更が必要です。

ステップ3：接続用コード（SDK）の確認

画面左上の歯車アイコンから「プロジェクトの設定」
「マイアプリ」セクションから「</>」（ウェブアイコン）をクリック
アプリのニックネーム（nozpn-web）を入力し「アプリを登録」をクリック
「Firebase SDK の追加」画面に、以下のようなコードが表示されます。

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "nozpn-...",
  databaseURL: "https://...",
  projectId: "nozpn-...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

この firebaseConfig の中身（{ } で囲まれた部分）がBloggerとデータベースをつなぐ「鍵」になります。

ステップ4：Bloggerへの実装

１．いいねボタンのCSS追加
/*==== SNS シェアボタン ====*/の末尾に追記しました。

/* いいねボタン本体 */
.like-button {
  background: #ff6b6b; 
  position: relative; /* 数字を配置する基準 */
  cursor: pointer;
}

/* 数字の部分：ボタンの真下に */
.like-count {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff6b6b;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: sans-serif;
  line-height: 1;
}

/* ハートアイコン */
.like-button::before {
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}

２．HTMLの書き換え
サービスが終了しているpocketへのシェアボタンを削除して、その場所に「いいねボタン」を追加しました。

<span class='like-button' id='like-btn' onclick='pushLike()' role='button' title='いいね'><div class='like-count' id='like-count'>0</div></span>

３．JavaScriptの追加（Firebase連携）
</body>直前にコードを追記しました。

<!-- Firebase連携 -->
<script src='https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js'><!-- Blogger対策 --></script>
<script src='https://www.gstatic.com/firebasejs/10.13.2/firebase-database-compat.js'><!-- Blogger対策 --></script>

<script>
 //<![CDATA[
  // Firebase初期設定
  const firebaseConfig = {
    apiKey:"AIza.....（中略）.....TlRuFEw",
    authDomain: "YOUR_PROJECT.firebaseapp.com",
    databaseURL: "https://YOUR_PROJECT.firebaseio.com",
    projectId: "YOUR_PROJECT",
    storageBucket: "YOUR_PROJECT.firebasestorage.app",
    messagingSenderId: "87...(中略)...42",
    appId: "1:8799.....（中略）.....2dac4b"
  };

  firebase.initializeApp(firebaseConfig);
  const database = firebase.database();

  // 記事ごとの一意のIDを取得
  const postId = window.location.pathname.replace(/[/.]/g, '_');
  const likeRef = database.ref('likes/' + postId);
  const countEl = document.getElementById('like-count');

  // データの読み込み
  if (countEl) {
    likeRef.on('value', (snapshot) => {
    const data = snapshot.val();
    countEl.innerText = data ? data : 0;
   });
  }

  // ボタンが押された時の処理
  function pushLike() {
    // 1. Firebaseのカウントアップ
    likeRef.transaction((currentCount) => {
      return (currentCount || 0) + 1;
    });

    // 2. Googleフォームへの通知送信
    try {
      const fURL = "https://docs.google.com/forms/d/e/1FA...（中略）...b4edyg/formResponse";
      const eID = "entry.82...(中略)...92"; //
      const pURL = window.location.href;

      // no-corsモードでバックグラウンド送信
      fetch(fURL + "?" + eID + "=" + encodeURIComponent(pURL), { mode: 'no-cors' });
    } catch (e) {
      console.error("Notification error:", e);
    }

    // 3. アニメーションとグレーダウン
    const btn = document.getElementById('like-btn');
    if (btn) {
      btn.classList.add('clicked');
      btn.style.pointerEvents = 'none'; // クリック不可
      btn.style.background = '#ccc';    // グレーダウン
      btn.style.opacity = '0.7';
    }

    setTimeout(() => {
      if (btn) btn.classList.remove('clicked');
    }, 300);
   }
 //]]>
 </script>

完成したコードをChatGPTに確認したところ、Firebaceのバージョンが低すぎる（Geminiは9.1で書いてた）のと、トップページには「いいねボタン」がないのにJSが動いてるとの指摘で、コードを修正してもらいました。
上記コードはChatGPTの指摘分を修正済みです。

※上記のコード内に、「 // 2. Googleフォームへの通知送信」がありますが、これは通知用です。今の段階では不要ですので、通知不要な方はそのブロックを削除してください。

最後に「ルール」の変更

テストモードのままだと30日で動かなくなるため、Firebaseの「Realtime Database」→「ルール」タブを書き換えます。いたずら防止（１ずつしか増やせない設定）を盛り込んだ、Gemini直伝のコードがこちらです。これで期限なくボタンが動くようになります。

{
  "rules": {
    ".read": true,
    "likes": {
      "$postId": {
        ".write": "newData.isNumber() && (!data.exists() || newData.val() === data.val() + 1)"
      }
    }
  }
}