Shows a count of likes where you can like or unlike a SharePoint Page

likescount.js

"use strict";
window.tolle = window.tolle || {};
tolle.utils = tolle.utils || {};
tolle.utils.renderLike = (function() {
    var like = { item: undefined, container: undefined};
    var onSuccess = function() {
        var count = like.item.get_item("LikesCount") == null ? "0" : String(like.item.get_item("LikesCount"));
            var likerLookupItems = like.item.get_item("LikedBy");
            var likers = [];
            if (likerLookupItems != null) {
                for (var i = 0; i < likerLookupItems.length; i++) {
                    var likerItem = likerLookupItems[i];
                    likers[likers.length] = {
                        id: String(likerItem.get_lookupId())
                        , value: likerItem.get_lookupValue()
                        , title: likerItem.get_lookupValue()
                    };
                }
            }
            var displayContext = new Context();
            displayContext.CurrentItem = [];
            displayContext.CurrentItem.ID = _spPageContextInfo.pageItemId;
            displayContext.CurrentItem.LikesCount = count;
            displayContext.CurrentItem.LikedBy = likers;
            displayContext.listName = _spPageContextInfo.pageListId;
            displayContext.listTemplate = g_wsaListTemplateId;
            displayContext.CurrentItem.FSObjType = "0";
            displayContext.HttpRoot = _spPageContextInfo.siteAbsoluteUrl;
            displayContext.ListSchema = {
                Userid: _spPageContextInfo.userId
            };
            displayContext.CurrentFieldSchema = {
                Name: "LikesCount",
                FieldType: "Likes",
                RealFieldName: "LikesCount",
                AllowGridEditing: "TRUE",
                DisplayName: "Number of Likes",
                FieldTitle: "Number of Likes",
                ID: "6e4d832b-f610-41a8-b3e0-239608efda41",
                Type: "Integer",
                css: "ms-cellstyle ms-vb2",
                fieldRenderer: SP.UI.Reputation.LikesFieldTemplate.renderLikesField
            };
            like.container.innerHTML = SP.UI.Reputation.LikesFieldTemplate.renderLikesField(displayContext);
            SP.UI.Reputation.LikesFieldTemplate.onPostRender();
    };

    var onError = function(_0xa7bdxc, error) {
        var msg = "The following error has occured while trying to load page like information: " + error.get_message();
        SP.ULS.log(msg);
        console.log(msg);
    };

    var init = function() {
        var context = SP.ClientContext.get_current();
        var web = context.get_web();
        var list = web.get_lists().getById(_spPageContextInfo.pageListId);
        like.item = list.getItemById(_spPageContextInfo.pageItemId);
        context.load(like.item, ["LikesCount", "LikedBy"]);
        context.executeQueryAsync(onSuccess, onError);
    };


    return function(containerId) {
        if (!containerId) {
            throw "containerId should not be null or undefined in TP.utils.renderLike";
        }
        like.container = document.getElementById(containerId);
        if (!like.container) {
            return;
        }
        //load dependencies: strings.js, sp.js, clienttemplates.js, sp.ui.reputation.js
        SP.SOD.executeOrDelayUntilScriptLoaded(function() {
            SP.SOD.executeOrDelayUntilScriptLoaded(function() {
                SP.SOD.registerSod("sp.ui.reputation.js", SP.Utilities.Utility.getLayoutsPageUrl("sp.ui.reputation.js"));
                SP.SOD.executeOrDelayUntilScriptLoaded(function() {
                    SP.SOD.executeFunc("sp.ui.reputation.js", "SP.UI.Reputation.LikesFieldTemplate", init);
                },
                "clienttemplates.js");
                SP.SOD.executeFunc("clienttemplates.js", false, function() {});
            },
            "sp.js");
            SP.SOD.executeFunc("sp.js", false, function() {});
        },
        "strings.js");
    };
})();

Just wanted to say thanks a bunch for this, it was of great help. Can't believe there's no webcontrol that adds a standard like button.

Glad it helped you.

Hi, can you help me with sample code how to call tolle.utils.renderLike, I want to add like unlike field into all publishing pages