Menu Home

SharePoint 2013 add like functionality to publishing page with javascript

It has been a while since I have posted a SharePoint specific blog post, it doesn’t mean that I haven’t been working with SharePoint, just that I have been stuck on SP2010 projects with little interesting to talk about. But now I’m also starting to work with SP2013 and hopefully over the summer I will be able to look into the SP2013 certifications too, so expect more SharePoint focused blog posts in the coming months.

In SharePoint 2013 the rating functionality that can be enabled on all libraries, have been extended with a simple like/unlike functionality in addition to the 5 star rating from SP2010. Obviously this is something the customers love, as it reminds them of their well-known facebook like functionality. Unfortunately Microsoft for some reason decided to only enable the functionality directly from the page library list view, where most end users will never end up when working with publishing sites.

Therefore I create the following piece of javascript that can be inserted on a page layout, so the end users can like/unlike the page when they open it. Of course it can be wrapped in a control, or even a field control if you want, but since there is nothing newsworthy in that, I will just present you with the javascript. Also note that this javascript could be nicer, but I’m more interested in presenting a solution, than the perfect solution, as most people probably have to tweak it to their needs anyway.

To use the script the following requirements must be met

  • like functionality is enabled on the page library
  • You must include reputation.js if you are wrapping this in a webcontrol, that can e.g. be done with: ScriptLink.RegisterScriptAfterUI(this.Page, “reputation.js”, false);

Include the following javascript either directly in the page or preferably from your javascript file.

All that is left for you to do is to insert the following html on your page, where you want the number of likes to appear.

When you click on the number you like the page if you haven’t done so before, or unlike the page. Feel free to add your own text and images to the html inserted by the javascript to make it more appealing.

I uploaded a full example on how to add the like functionality to the ArtileLeft.aspx page layout, it can be done with SharePoint designer if you are after a no code solution.

Categories: SharePoint

Tagged as:

Simon J.K. Pedersen

18 replies

  1. Hi Simon, thanks for the effort. I am trying to reuse the code that you pasted earlier and seems to have some syntax error in JS. I tried correcting them but still I get likepage undefined error.
    Can you please revisit and please paste working code here? that will be really helpful. Thanks

  2. Found that a wrong flag is sent back when the user had already liked the page. This was happening coz of the looping.

    fixed it by changing the code to:

    // Checks if the user already liked the page, and returns the number of likes.
    getUserLikedPage: function (cb) {
    var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
    var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId);
    var item = list.getItemById(_spPageContextInfo.pageItemId);

    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 $v_0 = item.get_item(‘LikedBy’);
    var $likesCount = item.get_item(‘LikesCount’);
    var liked = false;

    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) {

    //Liked by the user already
    liked = true;
    break;
    }
    }
    }

    //Not liked by the user yet
    cb(liked, $likesCount);

    }),
    Function.createDelegate(this, function (sender, args) {
    //Custom error handling if needed
    }));
    },

  3. I checked the code again today, there was some formatting issues would make the code break, I have fixed them now. Unfortunately the github gists still look ugly on my page, but the code should now work correctly. If not take a look at the full ArticleLeft.aspx example, that is from a fresh publishing site and it works.

  4. Hi J.K.

    Wanted to say thank you so much for this post. I was able to modify this slightly to fit my needs and it works a peach. I changed the markup so it displays an icon and the word Like (or Unlike) in front of the like count, and accounted for a null likeCount, changing it to 0 if null.

    You made my week!

    Thanks,

    Kevin Lowe

  5. Hi Kevin,

    I’d like to do what you did by including and icon and words before the like count. Would you be able to add the code you used?

    Thanks
    Maria-Elisa

  6. Very useful post.

    I am using your code and is always just displaying the number “1”.
    There is not an option to unlike and not the Happy Face from Sharepoint OOB like functionality. I don’t know if you already achieved that, but was a great job so far. 🙂

  7. Thanks for the feedback. I just recently revisited this code in a new project, so I will post an updated sample within the next weeks. Stay tuned.

  8. Hi Simon,

    thanx for the great effort. Is it possible to use the solution on a SharePoint wiki page by introducing a content editor to the page?

  9. Yes most likely. You should however be aware that you can’t enable both like and the star rating (which is the default for wiki pages). This is just the way Microsoft designed it, like and rating are mutually exclusive.

  10. Hi Simon,

    Thanks for this wonderful post.

    Is it possible to fetch the dates on which the likes received on the page ?
    I need dates for generating a report.
    .

  11. Thanks for posting this. I noticed an issue with the page giving an error on load and giving the initial value of null. I changed the line
    _spBodyOnLoadFunctionNames.push(“likepage.initialize”);
    to
    ExecuteOrDelayUntilScriptLoaded(likepage.initialize, “SP.js”);
    and that fixed my issue.

  12. Thank you for this script, it saved me a lot of time.

    On the other hand I encountered an error.
    on the line
                         If ($ v_3. $ 1E_1 === _spPageContextInfo.userId) {
    Which checks if the current user already likes the $ v_3 property. $ 1E_1 (maybe because of the French version?).
    I replaced this line with this one to correct the problem:
                         If ($ v_0 [$ v_1] .get_lookupId () == _spPageContextInfo.userId) {

    If it can help someone.
    Still thank you, great job

  13. Hi Kevin Lowe,

    The same as Maria-Elisa – I’d also like to see how you included an icon and words before the like count and how you replaced null with zero. I’m assuming it’s a js code change and an HTML change? Can you please share your solution – I’m not a developer but I’ve been tasked with getting Likes to work on publishing pages. It’s working for me but I’d really like it to be much more user friendly and nicely presented. Thanks.

    If Kevin’s not around and anyone else can help with this that would be fantastic! Thanks 🙂

    Mark.

Leave a Reply

Your email address will not be published. Required fields are marked *