【Blogger】いいねボタンを Google フォームで作る方法

ブログを運営していると、読者の方からの反応が欲しいと思うことがあります。特に「いいね！」のようなポジティブな反応は、ブロガーにとって大きな励みになりますよね。

あいにく Blogger にはデフォルトでそのような機能はありませんが、Google フォームを使って簡単にいいねボタンを導入することができます。その方法を以下に記します。

【Blogger】リアクションボタンを Google フォームで作る方法

この記事の目次

• Google フォームを作成
• HTML でいいね送信フォームを作成
• JavaScript でお礼メッセージを表示
• GAS でいいね通知メールを受け取る
• あとがき

Google フォームを作成

以下のページの「フォームに移動」をクリックし、Google フォームを新規作成します。

• Google Forms: オンライン フォーム作成ツール | Google Workspace

フォームのタイトルは「いいねボタン」のように各々でわかりやすいものにしておけば大丈夫です。

次に、フォームに以下の 3 つの項目を用意します。全ての項目の「必須」のトグルスイッチをオンにしておきます。

• 記事 ID（記述式テキスト）
• 記事タイトル（記述式テキスト）
• 記事 URL（記述式テキスト）

どの記事にいいねされたかわかるように、記事 ID、タイトル、URL 用の項目をそれぞれ用意しています。記事のタイトルや URL を変更しても、記事 ID が同じならば同一の記事とみなせます。

最後に、フォームの設定画面で「回答」の「メールアドレスを収集する」を「収集しない」、「表示設定」の「制限事項」の「すべての回答者に対して自動保存を無効にする」のトグルスイッチをオンにしておけば、Google フォームの作成は完了です。

↑ 目次に戻る

HTML でいいね送信フォームを作成

いいねを Google フォームに送信するためのフォームを HTML で作成していきます。

まず、以下の記事の「Google フォームのソースから、フォームと各質問の値を拾ってコピー」の項を参考にして、先程作成した Google フォームのフォーム自体の値と前項で設定した 3 つの項目の値を抜き出します。

• Google フォームのデザイン・完了ページをカスタマイズ | リモスキ

値が取得できたら、Blogger のテーマ編集に移動し、ブログの投稿ウィジェット内の記事本文 <data:post.body/> の下辺りに以下のコードを貼り付けます。

<b:if cond='data:view.isPost'>
  <div class='like'>
  
    <!-- いいねボタン -->
    <button class='like-button' form='send-like' onclick='sendLike(this)' title='記事に「いいね！」する' type='submit'>いいね&#65281;</button>
    
    <!-- フォームの送信先 URL -->
    <form action='https://docs.google.com/forms/d/e/●●●●/formResponse' class='like-form' id='send-like' method='POST' style='display: none' target='hidden_iframe'>
    
      <!-- 記事 ID, タイトル, URL -->
      <input expr:value='data:post.id' name='entry.●●●●' type='hidden'/>
      <input expr:value='data:post.title.escaped' name='entry.●●●●' type='hidden'/>
      <input expr:value='data:post.url.canonical' name='entry.●●●●' type='hidden'/>
      
      <!-- 送信完了後の処理用 iframe -->
      <iframe class='like-iframe' name='hidden_iframe'/>
      
    </form>
  </div>
</b:if>

上のコードの ●●●● の部分を、先程取得したフォームの値と各質問項目の値に書き換え、テーマを保存してください。

以下、コードの簡単な解説です。

下に示すコードでは、Blogger 独自タグの記事 ID data:post.id、記事タイトル data:post.title.escaped と記事 URL data:post.url.canonical をそれぞれ input の value 属性に埋め込んでいます。

<input expr:value='data:post.id' name='entry.●●●●' type='hidden'/>
<input expr:value='data:post.title.escaped' name='entry.●●●●' type='hidden'/>
<input expr:value='data:post.url.canonical' name='entry.●●●●' type='hidden'/>

文字列型のデータに .escaped を付けると文字列がエスケープされ、思わぬ誤作動を防げます。また、URL 型のデータに .canonical を付けることで URL の正規化を行い、これにより ?m=1 などのパラメータが付与されるのを防ぎます。

• Les réglages d'échappement de caractères : escaped, jsEscaped, jsonEscaped, cssEscaped - Blogger Code PE
• Le réglage URL canonique : canonical - Blogger Code PE

さらに、input に type='hidden' を付けることでユーザーから見えない隠しデータとして扱うことができます。

• <input type="hidden"> - HTML: ハイパーテキストマークアップ言語 | MDN

このように記事の情報を Google フォームに送信することで、どの記事にいいねされたのか回答ページで確認できます。

CSS の例は以下の通りです（要改変）。テーマ編集の </head> の上辺りへの追加を推奨します。

