Add a Like/Ratings Button to the SharePoint Item Display Form (DispForm.aspx) to Allow Users to Like an Item from that page

like.js

<script language="javascript" type="text/javascript" src="/sites/MySPSite/SiteAssets/jquery-2.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="/sites/MySPSite/SiteAssets/jquery.SPServices.min.js"></script>

<script type="text/javascript">

SP.SOD.registerSod('reputation.js', '/_layouts/15/reputation.js');
SP.SOD.executeFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadRatingFunction);
});

function LoadRatingFunction() {
   var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
   var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId);
   var item = list.getItemById(GetUrlKeyValue("ID", false, location.href));
   
   function GetLikeCount() {
      var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
      var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId);
      var item = list.getItemById(GetUrlKeyValue("ID", false, location.href));

      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');
      }));
   }  

   UpdateLike = function() {
      var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);

      var LikeOrUnlike = document.getElementById('LikeButton').innerHTML;
      
      var setLike;
      if (LikeOrUnlike === 'Unlike') {
         setLike = false;//set false to unlike
      } else {
         setLike = true;
      }

      Microsoft.Office.Server.ReputationModel.Reputation.setLike(context, _spPageContextInfo.pageListId, GetUrlKeyValue("ID", false, location.href), setLike);

      context.executeQueryAsync(Function.createDelegate(this, this.RatingSuccess), Function.createDelegate(this, this.RatingFailure));
   };

   ChangeLikeText = function(like, count) {
      if (like) {
         $("#LikeButton").text('Like');
      } else {
         $("#LikeButton").text('Unlike');
      }
   }

   RatingSuccess = function(sender, args) {
      GetLikeCount()
   }

   RatingFailure = function(sender, args) {
      alert('SetRating failed:' + args.get_message() + '. You can blame Ray for this. :(');//note that you will get error if try like twice
      GetLikeCount()
   }

   $(document).ready(function () {
      GetLikeCount();
      $("#LikeButton").click(function () {
         UpdateLike();
      });
   });
}

</script>
<button type="button" id="LikeButton" class="LikeButton">Like</button>

Worked like a charm. Thanks, Ray.

Hey Ray! Quick question. When clicking "Like" the functionality works, but the like button never renames to "Unlike". So I can't get the Unlike functionality to work. Any suggestions?