How to Add Like, Dislike & View Counters with Emojis on Your Hostinger Blog: A Simple Step-by-Step Guide

How to Add Like, Dislike & View Counters with Emojis on Your Hostinger Blog: A Simple Step-by-Step Guide

If you run a blog on Hostinger’s Website Builder and want to engage your readers with interactive Like and Dislike buttons plus a View counter—without diving into complex backend setups or using Firebase—this guide is for you! We’ll use a simple, no-code-friendly approach leveraging a free JSON storage service called jsonbin.io to store and update your counters in real time.

Why Use jsonbin.io?

Hostinger’s Website Builder doesn’t support server-side scripting directly, so we need a lightweight external service to store counts. jsonbin.io lets you create free JSON “bins” (like small databases) that you can read from and update via simple API calls—all without writing backend code or managing servers.

What You’ll Get

• 👍 Like button with live count

• 👎 Dislike button with live count

• 👀 View counter that increments automatically on page load

• All counters displayed on the same line, left-aligned, with equal spacing

• Easy to customize and embed directly in your blog page

Step 1: Create JSON Bins on jsonbin.io

1. Go to jsonbin.io and sign up for a free account (takes less than a minute).

2. After logging in, go to the Bins section and click + Create New.

3. For your Like/Dislike counter bin, name it something like blog1-likes-dislikes and paste this JSON content:

{

"likes": 0,

"dislikes": 0

}

4. Click Create to save.

5. Repeat the process to create a separate bin for Views, named e.g. blog1-views, with this content:

json

{

"views": 0

}

6. After creating each bin, click on it to find the Bin ID (a unique string in the URL or bin details). You’ll use this to build your API URLs.

Step 2: Prepare Your API URLs

Construct your API URLs by inserting your Bin IDs into this pattern:

text

https://api.jsonbin.io/v3/b/<BIN_ID>

For example:

• Likes/Dislikes API URL: https://api.jsonbin.io/v3/b/your-like-bin-id

• Views API URL: https://api.jsonbin.io/v3/b/your-view-bin-id

Step 3: Embed the Like/Dislike/View Counter on Your Blog Page

1. In your Hostinger Website Builder, drag and drop the Embed Code element where you want the counters to appear.

2. Paste the following full code snippet, replacing the placeholder URLs with your actual bin URLs:

<div id="reaction-bar">

<div class="reaction" id="likeBtn">👍 Like (<span id="likeCount">0</span>)</div>

<div class="reaction" id="dislikeBtn">👎 Dislike (<span id="dislikeCount">0</span>)</div>

<div class="reaction">📈 Views: <span id="viewCount">...</span></div>

</div>

<style>

#reaction-bar {

display: flex;

justify-content: flex-start;

gap: 20px;

margin: 20px 0;

font-size: 16px;

}

.reaction {

padding: 8px 16px;

background-color: #f4f4f4;

border-radius: 12px;

cursor: pointer;

transition: transform 0.2s ease;

user-select: none;

}

.reaction:hover {

background-color: #d1f5d3;

transform: scale(1.05);

}

</style>

<script>

const likeDislikeBin = "https://api.jsonbin.io/v3/b/YOUR_LIKE_BIN_ID"; // Replace this

const viewBin = "https://api.jsonbin.io/v3/b/YOUR_VIEW_BIN_ID"; // Replace this

const headers = { "Content-Type": "application/json", "X-Master-Key": "" };

async function fetchReactions() {

const res = await fetch(likeDislikeBin + "/latest");

const data = await res.json();

document.getElementById("likeCount").innerText = data.record.likes;

document.getElementById("dislikeCount").innerText = data.record.dislikes;

}

async function updateReaction(type) {

const res = await fetch(likeDislikeBin + "/latest");

const data = await res.json();

data.record[type]++;

await fetch(likeDislikeBin, {

method: "PUT",

headers,

body: JSON.stringify(data.record)

});

fetchReactions();

}

document.getElementById("likeBtn").onclick = () => updateReaction("likes");

document.getElementById("dislikeBtn").onclick = () => updateReaction("dislikes");

async function incrementViews() {

const res = await fetch(viewBin + "/latest");

const data = await res.json();

const views = data.record.views + 1;

await fetch(viewBin, {

method: "PUT",

headers,

body: JSON.stringify({ views })

});

document.getElementById("viewCount").innerText = views;

}

fetchReactions();

incrementViews();

</script>

Step 4: Customize Your Emojis (Optional)

If you want a different emoji for Views instead of 👀, here are some fun alternatives you can try:

📊Stats / Analytics

📈Increasing views

👁️Eye (cleaner look)

🔎Search / Attention

🔥Hot / Trending

Just replace the 👀 emoji in the HTML with your preferred one.

Tips for Using This Setup

• Separate bins per blog post: Create unique bins for each post to track reactions and views individually.

• No coding required: Just copy-paste and replace your bin URLs.

• No Firebase or server setup: All data is stored remotely on jsonbin.io.

• Animations included: Buttons scale up slightly on hover for a nice user experience.

• Counters update live: Clicks update the counts immediately without page reload.

Conclusion

With just a few simple steps, you can add interactive Like, Dislike, and View counters to your Hostinger blog posts—even if you’re a beginner and don’t want to use Firebase or complex backend tools. This method uses jsonbin.io’s free JSON storage and simple JavaScript embedded right into your page, making it easy to set up and maintain.

If you want help automating this for multiple posts, adding animations, or customizing the layout further, feel free to ask!

This approach empowers you to engage your readers, gather feedback, and track blog popularity with minimal hassle and no extra costs.

Happy blogging! 👍👎👀

Get in touch