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.