How to add Like and Dislike feature in Blogger using Firebase Auth

Adding a like and dislike post feature to your Blogger website is a great way to improve user engagement and to know the feedback about your blog post. It allow visitors to instantly express their opinions about your post. However Blogger doesn't provide this feature but we can add it with the help of Firebase. Firebase is the most powerful and reliable solution to add this feature to your Blogger website.

Firebase is a backend platform by Google that offers several features like real-time database which help you to track user interaction easily. This help you improve overall user experience.

In this article we will discuss step by step to a add like and dislike post feature in Blogger using Firebase. We will share every step from setting up Firebase to adding HTML, CSS and JS for this feature in Blogger. So without wasting much time let's check how to implement this feature to your Blogger website.

How it Works?

It work with the help of the Firebase Realtime Database and Firebase Authentication. It check whether the user logged in to your website or not. If the user already logged in it stores likes or dislikes else it show the message that saying to log in.

Before doing this process we recommend you to take a backup of your Blogger template because if you make any mistake while placing codes it can corrupt your Blogger template.

How to add Login and Signup feature to your Blogger website?

We made a separate tutorial on how to add login and signup feature in Blogger using Firebase. If you didn't a add login feature to your Blogger website then this tutorial will not work for you.

Post Link: Click here

How to add Like and Dislike feature to your Blogger website

Changes need to do in Firebase

1. Go to your Firebase Console
2. Go to your previously created project for login and signup feature
3. Click on "Realtime Database" on the sidebar
4. Click on "Create Database"
5. Click on "Next"
6. Click on "Enable"
7. Click on "Rules"
8. Replace old rule with new one given below

{
  "rules": {
    "reactions": {
      ".read": true,
      ".write": "auth != null"
    }
  }
}

9. Cick on "Publish"

Changes need to do in your Blogger website

1. Go to your Blogger dashboard
2. Click on "Themes" option
3. Click on "" near "Customize"
4. Click on "Edit HTML"
5. Paste the following CSS above ]]></b:skin> or </style>

/* Reaction Box | incrediblegad.in */  
.IGRb{padding:16px;border-radius:6px;border:1px solid #292929;max-width:100%;margin-block-start:40px;}  
.IGRb .IGBtn{display:grid;grid-auto-flow:column;gap:10px;}  
.IGRb button{display:flex;border:1px solid #292929;background:none;padding:16px;border-radius:3px;font-size:18px;color:inherit;justify-content:center;gap:8px;}  
.IGRb svg{height:24px;width:24px;stroke:currentColor;stroke-width:1;fill:none;}  
.IGRb button:hover svg{stroke:#1800ff;}  
.IGRb h2{font-weight:500;font-size:18px;}  
.IGRb button:hover{border-color:#1800ff;}  
/* Remove it if you don't keep credit */  
.IGCrdt{text-align:center;margin-block-start:20px;color:gray;font-size:14px;}  
.IGCrdt a{color:gray;}

6. Paste the following HTML code somewhere near <data:post.body/>

<b:if cond='data:view.isPost'>
<!-- Reaction Box -->
<div class='IGRb' expr:data-post-id='data:post.id'>
  <!-- Reaction box title -->
  <h2>How was it?</h2>
  <div class="IGBtn">
    <!-- Like button -->
    <button class='button ln' onclick='reactToPost('likes', this)'>
      <svg viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6.633..." />
      </svg>
      <span class='like-count'>0</span>
    </button>
    <!-- Dislike button -->
    <button class='button ln' onclick='reactToPost('dislikes', this)'>
      <svg viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M7.498..." />
      </svg>
      <span class='dislike-count'>0</span>
    </button>
  </div>

  <!-- Credit -->
  <div class='IGCrdt'>
    Made by <a href='https://www.incrediblegad.in' target='_blank' rel='nofollow'>IncredibleGad</a>
  </div>
  <!-- Credit End here -->
  
</div>
</b:if>

7. Paste the following code above </body>

<b:if cond='data:view.isPost'>
  <script>
    /*<![CDATA[*//* Like and Dislike Feature for Blogger
  Created by: IncredibleGad
  Source code: https://www.incrediblegad.in/2025/03/add-like-and-dislike-feature.html
 */
    function formatNumber(a){
      return a>=1e6?(a/1e6).toFixed(1)+"M":a>=1e3?(a/1e3).toFixed(1)+"K":a
    }
    window.reactToPost=function(a,b){
      const c=firebase.auth().currentUser;
      if(!c) return void alert("Please log in to react!");
      let d=b.closest(".reaction-box");
      if(!d) return;
      const e=d.getAttribute("data-post-id"),
            f=firebase.database().ref("reactions/"+e);
      f.transaction(g=>(
        g||(g={likes:0,dislikes:0,users:{}}),
        g.users=g.users||{},
        g.users[c.uid]===a?(g[a]--,delete g.users[c.uid]):(g.users[c.uid]&&(g[g.users[c.uid]]--),g[a]++,g.users[c.uid]=a),
        g
      )).catch(a=>console.error("Firebase Error:",a))
    };
    firebase.database().ref("reactions").on("value",a=>{
      if(!a.exists()) return;
      const b=a.val();
      document.querySelectorAll(".reaction-box").forEach(a=>{
        const c=a.getAttribute("data-post-id");
        b[c]&&(a.querySelector(".like-count").textContent=formatNumber(b[c].likes||0),
               a.querySelector(".dislike-count").textContent=formatNumber(b[c].dislikes||0))
      })
    });
    /*]]>*/
  </script>
</b:if>

8. Click on "" to save

Conclusion

Adding the Like and Dislike feature to your blog will make it more interactive and engaging. With the help of Firebase, we can make sure reactions only possible for logged in users and it also help to prevent fake reactions on your blog. The Firebase Realtime Database updates reactions in real time.

This reaction feature allow your visitors to instantly react to your post. We recommend you to minify JS before adding to your website using any JS minifier that available on the internet.

After following this guide carefully you get a completely working like and dislike feature on your Blogger website. If you have any doubts related to this guide then please feel free to comment down below. Don't forget to share with your friends who are looking for a guide to add a post reaction feature to their Blogger website.

Thanks for spending time to read this article. Thanks for visiting, Have a nice day!