urb8kg
Last Updated: February 25, 2016
·
15.61K
· bleakgadfly
45c307fd94671e91c9ebebf29a636214

Custom "Like" button in SharePoint 2013

As many have noticed, SharePoint 2013 comes with a lot of new social features. One of those features is the possibility to "Like" a list item. You can activate the "Like" functionality in "List Settings", under "Rating Settings". This adds two columns to your list, "LikedBy" and "LikesCount". LikesCount has an XSLT-formatted column which allows you to "Like" a list item in the list view.

This is all well and good, but what if you want to have a custom Like-button? If you have articles in the Pages-library you want to "Like", how would you go about doing that? An immediate solution would be to manipulate the LikedBy and LikesCount column, increasing the number of likes and who liked it. This, however, is not a good solution for a number of reasons. Among them concurrency and the fact that SharePoint checks out the Page once you start editing the column.

After digging around in the SharePoint JavaScript libraries I came across a function called Microsoft.Office.Server.ReputationModel.Reputation. This function takes in a SP.ClientContext object, a List ID (without the curly-braces), a list item ID and a boolean value describing whether or not you want to "Like" the article.

The following code shows how you can get the current list id and the current list item id on a page and set the current user to "Like" the item. Just hook it up to a click event.

EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function () {
    Microsoft.Office.Server.ReputationModel.
    Reputation.setLike(aContextObject, 
        _spPageContextInfo.pageListId.substring(1, 37),  
        _spPageContextInfo.pageItemId, false);

    aContextObject.executeQueryAsync(
        function () {
            // Do something if successful
        }, function (sender, args) {
            // Do something if error
    });
});

Remember to include sp.js, sp.core.js and reputation.js on your page, preferably in a master page or in a web part with registerSod.

Say Thanks
Respond

6 Responses
Add your response

6119

Hi Cato,
Are you using a certain type of site template with this code? I am using a Blog Site Template, and I am getting the following error in my failure event handler: ""The Gifted Badges List is missing".
I'm curious if the "Microsoft.Office.Server.ReputationModel.Reputation.setLike" function call is dependent on the context of certain types of sites.

Thanks for the great post!
E

over 1 year ago ·
6153
45c307fd94671e91c9ebebf29a636214

@eco:

Thanks! I have only tried this with team and publishing templates, not with blog site. Not sure what you mean by "failure event handler", but it doesn't seem like the ReputationModel can find your list. Remember, you need to use the List GUID, not the List name, as argument to setLike.

Above, I've used the _spPageContext object to get the List GUID dynamically for the current article.

over 1 year ago ·
6203

Cato,
Thanks for the reply. I think my problem was that I was trying to use a SP.ClientContext from my root site, and the list that I was trying to modify was on a sub site. Once I retrieved the Client Context from the sub site, everything started working great!

Thanks again for the post!
E

over 1 year ago ·
8284

this is a great article. how would you hook this up for the function to be called form a SharePoint hosted app in which the list is in the parent site?

over 1 year ago ·
10687
0 byd7x6rj9dwti87vcv7kx53uqf703qxvvojrx58iiouaogesrsj elqlvtf3cty9nxfligycwry5

Any idea why the total number of likes on a SharePoint discussion group only counts likes in replies? Doesn't seem to count the likes on the original post.

over 1 year ago ·
10772
45c307fd94671e91c9ebebf29a636214

@dee jay pee: No, I haven't tried this on a SharePoint discussion group

@samporras: I'm not sure that is possible (let me know if you figure it out).

over 1 year ago ·