Using Like and Rating functionality in SharePoint 2013 Pages (and SP2013 Custom like button)

Wow!!! SharePoint 2013 includes Like and Rating functionality out of the box. Just navigate to List/Library Settings -> Rating settings and set it up. It is that easy :-).

However, you can only like/unlike or rate a item/page in the “All Items” view of the list/library. So, If you want to show this flashy “Like” functionality to your users on different publishing pages of your site, there is no out of the box way to do it. In this post, I will explain a simple way to add a custom like button to your publishing pages by using SharePoint’s built in Javascript methods. I will also give pointers on how to add a rating button to your page.

(In the image above, I have changed the image for the Like Button to display a Thumbs up instead of a smiley.)

In a nutshell, the process goes like this. Create/modify the page layout/add a content editor used for the content pages of your site to add a little html. Then enable the liking settings on the library (mostly Pages Library) where the content/publishing pages are stored. Reference a small Javascript code in your masterpage/page layout and add some css to style your Like button. Finally, deploy the custom javascript file to SharePoint.

Now, let us understand the process in detail.

1. Create/modify the page layout or add :

Page Layout provides an excellent way to maintain a consistent and desirable look and feel for your content pages in the site. Most of the publishing sites use custom page layouts. If you do not use custom Page Layouts, don’t worry. You can still do this by adding a simple content editor webpart/script editor to your pages and adding the same code inside that. Add the following html code to your Page layout/content editor.

<div class="LikeSection"><span class="likecount"></span><a href="#" onclick="LikePage()" class="LikeButton"></a></div>

Explanation : In the above html code, the anchor tag will be our Like/Unlike button and the span will display the no of likes for the current page. I have added classes to all these elements and enclosed them in a div so that you can give your own look and feel to the like section :-).

2. Enable liking settings on the library –

Navigate to library settings -> Rating Settings. Select the option “Yes” for “Allow items in this list to be rated” and select “Likes” for “Which voting/rating experience you would like to enable for this list”.

Explanation : Once you enable liking, SharePoint will add two columns to the list named “LikedBy” and “LikesCount”. As the names suggest, “LikedBy” will store the user identities who liked the item and “LikesCount” will store the no of likes respectively. This step builds the SP liking infrastructure for you.

3. Create the javascript file –

Create a javascript file named Like.js and paste the following code into it.

function LikePage() {
    var like = false;
    var likeButtonText = $("a.LikeButton").text();
    if (likeButtonText != "") {
        if (likeButtonText == "Like")
            like = true;

        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, like);

            aContextObject.executeQueryAsync(
                function () {
                    //alert(String(like));
                    GetLikeCount();
                }, function (sender, args) {
                    //alert('F0');
                });
        });
    }

}

function GetLikeCount() {

    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 likeDisplay = true;
        var $v_0 = item.get_item('LikedBy');
        var itemc = item.get_item('LikesCount');
        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'));
                    //alert("Liked by me");
                    likeDisplay = false;
                }
            }
        }
        ChangeLikeText(likeDisplay, itemc);

    }), Function.createDelegate(this, function (sender, args) {
        //alert('F1');
    }));

}

function ChangeLikeText(like, count) {
    if (like) {
        $("a.LikeButton").text('Like');
    }
    else {
        $("a.LikeButton").text('Unlike');
    }
    var htmlstring = "<img alt="" src="/_layouts/15/images/LikeFull.11x11x32.png" />" + " " + String(count);
    if (count &gt; 0)
        $(".likecount").html(htmlstring)
    else
        $(".likecount").html("");
}

$(document).ready(function () {
    GetLikeCount();
    $("a.LikeButton").click(function () {
        LikePage();
    });
});

Explanation : In our Like.js JS file, we have 4 methods –

LikePage() – This function calls the out of the box SharePoint method named “Microsoft.Office.Server.ReputationModel.Reputation.setLike” present in the “Reputation.js” javascript file (present inside Layouts folder). To see the function clearly, open the readable version of the file called “Reputation.debug.js”. This setLike function takes the parameters – context, listId, itemId and like(bool). We get the current context very easily using the SP.ClientContext(). Then we use the properties of the magical variable “_spPageContextInfo” to get the list ID and item ID respectively. Finally we pass the 4th parameter which is boolean to like or unlike a page.

GetLikeCount() – This function queries the list to get the “LikesCount” for the current list item (in our case, current page). It also checks the field “LikedBy” to see if the current user’s id is present in it to determine whether the current user has liked the page or not. Then it passes these values to the ChangeLikeText function.

ChangeLikeText() – This function displays the total likes for the current page and changes the text of the anchor tag to Like or Unlike based on whether the current user has liked the page or not.

Finally, in the document ready function, we display the like count and add the click handler to the like button.

4. Reference JS and css files –

If you have many content pages, just reference the SharePoint JS files in your masterpage as shown below. You can also reference them in your Page Layout if you wish to.

<SharePoint:ScriptLink ID="ScriptLink6" name="SP.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
<SharePoint:ScriptLink ID="ScriptLink8" name="SP.Core.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
<SharePoint:ScriptLink ID="ScriptLink9" name="Reputation.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
<script src="/_layouts/15/InSite/Scripts/Like.js" type="text/javascript"></script>

As you can see, the last one is a link to our like.js file which will do all the magic for us.

Add the following css to your global css file or inside PageLayouts

.likecount {
margin-right:5px;
}

.LikeSection {
margin-bottom:15px;
}

5. Deploy Like.js –

You can deploy this into any custom folder inside layouts folder or into a library. Accordingly, change the path to like.js file in our step 4.

Similarly, if you want to add rating control to your page, leverage the function “Microsoft.Office.Server.ReputationModel.Reputation.SetRating” instead of “SetLike” in out custom javascript file and change the logic slighly to display the rating stars instead of Like controls.