How to Add a Like Button to Your Webflow Website: A Step-by-Step Guide

Have you ever wanted to add a like button to your blog or other CMS collection pages? Webflow does not have this native functionality but this can be easily achieved using custom code, You don't even need a third party tool like Jetboost.

‍

In this guide, we'll walk you through the process of adding a like button and using pure HTML and JavaScript to handle the counting and displaying of the like count.

‍

Without further ado, lets get right into it.

‍

Step 1: Add the Like Button to Your Website

‍

Go to your CMS collection template page, insert an embed element to where you want your button to appear on the page.

‍

Visit fontawesome to get your button icon it could be a "heart" or "thumbs up", you can get the icons in here.

‍

You can copy the HTML code of the icon e.g. "<i class="far fa-thumbs-up">

‍

Insert this HTML code:

‍

<button class="like-btn" data-post-id="your-post-slug">
 <span id="icon"><i class="far fa-thumbs-up"></i></span>
 <span id="count">0</span> Like
</button>

‍

Make sure to replace the "your-post-slug" with the slug on of your colletion item, you can do this by pressing "+Add Field" on top of the html embed.

‍

Next you may want to add some styling to the button e.g.:

‍

<style>
.like-btn {
 padding: 10px 15px;
 background: #0000;
 font-size: 18px;
 font-family: "Open Sans", sans-serif;
 border-radius: 5px;
 color: #fff;
 outline: none;
 border: none;
 cursor: pointer;
}

</style>

‍

Step 2: Implement JavaScript for Like Count

‍

Add the following JavaScript code within the <script> tags before the closing </body> tag:

‍

<script>
document.addEventListener("DOMContentLoaded", () => {
 const likeButtons = document.querySelectorAll(".like-btn");

 document.addEventListener("click", event => {
   if (event.target.classList.contains("like-btn")) {
     let likeIcon = event.target.querySelector("#icon");
     let count = event.target.querySelector("#count");
     let postId = event.target.getAttribute("data-post-id");

     let likedByUser = localStorage.getItem(`likedByUser_${postId}`) === "true";

     if (!likedByUser) {
       likedByUser = true;
       likeIcon.innerHTML = `<i class="fas fa-thumbs-up"></i>`;
       count.textContent++;

       localStorage.setItem(`likedByUser_${postId}`, "true");
       localStorage.setItem(`likeCount_${postId}`, count.textContent);
     }
   }
 });

 // Update like counts from localStorage on page load

‍
 likeButtons.forEach(likeBtn => {
   let postId = likeBtn.getAttribute("data-post-id");
   const storedLikeCount = localStorage.getItem(`likeCount_${postId}`);
   if (storedLikeCount) {
     likeBtn.querySelector("#count").textContent = storedLikeCount;
   }
 });
});
</script>

‍

Step 3: Enjoy Likes That Persist

‍

With this simple implementation, your users can now like your content, and the like count will be stored in the browser's local storage. Even after refreshing the page, the like count will persist, providing a seamless and interactive experience for your visitors.

‍

In conclusion, adding a like button to your website can significantly enhance user engagement. By combining HTML and JavaScript, you can create an interactive element that not only allows users to express their appreciation but also ensures that their likes are retained across sessions.

‍

Remember to customize the code to match your website's design and structure. Now you're ready to create a more engaging and interactive user experience with a like button on your website!

‍

‍