×

You're using an outdated browser

For a better experience, keep your browser up to date. Check here for the latest version.

Manual

Add a like button to pages, comments or attachments

Thomas Walker

Thomas Walker Last update: Aug 7, 2017

This guide explains how you can add a 'like' button to pagescomments and attachments in Scroll Viewport.

Please note that only logged-in users can like content using this button.

Implement a like button

  1. Firstly, add this code to your <head> element:

    <meta name="username" content="$user.username">
    <meta name="context-path" content="$contextPath">
  2. Then, place this code next to the content that you want to add a like button to:

    <div class="like-container">
        <a data-content-id="$page.id" style="display: none;"></a>
        <span></span>
    </div>

    In this example, the data-content-id is ' $page.id ', meaning that this code will add a like button to the page itself.

    However, you can also change the data-content-id value to the element id of comments and attachments to give them a like button.

  3. Now, embed this script in the page:
$(document).ready(function () {
    var username = $('meta[name=username]').attr('content')
    var contextPath = $('meta[name=context-path]').attr('content')
    if (username !== "") {
        var likeElements = $('.like-container')
        likeElements.find('a').show()
        likeElements.find('a').on('click', function(e) {
            e.preventDefault()
            var linkElement = $(e.target)
            if ($(e.target).data('content-id')) {
                pageId = $(e.target).data('content-id')
            }
            $.ajax({
                url: contextPath + '/rest/likes/1.0/content/' + pageId + '/likes',
                method: linkElement.is('.liked') ? 'DELETE' : 'POST',
                contentType: 'application/json'
            }).done(function(data, textStatus, jqXHR) {
                linkElement.toggleClass('liked')
                linkElement.text(linkElement.is('.liked') ? 'Unlike' : 'Like')
            })
            return false
        })
        likeElements.each(function(index, likeElement) {
            var likeElementLink = $(likeElement).find('a')
            var likeElementText = $(likeElement).find('span')
            pageId = likeElementLink.data('content-id') || pageId
            $.get(contextPath + '/rest/likes/1.0/content/' + pageId + '/likes').done(function(data) {
                var isLiked = false
                $.each(data.likes, function(index, like) {
                    if (like.user && like.user.name === username) {
                        isLiked = true
                        return false
                    }
                })
                if (isLiked) {
                    likeElementLink.addClass('liked')
                    likeElementLink.text('Unlike')
                } else {
                    likeElementLink.text('Like')
                }
                likeElementText.text(data.likes.length +' people like this content')
            })
        })
    }
});

Of course, this code is just an example. For instance, you could delete the text in line 41 if you don't want to display the number of likes.

Modifying the code

After the buttons are initialized, inspecting their REST API HTTP call will return data that developers can use to expand the code in various ways:

The information reported here includes the following data:

NameDescription
content_idthe content's unique identifier
content_typethe type of content (page, comment or attachment)
likes

expanding this displays a list of all users who have liked this element. The following information fields are displayed:

  • avatarUrl – the URL of the avatar of the user who liked the content
  • followedByRemoteUser – shows whether the user who clicked 'like' is followed be the currently logged in user
  • fullName – the full name in Confluence of the user who liked the content
  • name – the Confluence username of the person who liked the content
  • url – the Confluence profile page of the user who liked the content (the structure of this address: /display/~user )

summarythe text that appears after the user clicks the like button

Result

This is what the button (made with unedited code from above, and unstyled) looks when implemented for page comments:

2x2.9
We use cookies to create a secure and effective browsing experience for our website visitors and to understand how you use our site (i.e. Google Analytics). For more information: click here.
Ok