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>

Hi, We are trying to set the like on a list . However, when using your code EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() {
8 Microsoft.Office.Server.ReputationModel.
9 Reputation.setLike(aContextObject,
10 _spPageContextInfo.pageListId.substring(1, 37),
11 _spPageContextInfo.pageItemId, !likedPage);
and passing list id and item id, is not working. It's not even executing the code where we say EnsureScriptFunc(). Any insights on this would really help. Thanks!

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.