SharePoint 2013, how to enable like/unlike functionality by client side javascript on a publishing pagelayout. - Requirements, like functionality is enabled on the page library. - You must include reputation.js if you are wrapping this in a webcontrol, that can e.g. be done with: ScriptLink.RegisterScriptAfterUI(this.Page, "reputation.js", false);

sp2013 include reputation

<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<SharePointWebControls:ScriptLink language="javascript" name="reputation.js" OnDemand="false" LoadAfterUI="true" runat="server" Localizable="false" />

sp2013like

var likepage = {
    //Likes the current page. 
    LikePage: function () {
        likepage.getUserLikedPage(function(likedPage, likeCount) {
 
            var aContextObject = new SP.ClientContext();
            EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() {
                Microsoft.Office.Server.ReputationModel.
                    Reputation.setLike(aContextObject,
                        _spPageContextInfo.pageListId.substring(1, 37),
                        _spPageContextInfo.pageItemId, !likedPage);
 
                aContextObject.executeQueryAsync(
                    function() {
                        var elements = document.getElementsByClassName('likecount');
                        if (likedPage) {
                            likeCount--;
                        } else {
                            likeCount++;
                        }
                        for (var i = 0; i < elements.length;i++) {
                            elements[i].innerHTML = likeCount;
                        }
                    }, function(sender, args) {
                        // Custom error handling if needed
                        
                    });
            });
        });
 
    },
    // Checks if the user already liked the page, and returns the number of likes. 
    getUserLikedPage: function (cb) {
        var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
        var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId);
        var item = list.getItemById(_spPageContextInfo.pageItemId);
 
        context.load(item, "LikedBy", "ID", "LikesCount");
        context.executeQueryAsync(Function.createDelegate(this, function (success) {
            // Check if the user id of the current users is in the collection LikedBy. 
            var $v_0 = item.get_item('LikedBy');
            if (!SP.ScriptHelpers.isNullOrUndefined($v_0)) {
                for (var $v_1 = 0, $v_2 = $v_0.length; $v_1 < $v_2; $v_1++) {
                    var $v_3 = $v_0[$v_1];
                    if ($v_3.$1E_1 === _spPageContextInfo.userId) {
                        cb(true, item.get_item('LikesCount'));
                    }
                }
            }
            cb(false, item.get_item('LikesCount'));
        }),
            Function.createDelegate(this, function (sender, args) { 
            //Custom error handling if needed 
            }));
    },
    initialize: function () {
        var elements = document.getElementsByClassName('likecount');
        likepage.getUserLikedPage(function(likedPage, likesCount) {
            for (var i = 0; i < elements.length; i++) {
                elements[i].innerHTML = likesCount;
            }
        });
    }
};
_spBodyOnLoadFunctionNames.push("likepage.initialize");

sp2013like_example

<a href="#" onclick="(function() {likepage.LikePage();})()"><span class="likecount"></span></a>

sp2013link added to ArticleLeft

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
  <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/>
	<PublishingWebControls:EditModePanel runat="server">
		<!-- Styles for edit mode only-->
		<SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>"
			After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/>
	</PublishingWebControls:EditModePanel>
	<SharePointWebControls:FieldValue id="PageStylesField" FieldName="HeaderStyleDefinitions" runat="server"/>
	<SharePointWebControls:ScriptLink language="javascript" name="reputation.js" OnDemand="false" LoadAfterUI="true" runat="server" Localizable="false" />
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
	<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server">
	<SharePointWebControls:FieldValue FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"> 
	<SharePointWebControls:ListSiteMapPath runat="server" SiteMapProviders="CurrentNavigationSwitchableProvider" RenderCurrentNodeAsLink="false" PathSeparator="" CssClass="s4-breadcrumb" NodeStyle-CssClass="s4-breadcrumbNode" CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode" RootNodeStyle-CssClass="s4-breadcrumbRootNode" NodeImageOffsetX=0 NodeImageOffsetY=289 NodeImageWidth=16 NodeImageHeight=16 NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23" HideInteriorRootNodes="true" SkipLinkText=""/> </asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<script type="text/javascript">
