How to Add a Like Button to Your Article Using Google Forms

How to Add a Like Button to Your Article Using Google Forms

Adding a Like button to your blog posts is an excellent way to engage readers and understand their appreciation for your content. In this guide, you’ll learn how to create a Like button using Google Forms and embed it in your blog. Let’s get started!

Step 1: Create a Google Form

Follow these steps to create a Google Form:

1. Visit Google Forms and create a new form.
2. Give your form a name like “Article Likes.”
3. Add a short-answer question with the label “Article Title or URL.” This allows you to track which article received the Like.

Step 2: Set Up Email Notifications

To get notified when someone submits a Like, you can use Google Apps Script. Follow these steps:

1. Open the Script Editor

In your Google Form, click the three dots in the top-right corner and select Script editor.

2. Add the Notification Script

Replace any existing code with the following script. Update your-email@example.com with your email address:

function likeSubmitForm(e) {

  const itemResponses = e.response.getItemResponses();

  const message = itemResponses.map(itemResponse => itemResponse.getResponse()).join('');

  const address = 'your-mail@example.com';

  const title = 'Article has been liked';

  const content = message + '\n\nCheck the responses on Google Forms ';

  GmailApp.sendEmail(address, title, content);

}

3. Save and Authorize the Script

Click the floppy disk icon to save the script and name your project (e.g., “Like Button Notifications”). Then, run the createTrigger function. You will be prompted to authorize the script. Follow the instructions to grant permission.

Step 3: Embed the Like Button in Blogger

Now it’s time to embed the Like button in your Blogger post:

1. In Google Forms, click the Send button and copy the form link.
2. Open your Blogger dashboard and go to Theme > Edit HTML.
3. Find the <data:post.body/> tag and insert the following code below it. Replace FORM_LINK with your form’s URL and ENTRY_ID with the corresponding entry ID:

<b:if cond="data:view.isPost">

  <div class="like">

    <button class="like-button" form="send-like" type="submit">Like</button>

    <form action="https://docs.google.com/forms/u/0/d/e/FORM_ID/formResponse" class="like-form" id="send-like" method="POST" style="display:none;" target="hidden_iframe">

      <input expr:value='data:post.title + " | " + data:post.url' name="entry.ENTRY_ID" readonly="readonly" type="text" />

      <iframe class="like-iframe" name="hidden_iframe" style="display:none;"></iframe>

    </form>

  </div>

</b:if>

  <script>

//<![CDATA[

window.addEventListener("DOMContentLoaded", () => {

  const button = document.querySelector(".like-button");

  const form = document.querySelector(".like-form");

  const iframe = document.querySelector(".like-iframe");

  let submitted = false;

  // Show button after 2 seconds

  setTimeout(() => button.classList.add("show-like-button"), 2000);

  form.addEventListener("submit", () => {

    submitted = true;

  });

  iframe.addEventListener("load", () => {

    if (submitted) {

      button.disabled = true;

      button.textContent = "Liked!";

      alert("Thanks!");

    }

  });

});

//]]>

</script>

Step 4: Test the Like Button

Once you've embedded the Like button, follow these steps to test it:

1. Publish a post and click the Like button to ensure it works correctly.
2. Check your email to confirm you are receiving notifications for each Like.

FAQs: Adding a Like Button Using Google Forms

1. Can I track Likes without email notifications?

Yes, you can track all responses in Google Forms or the connected spreadsheet without enabling email notifications.

2. Will this Like button work on platforms other than Blogger?

Yes, as long as the platform supports HTML, you can embed the Like button wherever you need.

3. Can I customize the Like button’s design?

Absolutely! You can modify the provided CSS to match your blog’s theme and style.

4. How do I prevent users from submitting multiple Likes?

You can enable the “Limit to 1 response” option in Google Forms settings, but this will require users to sign in with their Google account.

5. Is this method free to use?

Yes, this method is completely free as it uses Google Forms and its associated tools.