In my effort to start posting to my own personal blog more, setting up the blog, and using a static-site generator to build this blog, I quickly realized that I wanted a “like” button for each post.

I didn’t want to use something like the Facebook “like” button, because I wanted to keep track of the number of likes for each post on my own, without relying on a third-party service. And I also wanted to make sure that this “like” button didn’t collect any information from my readers beyond the fact that they clicked on the “like” button for a particular post.

So, I decided to build my own “like” button using good ol' Javascript and creating a server-less backend using Firebase.

Here’s how I did it.

The front-end

The front-end of this “like” button is just a simple HTML button with an SVG heart to make it look cute.

When the button is clicked, we’ll use Javascript to send a request to our backend to increment the number of likes for that particular post. After the reader clicks the button, it won’t send any more requests.

Also, just for fun, I made it so that a user can’t see how many likes a post has until they actually click the “like” button themselves.

The back-end

The back-end uses Google’s Firebase service and uses cloud functions to increment the likes for the given URL where the “like” button is located in my server-less database.

This means that I don’t actually have to worry about hosting any backend code myself or managing any server infrastructure.

Putting it all together

The final result is a “like” button that is simple, lightweight, and doesn’t collect any data from my readers beyond the fact that they clicked on the “like” button for a particular post.

I’m really happy with how this turned out and I think it’s a great way to add a little bit of interactivity to my blog without having to worry about managing any server infrastructure or dealing with any third-party services.

I’m actually thinking about rolling this out to be a drop-in service that people can use to easily set up “like” buttons on their blogs or websites with just a single line of code. If you’re interested in that, let me know!

Or if you just think this is interesting, feel free to give it a like below by clicking on the little heart!