Formating list with JSLink - “like” button

Question

I am trying to reorder casual sharepoint list view which looks like this:

To look like this:

I am using JSLink and I have no problem with normal text fields like "Title" or "Description" but I dont know how to add "Like" funcionalites to my desired view.

Here is the code which I have (link to a tutorial):

var mjhViews = mjhViews || {};

mjhViews.itemHtml = function (ctx) {
    // start with a <tr> and a <td>
    var returnHtml = "<tr><td colspan='3'>";

    returnHtml += "<h2>" + ctx.CurrentItem.Title + "</h2>";

    if (ctx.CurrentItem.MyCustomField) {
        returnHtml += "<p>" + ctx.CurrentItem.MyCustomField + "</p>";
    }
    // close off our <td> and <tr> elements
    returnHtml += "</td></tr>";
    return returnHtml;
};

(function () {
    var mjhOverrides = {};
    mjhOverrides.Templates = {};

    mjhOverrides.Templates.Header = "<div id='MyCustomView'>";
    mjhOverrides.Templates.Item = mjhViews.itemHtml;
    mjhOverrides.Templates.Footer = "</div>";

    mjhOverrides.ListTemplateType = 100;
    mjhOverrides.BaseViewID = 1;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(mjhOverrides);
})();

I spent few days on looking for solution so any help will be appreciated.

Answer 1

did quite the same in my environment.

You can take a look into my guideline I wrote here:

https://afrait.com/blog/like-list-items-facebook-like-en