AFRAIT

Do you ever wanted to Like list items “facebook like”? I can now like my list items in a really great way. Here the result I have:

I will show you my scripts to get the above view.

First you need a custom list. In my case it is called “News”. In the list there are the following columns:

1. Title -> Single line of text
2. Description -> Multiple lines of text
3. PictureURL -> Hyperlink or Picture -> Hyperlink
4. Link -> Hyperlink or Picture -> Hyperlink

After you created your list, stay in the General Settings Page (try not to think of HIMYM) and go to “Rating settings”.

Now select the options like in the picture below.

If you now jump back to your list and have created some items you can now start to “like” the items in the list.

But that’s not the fancy way we want, right?

So now create a page for your news and start with the following script (don’t stop reading, you can do this!):

<script type="text/javascript">

    $(document).ready(function() {    
        
		// Rest Call
        var requestUri = "/_api/lists/getbytitle('News')/items?$orderby=ID desc";
		
		// var to store the description later on
        var llength = "";
        						
            $.ajax({
                url: requestUri,
                type: "GET",
                headers: { "ACCEPT": "application/json;odata=verbose" },
                success: function (data) {
                    $.each(data.d.results, function (i, item){
                        var title = item.Title;
                        var description = item.Description;
                        var pictureURLDesc = item.PictureURL.Description;
                        var pictureURL = item.PictureURL.Url;	
                        var linkDesc = item.Link.Description;
                        var linkURL = item.Link.Url;	
                        var likesCount = item.LikesCount;
                        var currentItemID = item.ID;				
			
						try 
						{	
							// Slice the description to a maximum of 102 and add "..." to it
							if (description.length > 102){
								llength = description.slice(0, 102) + " ...";
							}
							else {
								llength = description;
							}
						} 
   						catch ( err ) 
   						{ 
   							alert( err ); 
   						}				

						// Call the next function to get the initial Like Count
						GetLikeCount(currentItemID);
						
						// Set News item
						document.getElementById("head" + i).innerHTML = "<div class='thumbnail-img social-news-"+currentItemID+"'><div class='overflow-hidden'><img class='img-responsive' src=" + pictureURL + " alt=" + pictureURLDesc + "/> &#160;</div><a class='btn-more hover-effect' href='#' onclick='LikePage("+currentItemID+")'><span class='likecount'></span><a href='#' class='LikeButton'></a></div></a><div class='caption'><h3><a class='hover-effect' href='/pages/shoutnews.aspx'>" + title + "</a></h3><p>" + llength + "</p></div>";                  	
                    })
                },
                error: function () {
                    alert("Error getting items");
                }                     
            });   
                        
    });
	
	var listId = 'E7585AC3-82C5-4D02-A9E9-58A735DB89B9';
    var siteUrl = '/';
    var itemId = 1;
	
	function GetLikeCount(j) {
		
		//alert("Run for Item ID: " + j);  
		var passedItemId = j;
		var context = SP.ClientContext.get_current();
		var list = context.get_web().get_lists().getById(listId);
		var item = list.getItemById(passedItemId);
		
		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');
			
			//alert(itemc);
			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, passedItemId);

		}), Function.createDelegate(this, function (sender, args) {
			//alert('F1');
		}));

	}

	function LikePage(i) {
		var itemId = i;
		
		//alert("Item ID: " + itemId);
		var like = false;
		var likeButtonText = $(".social-news-" + itemId +" a.LikeButton").text();
		if (likeButtonText != "") {
			if (likeButtonText == "Like")
				like = true;
		}
			var aContextObject = new SP.ClientContext();
			EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function () {
				//debugger;
				Microsoft.Office.Server.ReputationModel.Reputation.setLike(aContextObject, listId, itemId, like);

				aContextObject.executeQueryAsync(
					function () {
						//alert(String(like));
						GetLikeCount(itemId);
					}, function (sender, args) {
						//alert(sender + args);
						//console.log(sender,args);
					});
			});


	}
	
	function ChangeLikeText(like, count, id) {
		var rootEl = $(".social-news-" + id);
		
		if (like) {
			rootEl.find("a.LikeButton").text('Like').hide();
			var htmlstring = "<i class='icon-thumbs-up'></i>" + " " + String(" " + count);
		}
		else {
			rootEl.find("a.LikeButton").text('Unlike').hide(); // Option to change the thumb up picture to e.G. thumb down
			var htmlstring = "<i class='icon-thumbs-up'></i>" + " " + String(" " + count);
		}
		
		if (count > 0)
			rootEl.find(".likecount").html(htmlstring)
		else
			rootEl.find(".likecount").html(htmlstring);
	}
	
</script>

Note: In the function GetLikeCount() the .$1E_1 stands for the userID. If you put in two lines console.log(itemc) and console.log($v_0) you should get a better understanding of that.

You can then check the output within your browsers develper tools.

I know it looks huge, but be patient. First it’s not really hard to understand and second I will try to give you a brief overview. I also had to get into it. But it is worth it!

 

There are “kind of” four blocks in there. Starting of with document.ready function.

There we are getting our news items from the list via REST. Also we check if the description is to long and slice it if we need to.

Then we call the next function (GetLikeCount) and finally set the news element.

 

GetLikeCount:

Well, I don’t think this needs much to talk about… (Get the like count of the item)

 

LikePage:

Of course, I didn’t came up with all these functions on my own. Originally I had the idea from some guys which used the functions to like a page, so thanks there. You see this in the function name.

In my case, this function sets the likecount +1 and calls the GetLikeCount function again to update everthing.

 

ChangeLikeText:

Also pretty self speaking here but as a hint, you can change the icons you use for the +1 and also -1, or dislike. So you are kind of faster then facebook. Create your own dislike button today!

 

So that’s all the scripting you need. I am using bootstrap to create the view. So please take a look there!

Love it? like it, share it and don’t be afraIT to like my facebook page or follow me on twitter to keep track.