ソーシャルブックマークの作成

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

ソーシャルブックマークの作成

ソーシャルブックマーク適用すると、アプリのコンテンツを選択したソーシャルネットワークにリンクできます。デフォルトでは、Liferay DXPはTwitter、Facebook、LinkedIn、およびGoogle Plusのソーシャルブックマークをサポートしています。モジュール com.liferay.social.bookmarks.apiから SocialBookmark インターフェースを実装するコンポーネントを登録することにより、独自のソーシャルブックマークを作成することもできます。このチュートリアルでは、これを行う方法を示します。

SocialBookmarkインターフェイスの実装

SocialBookmark インターフェイスを実装するには、次の手順に従います。

* SocialBookmark クラスを作成し、 social.bookmarks.type プロパティを定義するコンポーネントを登録します。このプロパティの値は、ソーシャルブックマークを使用するときに、 liferay-social-bookmarks：bookmarks タグの type 属性に入力した値です。

たとえば、Twitterソーシャルブックマーククラスの定義は次のとおりです。
```
@Component(immediate = true, property = "social.bookmarks.type=twitter")
public class TwitterSocialBookmark implements SocialBookmark {...
```

ResourceBundleLoader 参照を作成して、ソーシャルブックマークの名前のローカライズを支援します。

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

getName メソッドを実装して、ソーシャルブックマークの名前を 文字列として返します。このメソッドは、 LanguageUtil および ResourceBundle介してローカライズに使用できる Locale オブジェクトを受け取ります。
```
@Override
public String getName(Locale locale) {
    ResourceBundle resourceBundle = _resourceBundleLoader.loadResourceBundle(locale);

    return LanguageUtil.get(resourceBundle, "twitter");
}
```
getPostURL メソッドを実装して、共有URLを返します。このメソッドは、タイトルとURLから共有URLを構築し、 URLCodec を使用して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);
}
```

ServletContext 参照を作成します。

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

インライン表示スタイルが選択されたときに呼び出される render メソッドを実装します。通常、このメソッドは共有URLへのリンク（共有ボタンなど）をレンダリングしますが、必要なものに使用できます。デフォルトのソーシャルブックマークで一貫したルックアンドフィールを維持するには、クレイアイコン使用できます。

この例では、Clayアイコン（page.jsp）を含むJSPの RequestDispatcher を取得し、そのJSPを応答に含めます。
```
@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);
}
```

次に、 page.jsp ファイルを作成する方法の例が表示されます。

JSPを作成する

上記 SocialBookmark 実装で参照されている page.jsp ファイルは、クレイリンク（clay：link）を使用して、クレイに含まれるTwitterアイコンを指定およびスタイルします。以下の手順に従って、独自のソーシャルブックマーク用のJSPを作成します。

クレイ および ライフライフテーマ taglib宣言を追加します。

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

インポート GetterUtil および SocialBookmark：

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

リクエストから、 SocialBookmark インスタンスとソーシャルブックマークのタイトルと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"));
%>

タイトルとURLは、ソーシャルブックマーク適用するときに、 liferay-social-bookmarks タグライブラリを介して設定されます。

Clayリンクを追加します。この例では、次の clay：link 属性を設定します。
- buttonStyle：この例では、ボタンのタイプを2次ボタンとしてレンダリングします。
- elementClasses：ボタンのスタイル設定に使用するカスタムCSS（オプション）。
- href：ボタンのURL。 SocialBookmark インスタンスの getPostURL メソッドを呼び出して、これを指定する必要があります。
- icon：ボタンのアイコン。この例では、Clay（twitter）に含まれるTwitterアイコンを指定します。
- title：ボタンのタイトル。この例では、 SocialBookmark インスタンスの getName メソッドを使用します。
```
<clay:link
        buttonStyle="secondary"
        elementClasses="btn-outline-borderless btn-sm lfr-portal-tooltip"
        href="<%= socialBookmark.getPostURL(title, url) %>"
        icon="twitter"
        title="<%= socialBookmark.getName(locale) %>"
/>
```

ソーシャルブックマークの実装の実際の完全な例を確認するには、 LiferayのTwitterソーシャルブックマークコード参照してください。

ヘルプセンター

製品

リソース

セキュリティ

サポート

ドキュメンテーション

ソーシャルブックマークの作成

ソーシャルブックマークの作成

SocialBookmarkインターフェイスの実装

JSPを作成する

関連トピック