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.
Next Recommended Reading Sharepoint Custom Control Creating custom Multi Choice field type