<b:if cond='data:view.isPost'>
<style>
/* いいねボタン */
.like{
  margin: 3em 0;
  line-height: 1;
}
.like-button{
  display: block;
  margin: auto;
  background: #333;
  color: #fff;
  padding: .75em 1.5em;
  border-radius: 2em;
}
.like-button:not([disabled]):hover,
.like-button:not([disabled]):focus,
.like-button[disabled]{
  background: #666;
}
</style>
</b:if>

↑ 目次に戻る

JavaScript でお礼メッセージを表示

いいねボタンを押したのになにも反応がないとなんだか物悲しいので、JavaScript でお礼メッセージを表示させようと思います。

以下のコードをテーマ編集の </body> の上辺りに追加します。

<b:if cond='data:view.isPost'>
<script>//<![CDATA[
function sendLike(button){

  // フォーム内の要素を取得
  const form = document.querySelector('.like-form');
  const iframe = document.querySelector('.like-iframe');
  
  // フラグの初期化
  let submitted = false;
  
  // 送信が完了したらフラグを立てる
  form.addEventListener('submit', () => {
    submitted = true;
  })
  
  // iframe 読み込み完了後に実行
  iframe.addEventListener('load', () => {
    if(submitted){
    
      // いいねボタン無効化、内部テキスト変更
      button.disabled = true;
      button.textContent = 'いいね済み';
      
      // お礼メッセージを表示
      alert('いいねありがとうございます!!');

    }
  })
}
//]]></script>
</b:if>

フォームへの送信が完了したらフラグを立て、隠し要素の iframe の読み込みが完了したらいいねボタンの無効化と内部テキストの変更を行い、最後にお礼メッセージを表示させます。

いいねボタンを無効化することで、連続でいいねできないようにしています。お察しの通りページをリロードしたらまたボタンが押せるようになりますがそこはご愛嬌ということで……。

ここまでできたらテスト送信をして、Google フォームの回答ページで記事 ID、タイトル、URL が反映されていることを確認します。

テスト送信をした記事や時刻を覚えておかないと、テスト送信したものと読者の方が送ってくれたものとの区別が付かなくなるので気を付けてください。

無事に動作確認ができたら、これでいいねボタンの完成です！！

↑ 目次に戻る

GAS でいいね通知メールを受け取る

Google フォーム純正のメール通知機能では回答が送信されたという事実しかわからず、肝心の回答の内容は教えてくれません。

そのたびに Google フォームを確認するのはちょっと面倒なので、どの記事でいいねが押されたのかメールで受け取れるようにしたいと思います。Google App Script（GAS）を使う方法について説明します。

GAS の導入方法は以下の記事を参考にして行ってください。スクリプトの内容が違うこと以外は同じ流れで進めていただければオッケーです。

• Googleフォームの問い合わせ内容を、メールで直接受け取るカスタマイズ | リモスキ

Google フォームからスクリプトエディタを開いたら、以下のコードを記述します。

function submitForm(e){
  const itemResponses = e.response.getItemResponses();
  let title, url;
  for(const itemResponse of itemResponses){
    const question = itemResponse.getItem().getTitle();
    const answer = itemResponse.getResponse();
    switch(question){
      case '記事タイトル':
        title = answer;
        break;
      case '記事 URL':
        url = answer;
        break;
    }
  }
  const recipient = 'mail@example.com';
  const subject = '記事にいいねされました';
  const body = `以下の記事にいいねされました。\n\n${title}\n${url}\n\nGoogleフォームで確認する\n${e.source.getEditUrl()}`;
  GmailApp.sendEmail(recipient, subject, body);
}

mail@example.com の部分はご自身のメールアドレスに変更して保存してください。

プロジェクトのタイトルは「いいねボタン」のように各々でわかりやすいものにしておけば大丈夫です。

トリガーまで設定し終えたら再びテスト送信をして、指定したメールアドレス宛にメールが届いているか、以下の画像のように記事タイトル、記事 URL、Google フォームの編集 URL がメールの本文に反映されているかを確認してください。

GAS を設定した Google アカウントとメール通知を受け取る Google アカウントが同一の場合は、Gmail の「受信トレイ」ではなく「送信済み」または「すべてのメール」に通知メールが届いているはずです。

無事動作確認ができたら設定完了です！！

↑ 目次に戻る

あとがき

Google フォームを利用していいねボタンを作成する方法をご紹介しました。今回は文字だけのシンプルないいねボタンでしたが、画像を用いたりボタン押下後の動きを工夫したりするとよりオリジナリティのあるボタンが作れるのではないかと思います。

気軽に記事への反応が欲しい方の参考になれば幸いです。ここまで読んでいただきありがとうございました！