var likepage = {
    //Likes the current page. 
    LikePage: function () {
        likepage.getUserLikedPage(function(likedPage, likeCount) {
 
            var aContextObject = new SP.ClientContext();
            EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() {
                Microsoft.Office.Server.ReputationModel.
                    Reputation.setLike(aContextObject,
                        _spPageContextInfo.pageListId.substring(1, 37),
                        _spPageContextInfo.pageItemId, !likedPage);
 
                aContextObject.executeQueryAsync(
                    function() {
                        var elements = document.getElementsByClassName('likecount');
                        if (likedPage) {
                            likeCount--;
                        } else {
                            likeCount++;
                        }
                        for (var i = 0; i < elements.length;i++) {
                            elements[i].innerHTML = likeCount;
                        }
                    }, function(sender, args) {
                        // Custom error handling if needed
                        
                    });
            });
        });
 
    },
    // Checks if the user already liked the page, and returns the number of likes. 
    getUserLikedPage: function (cb) {
        var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
        var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId);
        var item = list.getItemById(_spPageContextInfo.pageItemId);
 
        context.load(item, "LikedBy", "ID", "LikesCount");
        context.executeQueryAsync(Function.createDelegate(this, function (success) {
            // Check if the user id of the current users is in the collection LikedBy. 
            var $v_0 = item.get_item('LikedBy');
            if (!SP.ScriptHelpers.isNullOrUndefined($v_0)) {
                for (var $v_1 = 0, $v_2 = $v_0.length; $v_1 < $v_2; $v_1++) {
                    var $v_3 = $v_0[$v_1];
                    if ($v_3.$1E_1 === _spPageContextInfo.userId) {
                        cb(true, item.get_item('LikesCount'));
                    }
                }
            }
            cb(false, item.get_item('LikesCount'));
        }),
            Function.createDelegate(this, function (sender, args) { 
            //Custom error handling if needed 
            }));
    },
    initialize: function () {
        var elements = document.getElementsByClassName('likecount');
        likepage.getUserLikedPage(function(likedPage, likesCount) {
            for (var i = 0; i < elements.length; i++) {
                elements[i].innerHTML = likesCount;
            }
        });
    }
};
_spBodyOnLoadFunctionNames.push("likepage.initialize");
</script>
	<div class="article article-left">
		<PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel title-edit">
			<SharePointWebControls:TextField runat="server" FieldName="Title"/>
		</PublishingWebControls:EditModePanel>
		<div class="captioned-image">
			<div class="image">
				<PublishingWebControls:RichImageField FieldName="PublishingPageImage" runat="server"/>
			</div>
			<div class="caption">
				<PublishingWebControls:RichHtmlField FieldName="PublishingImageCaption"  AllowTextMarkup="false" AllowTables="false" AllowLists="false" AllowHeadings="false" AllowStyles="false" AllowFontColorsMenu="false" AllowParagraphFormatting="false" AllowFonts="false" PreviewValueSize="Small" AllowInsert="false" AllowEmbedding="false" AllowDragDrop="false" runat="server"/>
			</div>
		</div>
		<div class="article-header">
			<div class="date-line">
				<SharePointWebControls:DateTimeField FieldName="ArticleStartDate" runat="server"/>
				<a href="#" onclick="(function() {likepage.LikePage();})()"><span class="likecount"></span></a>
			</div>
			<div class="by-line">
				<SharePointWebControls:TextField FieldName="ArticleByLine" runat="server"/>
			</div>
		</div>
		<div class="article-content">
			<PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" HasInitialFocus="True" MinimumEditHeight="400px" runat="server"/>
		</div>
		<PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel roll-up">
			<PublishingWebControls:RichImageField FieldName="PublishingRollupImage" AllowHyperLinks="false" runat="server" />
			<asp:Label text="<%$Resources:cms,Article_rollup_image_text15%>" CssClass="ms-textSmall" runat="server" />
		</PublishingWebControls:EditModePanel>
	</div>
</a>
</asp:Content>

By the way, we are using javascrit and trying to set the LIKES on a list which is on the cloud

jyendapally,
I think that the code isnt executed since the script cannot be "Ensured", you havnt included the "reputation.js" file.

Either in the page layout via scriptlink or just "<script src="_layouts/15/reputation.js"></script>".

This works for me in SharePoint Online!

/Simon

in line 45
change from
if ($v_3.$1E_1 === _spPageContextInfo.userId) { cb(true, item.get_item('LikesCount')); }
to
if ($v_3.$1E_1 === _spPageContextInfo.userId) { cb(true, item.get_item('LikesCount')); return; }

without the return , cb function is called twice.