Enable Like And Unlike Feature For SharePoint List Using JSOM

In this article, I would like to share the steps to enable Like/Unlike functionality in a SharePoint list and how to set Like/Unlike for a particular item using JSOM. In the previous article, we have seen how to activate the rating features in SharePoint list.

• Like/Unlike is the Microblogging feature on SharePoint.
• This feature is available in the reputation settings of list settings.
• Mostly we are using this feature for a news web part, discussion, post etc..

Steps to enable the Like/Unlike feature in SP List

By default, SharePoint list doesn’t have this feature, using list settings we can enable this feature.

Follow the below steps to enable this feature,

Step 1

Open your SharePoint Site.

Step 2

Go to the site contents and then open the list where you want to enable this feature,

Step 3

Select list settings from top ribbon bar as shown below:

Step 4

On the list settings page select “Rating Settings”


Step 5

Enable the rating settings and check “Likes” option from rating settings as shown below,


Step 6

Then click “Ok” button to save the setting for your list,


Finally, Like/Unlike feature will be available for your list.

How to set Like/Unlike using JSOM

We have already gone through how to enable this feature for SharePoint lists, use the below code to set Like/Unlike using the JavaScript object model.

Steps to set like/unlike

Refer to the the below js files in your HTML page if you haven’t referred to them before. 

<script src="../_layouts/15/sp.js" type="text/javascript"></script>
<script src="../_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="../_layouts/15/reputation.js" type="text/javascript"></script>

//likeDisplayText  Text will change dynamically based on the like/unlike
//itemId  Id for which id you need to set like
//listID  GUID for SharePoint list where the item is existing
var parameter = "LikePage(this, \"" + itemId + "\", \"" + listID + "\")";
<a href='#' onclick='" + parameter + "' class='LikeButton'>"+ likeDisplayText+"</a>

On the Like page method write the below code,

<script type="text/javascript">

    function LikePage(obj, itemIDStr, listID) {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
            // var clientContext = new SP.ClientContext.get_current();
            var currentSiteURL =”https://test.sharepoint.com”;
            var clientContext = new SP.ClientContext(currentSiteURL);
            console.log("site URL  : " + currentSiteURL);
            var like = false;
            var likeButtonText = $(obj).html();
            console.log("Like HTML: " + likeButtonText);
            likeButtonText = likeButtonText.toLowerCase();
            if (likeButtonText != "") {
                if (likeButtonText.trim() == "like")
                    like = true;
                console.log("Like : " + like);
                var itemID = parseInt(itemIDStr);
                EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function () {
                    Microsoft.Office.Server.ReputationModel.
                    Reputation.setLike(clientContext,
                        listID,
                        itemID, like);
                    clientContext.executeQueryAsync(
                        function () {
                            if (likeButtonText.trim() == "like")
                                $(obj).html("Unlike");
                            else
                                $(obj).html("Like");

                        }, function (sender, args) {
                            console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                        });
                });
            }
        });
    }
</script>

Summary

In this article we have explored how to enable the Like/Unlike features in SharePoint lists and using  JSOM how to set the Like/Unlike for particular list items. You can use the preceding procedure for a Library also.