Bloggerにスプレッドシート+GAS+JavaScriptで「いいね」ボタンを実装する

 

1. はじめに：ブログに「いいねボタン」を設置する魅力

読者が記事を読んで「面白い」「共感した」と思った瞬間、ワンクリックで反応できるボタンがあるとブログの魅力はぐっと高まります。

今回紹介する「いいねボタン」の特徴は、単にクリックできるだけでなく、いいねの総数が常に表示される点です。これにより、他の読者の反応も一目で分かり、記事の人気度や評価を直感的に把握できます。

2. いいねボタン導入のメリット

• 読者の反応を可視化できる
  → いいねの総数が表示されるので、記事の人気度が一目で分かる
• 人気記事の把握が簡単
  → 数字として集計できるため、どの記事が支持されているかがすぐに把握可能
• ブログのエンゲージメント向上
  → コメントやシェア以外の手軽なリアクション手段として、読者の参加意欲を促せる
• 操作が簡単でUX向上
  → ワンクリックで反応できるため、読者のストレスなく参加可能

3. いいねボタンのサンプル

このページの関連記事上に設置・表示させています。ハートのマークで、ホバーすると枠が赤っぽくなり、押すと全体が赤くなります。

4. 参考にしたブログ

Muunaka Blog – Likeボタン
→ このブログの方法の発想をベースに、今回の「いいねボタン」システムを作成しました。

5. 仕組みを簡単に

• Blogger にボタンを設置
  HTML＋Font Awesome アイコンでボタンを表示し、クリックするとリアルタイムで総いいね数が更新される
• GAS + スプレッドシートでデータ管理
  記事 URL とタイムスタンプをスプレッドシートに記録。GET リクエストで総いいね数を取得、POST リクエストでいいねを追加
• JavaScript でボタンと総いいね数を連動
  ボタンをクリックすると GAS に送信。スプレッドシートに記録された総いいね数を画面に反映

特徴：総いいね数が表示される

5. いいねボタンの実装手順

5-1. スプレッドシート準備

Google スプレッドシートを作成し、以下のカラムを作成します。シート名の指定は特にありませんが、1シート目が対象となっています。

A1	B1
timestamp	titleURL

6-2. Google Apps Script 作成 ＆ コード

「拡張機能 → Apps Script」で新規プロジェクトを作成し、以下コードを貼り付けます：

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  const titleURL = e.parameter.titleURL;

  const values = sheet.getRange(2, 1, sheet.getLastRow()-1, 2).getValues();
  const count = values.filter(row => row[1] === titleURL).length;

  return ContentService
    .createTextOutput(JSON.stringify({ likeCount: count }))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  const titleURL = e.parameter.titleURL;

  sheet.appendRow([
    new Date().toLocaleString("ja-JP"),
    titleURL
  ]);

  return ContentService
    .createTextOutput("OK");
}
  

ウェブアプリとしてデプロイし、アクセスできるユーザーを「全員」に設定します。発行された GAS_URL を控えてください。

6-3. Blogger 記事ページにボタン設置（HTML + JS）

記事ページのみに表示するため、以下のように <b:if cond='data:blog.pageType == "item"'> で囲みます：

<b:if cond='data:blog.pageType == "item"'>

<div class="like-wrapper">
  <button class="heart-btn" id="likeBtn">
    <i class="far fa-heart" id="heart"></i>
  </button>
  <span id="likeCount">0</span>
</div>

<script>
var GAS_URL = "ここにGAS_URLを入力"; // Google Apps Script Webアプリ URL
var identifier = location.href;

var likeBtn = document.getElementById("likeBtn");
var likeCount = document.getElementById("likeCount");
var heart = document.getElementById("heart");

fetch(GAS_URL + "?titleURL=" + encodeURIComponent(identifier))
  .then(res => res.json())
  .then(data => { likeCount.textContent = data.likeCount; });

likeBtn.addEventListener("click", function(){
  fetch(GAS_URL, {
    method: "POST",
    body: new URLSearchParams({ titleURL: identifier })
  })
  .then(res => res.ok ? res.text() : Promise.reject("送信失敗"))
  .then(() => {
    likeCount.textContent = parseInt(likeCount.textContent) + 1;
    heart.classList.remove("far");
    heart.classList.add("fas");
    likeBtn.classList.add("liked", "animate");
    likeBtn.disabled = true;
    setTimeout(() => likeBtn.classList.remove("animate"), 600);
  })
  .catch(err => { console.log(err); alert("送信失敗"); });
});
</script>

</b:if>
  

解説：
- <b:if cond='data:blog.pageType == "item"'> は記事ページのみに表示する条件
- 設置場所は記事本文下やコメント欄上など、記事ページで確実に読み込まれる位置が推奨です

6-4. CSS（デザイン用）

<style>
.like-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
}
.heart-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #e74c3c;
  transition: transform 0.2s ease;
}
.heart-btn.liked {
  color: #e74c3c;
}
.heart-btn.animate {
  transform: scale(1.3);
}
#likeCount {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
</style>
  

6-5. 動作確認

• 記事ページを開く
• ボタンが表示される
• クリックすると総いいね数が +1 される
• ハートが塗りつぶされ、連打不可

7. 注意点

• ユーザーごとの二重クリック防止は未実装
• URL が変わると別記事扱いになる場合がある
• スプレッドシート行数増加で処理が重くなる場合がある
• GAS 公開設定は「全員」にする

まとめ

Blogger でも簡単に「総いいね数表示付きボタン」を設置可能です。

記事ごとの反応が可視化され、ブログ運営に役立ちます。

手順内で必要なコードも全て表示されているため、読者は章を行き来せずに完結して設置できます。