Add Like & Dislike Button in Blogger Using Firebase
Welcome to Cyber Supto I'm Supto. In this tutorial I will show you how to add a Like and Dislike feature to your Blogger website using Firebase.
Many modern websites allow users to react to content quickly. Instead of writing a full comment, readers can simply click a button to express whether they liked the article or not. This small feature can significantly increase engagement on your blog.
Unfortunately, Blogger does not provide a built-in Like or Dislike system. However, with the help of HTML, CSS, JavaScript, and Firebase, we can build a powerful reaction system that works in real time.
In this guide, you will learn how to connect Blogger with Firebase and store user reactions in a database so that every post can display its own like and dislike count.
What is Firebase and Why Are We Using It?
Firebase is a development platform created by Google that provides backend services for websites and mobile applications. It allows developers to store data, manage authentication, host applications, and build powerful features without creating their own server.
For this tutorial, we will use Firebase Firestore Database. Firestore allows us to store the number of likes and dislikes for each post and update those numbers instantly whenever a visitor clicks the buttons.
This means when someone presses the Like button, the count will update immediately for everyone viewing the page — without refreshing the website.
Why Add a Like and Dislike System to Your Blog?
Adding a reaction system is a simple way to make your blog feel more interactive and modern. Instead of passively reading content, users can actively participate by giving quick feedback.
For bloggers and content creators, this feature also provides useful insights. You can quickly see which posts your audience enjoys the most and which topics attract more positive engagement.
Some benefits include:
- Higher user engagement
- More interactive blog experience
- Quick feedback from readers
- Better understanding of audience preferences
- More professional website appearance
Step 1: Create a Firebase Project
The first step is creating a Firebase project that will act as the backend for our Like and Dislike system. This project will store all user reactions and manage the real-time updates.
Open the Firebase Console by visiting:
https://console.firebase.google.com
After opening the console, click the Create Project button. Firebase will ask you to enter a project name. You can choose any name you like, such as Blogger Reaction System.
Once you enter the name, click Continue. Firebase may ask if you want to enable Google Analytics. This feature is not required for this tutorial, so you can disable it if you prefer.
After clicking Create Project, Firebase will take a few seconds to set everything up. When the process is complete, you will be taken to the project dashboard.
Step 2: Register Your Website in Firebase
Now we need to connect our Blogger website to Firebase so the website can communicate with the database.
Inside the Firebase dashboard, look for the Settings icon (gear symbol) near the Project Overview section. Click it to open the project settings.
Scroll down until you find the section called Your Apps. Here you will see icons for different platforms such as Android, iOS, and Web.
Click the Web icon (</>) to register your Blogger website as a web application.
Firebase will ask you to provide an application name. This name is only for identification inside Firebase, so you can choose something like Blogger Like System.
After registering the app, Firebase will generate a configuration code. This code contains the credentials needed to connect your website to Firebase.
const firebaseConfig = {
apiKey: "AIzaSyDUMMY_API_KEY_123456789",
authDomain: "example-app.firebaseapp.com",
databaseURL: "https://example-app-default-rtdb.firebaseio.com",
projectId: "example-app",
storageBucket: "example-app.appspot.com",
messagingSenderId: "123456789000",
appId: "1:123456789000:web:abcdef1234567890abcd",
measurementId: "G-ABCDEFG123"
};
Copy this configuration code and save it somewhere safe because we will need it later in the JavaScript section.
Step 3: Enable Firestore Database
Next, we need to create the database that will store the like and dislike counts.
In the Firebase sidebar, click on the Build section. Inside it, select Firestore Database.
Click the Create Database button. Firebase will ask you to choose a starting mode. Select Start in Test Mode so that your website can read and write data easily while developing the feature.
You will also need to select a server location. Choose the location closest to your audience to improve performance.
Once you click Enable, your Firestore database will be ready.
Step 4: Configure Database Rules
By default, Firebase databases are protected by security rules. To allow our Blogger site to store reaction data, we need to modify these rules.
Open the Rules tab inside the Firestore database section.
Delete the existing rules and replace them with the following rule structure:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /postLikes/{postId} {
allow read, write: if true;
}
}
}
These rules allow the website to read and write reaction data for each blog post.
After pasting the rules, click the Publish button to save the changes.
Step 5: Add CSS Styling in Blogger
Now that Firebase is ready, we will move to the Blogger theme and add styling for the Like and Dislike buttons.
Open your Blogger dashboard and go to the Theme section. On this page, click the small arrow next to the Customize button and choose Edit HTML.
Inside the theme code editor, search for the following line:
]]></b:skin>
This section is where most themes store their CSS styling. Paste your Like and Dislike CSS code just above this line.
/* Like - Dislike (Teorzo) */
.likeBox{display:flex;justify-content:center;gap:12px;margin-top:20px;border-top:1px solid rgba(0,0,0,0.08);border-bottom:1px solid rgba(0,0,0,0.08);padding:10px}
.like-btn,.dislike-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid rgba(0,0,0,.08);background:transparent;cursor:pointer;font-size:14px;transition:.2s ease}
.like-btn svg,.dislike-btn svg{width:18px;height:18px;flex-shrink:0;transition:.2s}
.like-btn:hover{background:#e6f7ed;color:#000;}
.dislike-btn:hover{background:#fdecea;color:#000}
.active-like{background:#e6f7ed;border-color:#22c55e;color:#000}
.active-dislike{background:#fdecea;border-color:#ef4444;color:#000}
.active-like svg{fill:#000!important}
.active-dislike svg{fill:#000!important}
.like-btn:hover svg, .dislike-btn:hover svg{fill:#000}
This CSS will control the layout, colors, hover effects, and button appearance.
Step 6: Add Like and Dislike Buttons to Posts
Next, we need to place the buttons inside each blog post so visitors can interact with them.
Inside the Blogger theme editor, search for the following tag:
This tag represents the main content area of your blog post. We want the reaction buttons to appear directly below the article.
Paste the Like and Dislike button HTML code right after this tag.
<b:if cond='data:view.isPost'>
<div class='likeBox'><button class='like-btn' id='likeBtn'><svg viewBox='0 0 16 16'><path d='M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2 2 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a10 10 0 0 0-.443.05 9.4 9.4 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a9 9 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.2 2.2 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.9.9 0 0 1-.121.416c-.165.288-.503.56-1.066.56z'/></svg> <span id='likeCount'>0</span></button><button class='dislike-btn' id='dislikeBtn'><svg viewBox='0 0 16 16'><path d='M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856s-.036.586-.113.856c-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a10 10 0 0 1-.443-.05 9.36 9.36 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a9 9 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581s-.027-.414-.075-.581c-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.2 2.2 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.9.9 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1'/></svg> <span id='dislikeCount'>0</span></button></div>
</b:if>
Step 7: Add Lazy Loading Script
To keep the website fast and optimized, we will load JavaScript only when needed using a lazy loading script.
Search for the closing </head> tag in your theme code.
Paste the lazy loading script just above this tag.
<script>/*<![CDATA[*//*@fineshopdesign/lazy.js*/ window.lazy=window.lazy||new Promise(e=>{const t="IS_LAZIED",n="true",o=["scroll","click"],i=["keydown","mouseover","touchmove","touchstart"],r=o.concat(i);function a(){try{return localStorage.getItem(t)===n}catch(e){return!0}}function l(e=!0){try{e?localStorage.setItem(t,n):localStorage.removeItem(t)}catch(e){}}function d(t){l(!0),e({type:t.type.toLowerCase()}),r.forEach(e=>window.removeEventListener(e,d))}if(a())e({type:"local"});else if(0!==document.documentElement.scrollTop||document.body&&0!==document.body.scrollTop)d({type:"scroll"});else{const e=()=>{window.removeEventListener("load",e),i.forEach(e=>window.addEventListener(e,d))};window.addEventListener("load",e),o.forEach(e=>window.addEventListener(e,d))}}); /*]]>*/</script>
Step 8: Add Firebase JavaScript
Finally, we will add the JavaScript code that connects Firebase with our Like and Dislike buttons.
Find the closing </body> tag in your Blogger theme.
Paste the Firebase script above this tag.
<b:if cond='data:view.isPost'>
<script type='module'>/*<![CDATA[*//* Like - Dislike (Teorzo) */window.lazy.then(()=>{import("https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js").then(async({initializeApp})=>{const{getFirestore,doc,getDoc,setDoc,increment,onSnapshot}=await import("https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js");
const firebaseConfig={
apiKey:"YOUR_API_KEY",
authDomain:"YOUR_PROJECT.firebaseapp.com",
projectId:"YOUR_PROJECT_ID",
messagingSenderId:"YOUR_SENDER_ID",
appId:"YOUR_APP_ID"
};
const app=initializeApp(firebaseConfig),db=getFirestore(app),postId=(document.querySelector("article")?.getAttribute("data-id")||location.pathname).replace(/[^\w]/g,"_"),likeBtn=document.getElementById("likeBtn"),dislikeBtn=document.getElementById("dislikeBtn"),likeCount=document.getElementById("likeCount"),dislikeCount=document.getElementById("dislikeCount"),postRef=doc(db,"postLikes",postId),voteKey="postVote_"+postId;let busy=!1;getDoc(postRef).then(s=>{s.exists()||setDoc(postRef,{likes:0,dislikes:0},{merge:!0})});onSnapshot(postRef,s=>{if(!s.exists())return;likeCount&&(likeCount.textContent=s.data().likes||0);dislikeCount&&(dislikeCount.textContent=s.data().dislikes||0)});function setActive(v){likeBtn&&likeBtn.classList.remove("active-like");dislikeBtn&&dislikeBtn.classList.remove("active-dislike");v==="liked"&&likeBtn&&likeBtn.classList.add("active-like");v==="disliked"&&dislikeBtn&&dislikeBtn.classList.add("active-dislike")}setActive(localStorage.getItem(voteKey));async function vote(t){if(busy)return;busy=!0;likeBtn&&(likeBtn.disabled=!0);dislikeBtn&&(dislikeBtn.disabled=!0);let v=localStorage.getItem(voteKey);if(t==="like"){if(v==="liked"){await setDoc(postRef,{likes:increment(-1)},{merge:!0});localStorage.removeItem(voteKey);setActive(null)}else{await setDoc(postRef,{likes:increment(1)},{merge:!0});v==="disliked"&&await setDoc(postRef,{dislikes:increment(-1)},{merge:!0});localStorage.setItem(voteKey,"liked");setActive("liked")}}if(t==="dislike"){if(v==="disliked"){await setDoc(postRef,{dislikes:increment(-1)},{merge:!0});localStorage.removeItem(voteKey);setActive(null)}else{await setDoc(postRef,{dislikes:increment(1)},{merge:!0});v==="liked"&&await setDoc(postRef,{likes:increment(-1)},{merge:!0});localStorage.setItem(voteKey,"disliked");setActive("disliked")}}setTimeout(()=>{busy=!1;likeBtn&&(likeBtn.disabled=!1);dislikeBtn&&(dislikeBtn.disabled=!1)},300)}likeBtn&&(likeBtn.onclick=()=>vote("like"));dislikeBtn&&(dislikeBtn.onclick=()=>vote("dislike"))})});/*]]>*/</script>
</b:if>
This script will handle storing votes, updating counts, and synchronizing the data with Firebase in real time.
Step 9: Save and Test
After completing all the steps above, click the Save button in the Blogger theme editor.
Open any blog post on your website and scroll to the bottom of the article. You should now see the Like and Dislike buttons displayed under the post content.
Try clicking the buttons to confirm that the counter updates correctly.
Conclusion
Adding a Like and Dislike system using Firebase is a great way to make your Blogger website more interactive and modern. Instead of simply reading an article and leaving, visitors can now share their opinion instantly.
Because Firebase manages the backend infrastructure, you don't need to build your own server or database. Everything works automatically and updates in real time.
Once you understand this method, you can expand it further by adding features such as reaction emojis, rating systems, or popularity rankings for your posts.
Thank you for reading this tutorial on Cyber Supto.
I'm Supto, and I regularly share tutorials about programming, blogging, and technology.
Stay connected with Cyber Supto for more helpful guides and coding tutorials.
Post a Comment