When you enable social bookmarks, icons for sharing on Twitter, Facebook, and Google Plus appear below your app’s content. Liferay DXP’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:
-
Make sure your entity is asset enabled.
-
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.
-
In your JSP, include the
liferay-ui
taglib declaration:<%@ taglib prefix="liferay-ui" uri="http://liferay.com/tld/ui" %>
-
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); %>
-
Use the
liferay-ui:social-bookmarks
tag to add the social bookmarks component. Thetarget
attribute refers to the HTML target. Pass the content’s URL in theurl
attribute, usingPortalUtil
to retrieve the URL. The URL andtitle
you provide is sent to the social network and becomes part of the link you create there:<liferay-ui:social-bookmarks contentId="<%= String.valueOf(assetEntry.getEntryId()) %>" displayStyle="menu" target="_blank" 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. SettingdisplayStyle
tomenu
, as in this example, hides the share buttons in a clutter-free menu (see above screenshot).Setting
displayStyle
tosimple
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
tovertical
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
tohorizontal
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.
Figure 5: The new JSP lets users share app content to social networks.
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