Enable Like And Unlike Feature For SharePoint List Using JSOM

In this article, I would like to share the steps to enable the 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 the 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 news web parts, discussions, posts, etc.

Steps to enable the Like/Unlike feature in the 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 the top ribbon bar as shown below.

Step 4. On the list settings page select “Rating Settings”

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

Step 6. Then click the “OK” button to save the setting for your list,

Finally, the 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 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 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
-->
<script type="text/javascript">
  var parameter = "LikePage(this, \"" + itemId + "\", \"" + listID + "\")";
  document.write("<a href='#' onclick='" + parameter + "' class='LikeButton'>" + likeDisplayText + "</a>");
</script>

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().trim();

        if (likeButtonText !== "") {
            if (likeButtonText === "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 === "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.