Creating Social Bookmarks

Applying social bookmarks lets you link your app’s content to the social networks of your choice. By default, Liferay DXP supports social bookmarks for Twitter, Facebook, LinkedIn, and Google Plus. You can also create your own social bookmark by registering a component that implements the SocialBookmark interface from the module com.liferay.social.bookmarks.api. This tutorial shows you how to do this.

Implementing the SocialBookmark Interface

Follow these steps to implement the SocialBookmark interface:

Create your *SocialBookmark class and register a component that defines the social.bookmarks.type property. This property’s value is what you enter for the liferay-social-bookmarks:bookmarks tag’s type attribute when you use your social bookmark.

For example, here’s the definition for a Twitter social bookmark class:
```
@Component(immediate = true, property = "social.bookmarks.type=twitter")
public class TwitterSocialBookmark implements SocialBookmark {...
```

Create a ResourceBundleLoader reference to help localize the social bookmark’s name.

@Reference(
        target = "(bundle.symbolic.name=com.liferay.social.bookmark.twitter)"
)
private ResourceBundleLoader _resourceBundleLoader;

Implement the getName method to return the social bookmark’s name as a String. This method takes a Locale object that you can use for localization via LanguageUtil and ResourceBundle:

@Override
public String getName(Locale locale) {
    ResourceBundle resourceBundle = _resourceBundleLoader.loadResourceBundle(locale);

    return LanguageUtil.get(resourceBundle, "twitter");
}

Implement the getPostURL method to return the share URL. This method constructs the share URL from a title and URL, and uses URLCodec to encode the title in the URL:

@Override
public String getPostURL(String title, String url) {
    return String.format(
        "https://twitter.com/intent/tweet?text=%s&tw_p=tweetbutton&url=%s", 
        URLCodec.encodeURL(title), url);
}

Create a ServletContext reference:

@Reference(
        target = "(osgi.web.symbolicname=com.liferay.social.bookmark.twitter)"
)
private ServletContext _servletContext;

Implement the render method, which is called when the inline display style is selected. Typically, this method renders a link to the share URL (e.g., a share button), but you can use it for whatever you need. To keep a consistent look and feel with the default social bookmarks, you can use a Clay icon.

This example gets a RequestDispatcher for the JSP that contains a Clay icon (page.jsp), and then includes that JSP in the response:
```
@Override
public void render(
                String target, String title, String url, HttpServletRequest request,
                HttpServletResponse response)
        throws IOException, ServletException {

        RequestDispatcher requestDispatcher =
                _servletContext.getRequestDispatcher("/page.jsp");

        requestDispatcher.include(request, response);
}
```

Next, you’ll see an example of how to create a page.jsp file.

Creating Your JSP

The page.jsp file referenced in the above SocialBookmark implementation uses a Clay link (clay:link) to specify and style the Twitter icon included with Clay. Follow these steps to create a JSP for your own social bookmark:

Add the clay and liferay-theme taglib declarations:

<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

Import GetterUtil and SocialBookmark:

<%@ page import="com.liferay.portal.kernel.util.GetterUtil" %>
<%@ page import="com.liferay.social.bookmarks.SocialBookmark" %>

From the request, get a SocialBookmark instance and the social bookmark’s title and URL:

<%
SocialBookmark socialBookmark = (SocialBookmark)request.getAttribute("liferay-social-bookmarks:bookmark:socialBookmark");
String title = GetterUtil.getString((String)request.getAttribute("liferay-social-bookmarks:bookmark:title"));
String url = GetterUtil.getString((String)request.getAttribute("liferay-social-bookmarks:bookmark:url"));
%>

The title and URL are set via the liferay-social-bookmarks tag library when applying the social bookmark.

Add the Clay link. This example sets the following clay:link attributes:
- buttonStyle: This example renders The button’s type as a secondary button.
- elementClasses: The custom CSS to use for styling the button (optional).
- href: The button’s URL. You should specify this by calling your SocialBookmark instance’s getPostURL method.
- icon: The button’s icon. This example specifies the Twitter icon included in Clay (twitter).
- title: The button’s title. This example uses the SocialBookmark instance’s getName method.
```
<clay:link
        buttonStyle="secondary"
        elementClasses="btn-outline-borderless btn-sm lfr-portal-tooltip"
        href="<%= socialBookmark.getPostURL(title, url) %>"
        icon="twitter"
        title="<%= socialBookmark.getName(locale) %>"
/>
```