like button for posts in jekyll

Question

I want to add a like button, for every post on the homepage of my jekyll blog I didn't find any plugin. I don't want any facebook's like button that connects to company's/product page likes.

I want a like button which is independent from any social platforms and only relates to post.

Something like this

Zeitler

Answer 1

Short answer: you can't.

Long answer: your button will have store the "likes" somewhere (usually a database), which is by definition a dynamic process. Jekyll can only generates static data.

You can bind your button to an external service, e.g. LikeBtn which provides such functionality (the free offer miss advanced features like statistics).

Whatever the service you choose, it will usually work by adding a javascript snippet, as with google analytics. You can see how to use google analytics with jekyll to help you (e.g. here).

Coggins

Yes it is possible using Js and tools like firebase. xyzcoder.github.io/firebase/2019/03/17/… – Calica

Answer 2

Yes it is possible to add a like button and track number of likes by writing your custom JavaScript code and a database to your Jekyll generated static sites.

So coming to the database as it is a static page and doesn't involve any server, it is not possible to interact with database directly but there is a way. In my case I am making use of firebase. Firebase by Google provides us many capabilities like storage, database , hosting and also access to serverless architecture using functions.

So coming to the point, all you need to do is register with http://firebase.google.com Then create an app and then in your JavaScript add following code in head tag

<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

var timestamp = new Date().valueOf();
            var obj = {};
            obj[timestamp] = "1";

            firebase.database().ref('/').update(obj)
</script>

For more details, You can visit my blog on this topic

https://xyzcoder.github.io/firebase/2019/03/17/firebase-real-time-database.html

Note: we can also implement security restrictions on who can read and write data to our json store

Thanks, Pavan

Calica