Applying Social Bookmarks

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

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:

    <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. 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.

    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.

    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.

    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.

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.

Adding, Updating, and Deleting Assets for Custom Entities

Adding Permissions to Resources

Rendering an Asset

Using the Liferay UI Taglib

« Introduction to SocialAdding Comments to your App »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています