When you enable social bookmarks, icons for sharing on Twitter, Facebook, and Google Plus appear below your app’s content. Liferay Portal’s taglibs provide the markup you need to add this feature to your app.


Figure 1: Social bookmarks are enabled in the built-in Blogs portlet

Follow these steps to add social bookmarks to your app:

  1. Make sure your entity is asset enabled.

  2. Choose a view in which to show the social bookmarks. For example, you can display them in one of your portlet’s views, or if you’ve implemented asset rendering you can display them in the full content view in the Asset Publisher portlet.

  3. In your JSP, include the liferay-uitaglib declaration:

    <%@ taglib prefix="liferay-ui" uri="http://liferay.com/tld/ui" %>
  4. Use ParamUtil to get the entity’s ID from the render request. Then use your -LocalServiceUtil class to create an entity object:

    long entryId = ParamUtil.getLong(renderRequest, "entryId");
    entry = EntryLocalServiceUtil.getEntry(entryId);
  5. Use the liferay-ui:social-bookmarks tag to add the social bookmarks component. The target attribute refers to the HTML target. Pass the content’s URL in the url attribute, using PortalUtil to retrieve the URL. The URL and title you provide is sent to the social network and becomes part of the link you create there:

        contentId="<%= String.valueOf(assetEntry.getEntryId()) %>"
        title="<%= String.valueOf(entry.getName()) %>"
        url="<%= PortalUtil.getCanonicalURL((PortalUtil.getCurrentURL(request)), 
            themeDisplay, layout) %>" 

    Pay special attention to the displayStyle attribute. This attribute sets the social bookmarks’ appearance. Setting displayStyle to menu, as in this example, hides the share buttons in a clutter-free menu (see above screenshot).

    Setting displayStyle to simple displays the share buttons in a simple row without share stats.


    Figure 2: Here are the share buttons with displayStyle set to simple.

    Setting displayStyle to vertical displays the share buttons in a column, with share stats above each (share stats show the number of times the asset has been shared on the corresponding social network).


    Figure 3: Here are the share buttons with displayStyle set to vertical.

    Setting displayStyle to horizontal displays the share buttons in a row with share stats to the right of each.


    Figure 4: Here are the share buttons with displayStyle set to horizontal.

The social bookmarks UI component now shows in your entity’s view.


Great! Now you know how to let users share content in your asset enabled apps.

Related Topics

Adding, Updating, and Deleting Assets for Custom Entities

Adding Permissions to Resources

Rendering an Asset

Using the Liferay UI Taglib

0 (0 Votes)
Social Previous