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.
Here’s how I did it.
The front-end of this “like” button is just a simple HTML button with an SVG heart to make it look cute.
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 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!