Post
Ask Question

Custom Like And Comment Functionality For SharePoint Online Custom Pages

Today we will see how to add custom like and comment functionality in SharePoint custom pages. For that I have developed one common web part/txt file using JQuery and REST api. Currently SharePoint is providing likes and rating functionality for the list items. I tried to use this but this was not required so I tried to develop this custom functionality for SharePoint online pages.

You need to just add one content editor web part and add the below code into that web part. Below are the overall steps.

Step 1

Create custom list in SharePoint having name "LikesList" to store all the likes given by the user. Add the below columns into it,
  • column name : LikeBy type : Person or Group
  • column name : CommentID type : Number
  • column name : PageURL type : Single line of text
Step 2

Create custom list in SharePoint having the name "CommentsList" to store all the comments added by user. Add the below columns into it,
  • column name : ParentCommentID type : Number
  • column name : CommentText type : Multiple lines of text
  • column name : PageURL type : Single line of text
  • column name : CommentBy type : Person or Group
Step 3

Now create one text file and add the below code into it and save that file.
  1. <div style="width: 70%;background-color: white;color: black; border-radius: 5px; padding:10px;">  
  2.     <table style="width:100%">  
  3.         <tbody>  
  4.             <tr>  
  5.                 <td style="text-align: right;">  
  6.                     <span id="lblPageComments">0 Comments | </span>  
  7.                     <span id="spLikes" title="" class="LikeClass">  
  8.                         <img id="imgLike" src="../_layouts/15/images/LikeFull.11x11x32.png?rev=23">  
  9.                         <span id="lblPageLikes">0</span>  
  10.                     </span>  
  11.                     <a id="lnkBtnPageLike" class="links">Like</a>  
  12.                     <span id="LikeID" style="display:none;"></span>     </td>  
  13.             </tr>  
  14.             <tr>  
  15.                 <td style="padding-left: 5px;">  
  16.                     <h3>Comment : </h3>  
  17.                 </td>  
  18.             </tr>  
  19.             <tr>  
  20.                 <td style="padding: 25px;">  
  21.                     <textarea name="txtComments" rows="3" cols="20" id="txtComments" placeholder="Comment..." style="width:95%;"></textarea><br><br>  
  22.                     <input type="button" name="btnPost" value="Post" id="btnPost">  
  23.                     <input type="button" name="btnReset" value="Reset" id="btnReset">  
  24.                 </td>  
  25.             </tr>  
  26.         </tbody>  
  27.     </table>  
  28.     <br> Comments... <table id="tblComments" style="width:100%">  
  29.     </table>  
  30. </div>  
  31. <style type="text/css">  
  32.     a {  
  33.         cursor: pointer;  
  34.     }  
  35. </style>  
  36. <script src="/JS/jquery.min.js"></script>  
  37. <script src="/JS/jquery-ui.js"></script>  
  38. <link rel="stylesheet" href="/CSS/jquery-ui.css">  
  39. <script src="JS/jquery-dateFormat.min.js"></script>  
  40. <script type="text/javascript">  
  41.     var PageURL = window.location.href;  
  42.     var UserID = _spPageContextInfo.userId;  
  43.     $(document).ready(function() {  
  44.         getSetPageDet();  
  45.         getAllComments();  
  46.         $("#btnPost").click(function() {  
  47.             AddComment();  
  48.         });  
  49.         $("#btnReset").click(function() {  
  50.             $("#txtComments").val("");  
  51.         });  
  52.         $("#lnkBtnPageLike").click(function() {  
  53.             if ($("#lnkBtnPageLike")[0].innerText == "Like") {  
  54.                 LikePage();  
  55.             } else {  
  56.                 UnLikePage();  
  57.             }  
  58.         });  
  59.     });  
  60.     // This function will reset the value of comment box  
  61.     function reset(textbox) {  
  62.         $("#txtReply_" + textbox).val("");  
  63.     }  
  64.     // This function is used to get all the comments from comments list for that particular page having type as comment.  
  65.     function getAllComments() {  
  66.         $.ajax({  
  67.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CommentsList')/items?$expand=CommentBy&$select=*,CommentBy/Title&$filter=PageURL eq '" + PageURL + "' and Title eq 'Comment'&$orderby=ID desc",  
  68.             type: "GET",  
  69.             headers: {  
  70.                 "accept": "application/json;odata=verbose",  
  71.                 "content-Type": "application/json;odata=verbose"  
  72.             },  
  73.             success: function(data) {  
  74.                 var commentsHTML = "";  
  75.                 if (data.d.results.length > 0) {  
  76.                     $.each(data.d.results, function(index, value) {  
  77.                         var CreatedDate = jQuery.format.date(value.Created, "ddd, MMM d, yyyy h:mm a");  
  78.                         commentsHTML += "<tr><td><span id='CommentsID_" + value.Id + "' style='display:none;'>" + value.Id + "</span><br><span>" + value.CommentText + "</span><br><a class='linksAuthor' href='/../../_layouts/15/userdisp.aspx?ID=" + value.CommentById + "' target='_blank'>" + value.CommentBy.Title + "</a><br><span>" + CreatedDate + "</spam>      <span id='lblCommentReplies_" + value.Id + "'>0 Replies | </span><span id='spLikes_" + value.Id + "' title='' class='LikeClass'>  <img src='../_layouts/15/images/LikeFull.11x11x32.png?rev=23'>  <span id='lblLikes_" + value.Id + "' class='LikeClass'>0</span></span>  <a id='lnkBtnLike_" + value.Id + "' class='links' onClick='LikeComment(" + value.Id + ")'>Like</a><span id='LikeID_" + value.Id + "' style='display:none;'></span>";  
  79.                         if (UserID == value.CommentById) {  
  80.                             commentsHTML += "   <a id='lnkBtnDelete_" + value.Id + "' class='links' onClick='DeleteComment(" + value.Id + ")'>Delete</a><br><br>Replies...<br><div style='margin-left: 10%;'><table style='width: 90%'><tbody><tr><td colspan='2'><textarea name='txtReply_" + value.Id + "' rows='1' cols='20' id='txtReply_" + value.Id + "' placeholder='Reply...' style='width:100%;'></textarea><br><br><input type='button' name='btnPostReply_" + value.Id + "' value='Post' id='btnPostReply_" + value.Id + "' onClick='AddReply(" + value.Id + ")'><input type='button' name='btnResetReply_" + value.Id + "' value='Reset' id='btnResetReply_" + value.Id + "' onClick='reset(" + value.Id + ")'></td></tr></tbody></table><div><table cellspacing='0' id='tblReply_" + value.Id + "' style='border-collapse:collapse;'></table></div></div><br><hr></td></tr>";  
  81.                         } else {  
  82.                             commentsHTML += "<br><br>Replies...<br><div style='margin-left: 10%;'><table style='width: 90%'><tbody><tr><td colspan='2'><textarea name='txtReply_" + value.Id + "' rows='1' cols='20' id='txtReply_" + value.Id + "' placeholder='Reply...' style='width:100%;'></textarea><br><br><input type='button' name='btnPostReply_" + value.Id + "' value='Post' id='btnPostReply_" + value.Id + "' onClick='AddReply(" + value.Id + ")'><input type='button' name='btnResetReply_" + value.Id + "' value='Reset' id='btnResetReply_" + value.Id + "' onClick='reset(" + value.Id + ")'></td></tr></tbody></table><div><table cellspacing='0' id='tblReply_" + value.Id + "' style='border-collapse:collapse;'></table></div></div><br><hr></td></tr>";  
  83.                         }  
  84.                     });  
  85.                     $("#tblComments")[0].innerHTML = commentsHTML;  
  86.                     getSetCommentDet();  
  87.                 }  
  88.             },  
  89.             error: function(error) {  
  90.                 alert(JSON.stringify(error));  
  91.             }  
  92.         });  
  93.     }  
  94.     // This function is used to get all the likes from like list for that particular page.  
  95.     function LikeReply(CommentID) {  
  96.         var title = "Reply";  
  97.         if ($("#lnkBtnReplyLike_" + CommentID)[0].innerText == "Like") {  
  98.             $.ajax({  
  99.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items",  
  100.                 type: "POST",  
  101.                 data: JSON.stringify({  
  102.                     '__metadata': {  
  103.                         'type': 'SP.Data.LikesListListItem'  
  104.                     },  
  105.                     'LikeById': UserID,  
  106.                     'Title': title,  
  107.                     'CommentID': CommentID  
  108.                 }),  
  109.                 headers: {  
  110.                     "accept": "application/json;odata=verbose",  
  111.                     "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  112.                     "content-Type": "application/json;odata=verbose"  
  113.                 },  
  114.                 success: function(data) {  
  115.                     $("#lnkBtnReplyLike_" + CommentID)[0].innerText = "Unlike";  
  116.                 },  
  117.                 error: function(error) {  
  118.                     console.log(JSON.stringify(error));  
  119.                 }  
  120.             });  
  121.         } else {  
  122.             $.ajax({  
  123.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items(" + $("#ReplyLikeID_" + CommentID)[0].innerText + ")",  
  124.                 type: "POST",  
  125.                 async: false,  
  126.                 headers: {  
  127.                     "Accept": "application/json;odata=verbose",  
  128.                     "X-Http-Method": "DELETE",  
  129.                     "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  130.                     "If-Match": "*"  
  131.                 },  
  132.                 success: function(data) {  
  133.                     $("#lnkBtnReplyLike_" + CommentID)[0].innerText = "Like";  
  134.                     getSetPageDet();  
  135.                     getAllComments();  
  136.                 },  
  137.                 error: function(data) {  
  138.                     console.log(JSON.stringify(error));  
  139.                 }  
  140.             });  
  141.         }  
  142.     }  
  143.   
  144.     function LikeComment(CommentID) {  
  145.         var title = "Comment";  
  146.         if ($("#lnkBtnLike_" + CommentID)[0].innerText == "Like") {  
  147.             $.ajax({  
  148.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items",  
  149.                 type: "POST",  
  150.                 data: JSON.stringify({  
  151.                     '__metadata': {  
  152.                         'type': 'SP.Data.LikesListListItem'  
  153.                     },  
  154.                     'LikeById': UserID,  
  155.                     'Title': title,  
  156.                     'CommentID': CommentID  
  157.                 }),  
  158.                 headers: {  
  159.                     "accept": "application/json;odata=verbose",  
  160.                     "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  161.                     "content-Type": "application/json;odata=verbose"  
  162.                 },  
  163.                 success: function(data) {  
  164.                     $("#lnkBtnLike_" + CommentID)[0].innerText = "Unlike";  
  165.                 },  
  166.                 error: function(error) {  
  167.                     console.log(JSON.stringify(error));  
  168.                 }  
  169.             });  
  170.         } else {  
  171.             $.ajax({  
  172.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items(" + $("#LikeID_" + CommentID)[0].innerText + ")",  
  173.                 type: "POST",  
  174.                 async: false,  
  175.                 headers: {  
  176.                     "Accept": "application/json;odata=verbose",  
  177.                     "X-Http-Method": "DELETE",  
  178.                     "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  179.                     "If-Match": "*"  
  180.                 },  
  181.                 success: function(data) {  
  182.                     $("#lnkBtnLike_" + CommentID)[0].innerText = "Like";  
  183.                     getSetPageDet();  
  184.                     getAllComments();  
  185.                 },  
  186.                 error: function(data) {  
  187.                     console.log(JSON.stringify(error));  
  188.                 }  
  189.             });  
  190.         }  
  191.     }  
  192.   
  193.     function getSetCommentDet() {  
  194.         var commentIDColl = $('span[id^="CommentsID_"]');  
  195.         $.each(commentIDColl, function(index, e) {  
  196.             var commentID = e.innerText;  
  197.             $.ajax({  
  198.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items?$filter=LikeById eq " + UserID + " and CommentID eq '" + commentID + "'",  
  199.                 type: "GET",  
  200.                 headers: {  
  201.                     "accept": "application/json;odata=verbose",  
  202.                     "content-Type": "application/json;odata=verbose"  
  203.                 },  
  204.                 success: function(data) {  
  205.                     if (data.d.results.length > 0) {  
  206.                         $("#lnkBtnLike_" + commentID)[0].innerText = "Unlike";  
  207.                         $("#LikeID_" + commentID)[0].innerText = data.d.results[0].Id;  
  208.                     } else {  
  209.                         $("#lnkBtnLike_" + commentID)[0].innerText = "Like";  
  210.                     }  
  211.                 },  
  212.                 error: function(error) {  
  213.                     alert(JSON.stringify(error));  
  214.                 }  
  215.             });  
  216.             $.ajax({  
  217.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items?$expand=LikeBy&$select=*,LikeBy/Title&$filter=CommentID eq '" + commentID + "' and Title eq 'Comment'&$orderby=ID desc",  
  218.                 type: "GET",  
  219.                 headers: {  
  220.                     "accept": "application/json;odata=verbose",  
  221.                     "content-Type": "application/json;odata=verbose"  
  222.                 },  
  223.                 success: function(data) {  
  224.                     if (data.d.results.length > 0) {  
  225.                         var likeToolTip = "";  
  226.                         var me = false;  
  227.                         $("#lblLikes_" + commentID)[0].innerText = data.d.results.length;  
  228.                         $.each(data.d.results, function(index, value) {  
  229.                             if (value.LikeById == UserID) {  
  230.                                 me = true;  
  231.                             } else {  
  232.                                 likeToolTip += value.LikeBy.Title + "; ";  
  233.                             }  
  234.                         });  
  235.                         if (me == true) {  
  236.                             likeToolTip = "You; " + likeToolTip;  
  237.                         }  
  238.                         $("span#spLikes_" + commentID).attr("title", likeToolTip);  
  239.                     } else {  
  240.                         $("#lblLikes_" + commentID)[0].innerText = "0";  
  241.                     }  
  242.                 },  
  243.                 error: function(error) {  
  244.                     alert(JSON.stringify(error));  
  245.                 }  
  246.             });  
  247.             $.ajax({  
  248.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CommentsList')/items?$expand=CommentBy&$select=*,CommentBy/Title&$filter=ParentCommentID eq '" + commentID + "' and Title eq 'Reply'&$orderby=ID desc",  
  249.                 type: "GET",  
  250.                 headers: {  
  251.                     "accept": "application/json;odata=verbose",  
  252.                     "content-Type": "application/json;odata=verbose"  
  253.                 },  
  254.                 success: function(data) {  
  255.                     if (data.d.results.length > 0) {  
  256.                         $("#lblCommentReplies_" + commentID)[0].innerText = data.d.results.length + " Replies |";  
  257.                         var replyHTML = "";  
  258.                         if (data.d.results.length > 0) {  
  259.                             $.each(data.d.results, function(index, value) {  
  260.                                 var CreatedDate = jQuery.format.date(value.Created, "ddd, MMM d, yyyy h:mm a");  
  261.                                 replyHTML += "<tr><td><br><span id='ReplyID_" + value.Id + "' style='display:none;'>" + value.Id + "</span><br><span id='lblReply_" + value.Id + "' class='comments'>" + value.CommentText + "</span><br><a id='hrfReplyAuthor_" + value.Id + "' class='linksAuthor' href='/../../_layouts/15/userdisp.aspx?ID=" + value.CommentById + "' target='_blank'>" + value.CommentBy.Title + "</a><br><span id='lblReplydate_" + value.Id + "'>" + CreatedDate + "</span>      <span id='spReplyLikes_" + value.Id + "' title='' class='LikeClass'>  <img id='imgLike_" + value.Id + "' src='../_layouts/15/images/LikeFull.11x11x32.png?rev=23'>  <span id='lblReplyLikes_" + value.Id + "' title='' class='LikeClass' ></span></span>  <a id='lnkBtnReplyLike_" + value.Id + "' class='links' onClick='LikeReply(" + value.Id + ")'>Like</a><span id='ReplyLikeID_" + value.Id + "' style='display:none;'></span>";  
  262.                                 if (UserID == value.CommentById) {  
  263.                                     replyHTML += "   <a id='lnkBtnDelete_" + value.Id + "' class='links' onClick='DeleteReply(" + value.Id + ")'>Delete</a></td></tr>";  
  264.                                 } else {  
  265.                                     replyHTML += "</td></tr>";  
  266.                                 }  
  267.                             });  
  268.                             $("#tblReply_" + commentID)[0].innerHTML = replyHTML;  
  269.                             getSetReplyDet();  
  270.                         }  
  271.                     } else {  
  272.                         $("#lblCommentReplies_" + commentID)[0].innerText = "0 Replies |";  
  273.                     }  
  274.                 },  
  275.                 error: function(error) {  
  276.                     alert(JSON.stringify(error));  
  277.                 }  
  278.             });  
  279.         })  
  280.     }  
  281.   
  282.     function getSetPageDet() {  
  283.         $.ajax({  
  284.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items?$filter=LikeById eq " + UserID + " and PageURL eq '" + PageURL + "'",  
  285.             type: "GET",  
  286.             headers: {  
  287.                 "accept": "application/json;odata=verbose",  
  288.                 "content-Type": "application/json;odata=verbose"  
  289.             },  
  290.             success: function(data) {  
  291.                 if (data.d.results.length > 0) {  
  292.                     $("#lnkBtnPageLike")[0].innerText = "Unlike";  
  293.                     $("#LikeID")[0].innerText = data.d.results[0].Id;  
  294.                 } else {  
  295.                     $("#lnkBtnPageLike")[0].innerText = "Like";  
  296.                 }  
  297.             },  
  298.             error: function(error) {  
  299.                 alert(JSON.stringify(error));  
  300.             }  
  301.         });  
  302.         $.ajax({  
  303.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items?$expand=LikeBy&$select=*,LikeBy/Title&$filter=PageURL eq '" + PageURL + "' and Title eq 'Page'",  
  304.             type: "GET",  
  305.             headers: {  
  306.                 "accept": "application/json;odata=verbose",  
  307.                 "content-Type": "application/json;odata=verbose"  
  308.             },  
  309.             success: function(data) {  
  310.                 if (data.d.results.length > 0) {  
  311.                     var likeToolTip = "";  
  312.                     var me = false;  
  313.                     $("#lblPageLikes")[0].innerText = data.d.results.length;  
  314.                     $.each(data.d.results, function(index, value) {  
  315.                         if (value.LikeById == UserID) {  
  316.                             me = true;  
  317.                         } else {  
  318.                             likeToolTip += value.LikeBy.Title + "; ";  
  319.                         }  
  320.                     });  
  321.                     if (me == true) {  
  322.                         likeToolTip = "You; " + likeToolTip;  
  323.                     }  
  324.                     $("span#spLikes").attr("title", likeToolTip);  
  325.                 } else {  
  326.                     $("#lblPageLikes")[0].innerText = "0";  
  327.                 }  
  328.             },  
  329.             error: function(error) {  
  330.                 alert(JSON.stringify(error));  
  331.             }  
  332.         });  
  333.         $.ajax({  
  334.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CommentsList')/items?$filter=PageURL eq '" + PageURL + "' and Title eq 'Comment'",  
  335.             type: "GET",  
  336.             headers: {  
  337.                 "accept": "application/json;odata=verbose",  
  338.                 "content-Type": "application/json;odata=verbose"  
  339.             },  
  340.             success: function(data) {  
  341.                 if (data.d.results.length > 0) {  
  342.                     $("#lblPageComments")[0].innerText = data.d.results.length + " Comments |";  
  343.                 } else {  
  344.                     $("#lblPageComments")[0].innerText = "0 Comments |";  
  345.                 }  
  346.             },  
  347.             error: function(error) {  
  348.                 alert(JSON.stringify(error));  
  349.             }  
  350.         });  
  351.     }  
  352.   
  353.     function AddComment() {  
  354.         var title = "Comment";  
  355.         var ParentCommentID = 0;  
  356.         var CommentText = $("#txtComments").val();  
  357.         $.ajax({  
  358.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CommentsList')/items",  
  359.             type: "POST",  
  360.             data: JSON.stringify({  
  361.                 '__metadata': {  
  362.                     'type': 'SP.Data.CommentsListListItem'  
  363.                 },  
  364.                 'PageURL': PageURL,  
  365.                 'CommentById': UserID,  
  366.                 'Title': title,  
  367.                 'ParentCommentID': ParentCommentID,  
  368.                 'CommentText': CommentText  
  369.             }),  
  370.             headers: {  
  371.                 "accept": "application/json;odata=verbose",  
  372.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  373.                 "content-Type": "application/json;odata=verbose"  
  374.             },  
  375.             success: function(data) {  
  376.                 $("#txtComments").val("");  
  377.                 getSetPageDet();  
  378.                 getAllComments();  
  379.             },  
  380.             error: function(error) {  
  381.                 console.log(JSON.stringify(error));  
  382.             }  
  383.         });  
  384.     }  
  385.   
  386.     function AddReply(CommentID) {  
  387.         var title = "Reply";  
  388.         var CommentText = $("#txtReply_" + CommentID).val();  
  389.         $.ajax({  
  390.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CommentsList')/items",  
  391.             type: "POST",  
  392.             data: JSON.stringify({  
  393.                 '__metadata': {  
  394.                     'type': 'SP.Data.CommentsListListItem'  
  395.                 },  
  396.                 'CommentById': UserID,  
  397.                 'Title': title,  
  398.                 'ParentCommentID': CommentID,  
  399.                 'CommentText': CommentText  
  400.             }),  
  401.             headers: {  
  402.                 "accept": "application/json;odata=verbose",  
  403.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  404.                 "content-Type": "application/json;odata=verbose"  
  405.             },  
  406.             success: function(data) {  
  407.                 getSetPageDet();  
  408.                 getAllComments();  
  409.             },  
  410.             error: function(error) {  
  411.                 console.log(JSON.stringify(error));  
  412.             }  
  413.         });  
  414.     }  
  415.   
  416.     function LikePage() {  
  417.         var title = "Page";  
  418.         var CommentID = 0;  
  419.         $.ajax({  
  420.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items",  
  421.             type: "POST",  
  422.             data: JSON.stringify({  
  423.                 '__metadata': {  
  424.                     'type': 'SP.Data.LikesListListItem'  
  425.                 },  
  426.                 'PageURL': PageURL,  
  427.                 'LikeById': UserID,  
  428.                 'Title': title,  
  429.                 'CommentID': CommentID  
  430.             }),  
  431.             headers: {  
  432.                 "accept": "application/json;odata=verbose",  
  433.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  434.                 "content-Type": "application/json;odata=verbose"  
  435.             },  
  436.             success: function(data) {  
  437.                 $("#lnkBtnPageLike")[0].innerText = "Unlike";  
  438.                 getSetPageDet();  
  439.                 getAllComments();  
  440.             },  
  441.             error: function(error) {  
  442.                 console.log(JSON.stringify(error));  
  443.             }  
  444.         });  
  445.     }  
  446.   
  447.     function UnLikePage() {  
  448.         var title = "Page";  
  449.         $.ajax({  
  450.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items(" + $("#LikeID")[0].innerText + ")",  
  451.             type: "POST",  
  452.             async: false,  
  453.             headers: {  
  454.                 "Accept": "application/json;odata=verbose",  
  455.                 "X-Http-Method": "DELETE",  
  456.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  457.                 "If-Match": "*"  
  458.             },  
  459.             success: function(data) {  
  460.                 $("#lnkBtnPageLike")[0].innerText = "Like";  
  461.             },  
  462.             error: function(data) {  
  463.                 console.log(JSON.stringify(error));  
  464.                 getSetPageDet();  
  465.                 getAllComments();  
  466.             }  
  467.         });  
  468.     }  
  469.   
  470.     function DeleteReply(CommentID) {  
  471.         $.ajax({  
  472.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CommentsList')/items(" + CommentID + ")",  
  473.             type: "POST",  
  474.             async: false,  
  475.             headers: {  
  476.                 "Accept": "application/json;odata=verbose",  
  477.                 "X-Http-Method": "DELETE",  
  478.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  479.                 "If-Match": "*"  
  480.             },  
  481.             success: function(data) {  
  482.                 DeleteChildItems(CommentID);  
  483.                 console.log("Comment deleted successfully!");  
  484.                 getSetPageDet();  
  485.                 getAllComments();  
  486.             },  
  487.             error: function(data) {  
  488.                 console.log(JSON.stringify(error));  
  489.             }  
  490.         });  
  491.     }  
  492.   
  493.     function DeleteComment(CommentID) {  
  494.         $.ajax({  
  495.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CommentsList')/items(" + CommentID + ")",  
  496.             type: "POST",  
  497.             async: false,  
  498.             headers: {  
  499.                 "Accept": "application/json;odata=verbose",  
  500.                 "X-Http-Method": "DELETE",  
  501.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  502.                 "If-Match": "*"  
  503.             },  
  504.             success: function(data) {  
  505.                 DeleteChildItems(CommentID);  
  506.                 console.log("Comment deleted successfully!");  
  507.                 getSetPageDet();  
  508.                 getAllComments();  
  509.             },  
  510.             error: function(data) {  
  511.                 console.log(JSON.stringify(error));  
  512.             }  
  513.         });  
  514.     }  
  515.   
  516.     function DeleteChildItems(parentId) {  
  517.         getItemsfromURL("/_api/web/lists/GetByTitle('LikesList')/items?$filter=CommentID eq " + parentId).done(function(data) {  
  518.             data.d.results.forEach(function(item) {  
  519.                 var childId = item.ID;  
  520.                 deleteItem("/_api/web/lists/GetByTitle('LikesList')/getItemById(" + childId + ")", item).done(function(d_data) {  
  521.                     //deleted child item.  
  522.                 });  
  523.             });  
  524.         });  
  525.         getItemsfromURL("/_api/web/lists/GetByTitle('CommentsList')/items?$filter=ParentCommentID eq " + parentId).done(function(data) {  
  526.             data.d.results.forEach(function(item) {  
  527.                 var childReplyId = item.ID;  
  528.                 deleteItem("/_api/web/lists/GetByTitle('CommentsList')/getItemById(" + childReplyId + ")", item).done(function(d_data) {  
  529.                     //deleted child item.  
  530.                 });  
  531.                 getItemsfromURL("/_api/web/lists/GetByTitle('LikesList')/items?$filter=CommentID eq " + childReplyId).done(function(data) {  
  532.                     data.d.results.forEach(function(item) {  
  533.                         var childLikeId = item.ID;  
  534.                         deleteItem("/_api/web/lists/GetByTitle('LikesList')/getItemById(" + childLikeId + ")", item).done(function(d_data) {  
  535.                             //deleted child item.  
  536.                         });  
  537.                     });  
  538.                 });  
  539.             });  
  540.         });  
  541.     }  
  542.     //Get items   
  543.     function getItemsfromURL(url) {  
  544.         return $.ajax({  
  545.             url: _spPageContextInfo.webAbsoluteUrl + url,  
  546.             type: "GET",  
  547.             headers: {  
  548.                 "accept": "application/json;odata=verbose",  
  549.             }  
  550.         });  
  551.     }  
  552.     //Delete Item  
  553.     function deleteItem(url, oldItem) {  
  554.         return $.ajax({  
  555.             url: _spPageContextInfo.webAbsoluteUrl + url,  
  556.             type: "DELETE",  
  557.             headers: {  
  558.                 "accept": "application/json;odata=verbose",  
  559.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  560.                 "If-Match": oldItem.__metadata.etag  
  561.             }  
  562.         });  
  563.     }  
  564.   
  565.     function getSetReplyDet() {  
  566.         var commentIDColl = $('span[id^="ReplyID_"]');  
  567.         $.each(commentIDColl, function(index, e) {  
  568.             var commentID = e.innerText;  
  569.             $.ajax({  
  570.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items?$filter=LikeById eq " + UserID + " and CommentID eq '" + commentID + "'",  
  571.                 type: "GET",  
  572.                 headers: {  
  573.                     "accept": "application/json;odata=verbose",  
  574.                     "content-Type": "application/json;odata=verbose"  
  575.                 },  
  576.                 success: function(data) {  
  577.                     if (data.d.results.length > 0) {  
  578.                         $("#lnkBtnReplyLike_" + commentID)[0].innerText = "Unlike";  
  579.                         $("#ReplyLikeID_" + commentID)[0].innerText = data.d.results[0].Id;  
  580.                     } else {  
  581.                         $("#lnkBtnReplyLike_" + commentID)[0].innerText = "Like";  
  582.                     }  
  583.                 },  
  584.                 error: function(error) {  
  585.                     alert(JSON.stringify(error));  
  586.                 }  
  587.             });  
  588.             $.ajax({  
  589.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LikesList')/items?$expand=LikeBy&$select=*,LikeBy/Title&$filter=CommentID eq '" + commentID + "' and Title eq 'Reply'",  
  590.                 type: "GET",  
  591.                 headers: {  
  592.                     "accept": "application/json;odata=verbose",  
  593.                     "content-Type": "application/json;odata=verbose"  
  594.                 },  
  595.                 success: function(data) {  
  596.                     if (data.d.results.length > 0) {  
  597.                         var likeToolTip = "";  
  598.                         var me = false;  
  599.                         $("#lblReplyLikes_" + commentID)[0].innerText = data.d.results.length;  
  600.                         $.each(data.d.results, function(index, value) {  
  601.                             if (value.LikeById == UserID) {  
  602.                                 me = true;  
  603.                             } else {  
  604.                                 likeToolTip += value.LikeBy.Title + "; ";  
  605.                             }  
  606.                         });  
  607.                         if (me == true) {  
  608.                             likeToolTip = "You; " + likeToolTip;  
  609.                         }  
  610.                         $("span#spReplyLikes_" + commentID).attr("title", likeToolTip);  
  611.                     } else {  
  612.                         $("#lblReplyLikes_" + commentID)[0].innerText = "0";  
  613.                     }  
  614.                 },  
  615.                 error: function(error) {  
  616.                     alert(JSON.stringify(error));  
  617.                 }  
  618.             });  
  619.         })  
  620.     }  
  621. </script>  
Step 4

Create one web part page add your contents in to it. Add one more content editor web part -> edit web part -> give path of the txt file-> click on apply -> click on ok-> save the page -> publish it.

Step 5

After publishing the page you will see a comment box to add the comments and a like button to like the particular page.

Step 6

You can add the above code into any web part page using content editor and you will see the above functionality is working.