ソーシャルPLUS連携

トップ＞サイト運営をする方向け＞目的から探す＞会員

ソーシャルPLUS連携

機能概要

ソーシャルPLUS連携とは

株式会社ソーシャルPLUS様が提供するソーシャルログインサービス「ソーシャルPLUS」と連携できる機能です。
エンドユーザーが普段利用している各種SNS等プロバイダのアカウントを利用して、本システムへのログイン、および会員登録をすることで、
登録フォームでの入力項目の手間の削減、サイトからの離脱率改善、サイトの利用率アップ、
さらにはコンバージョンアップにまで役立てることができます。

ソーシャルPLUSの詳細については、公式ホームページをご覧ください。

本システムで連携可能なプロバイダ

・Facebook
・X（旧Twitter）
・Google
・Yahoo!
・LINE　 ※1
・Apple　※2

※1……初期設定「ソーシャルプラス用LINE Profile+利用フラグ」を利用する場合は、新規会員登録時のフォームへ連携可能です。
※2……初期設定「ソーシャルプラス連携Apple用サイト接続子」の設定が必要です。

オプション導入にあたっての注意事項

・ご利用には、別途株式会社ソーシャルPLUSへのご利用申し込み手続きが必要です。
　※お申し込みの際に、本システムからの連携である旨をお伝えください。
・懸賞管理との併用はできません。

動作について

本オプション適用後の基本的な動作は、以下の通りです。

注文時ログインページ（cart_login.xhtml）

商品注文時に、会員が各プロバイダのアカウントを利用してログインできます。
各プロバイダで設定された個人情報が連携され、注文情報入力ページに出力されます。
未連携の場合は、会員登録入力ページ（member_input.xhtml）へ画面遷移します。

ログイン専用ページ（login.xhtml）

プロバイダと連携済みの場合は、ログイン時にそのプロバイダのアカウントでログインできます。
未連携の場合は、会員登録入力ページ（member_input.xhtml）へ画面遷移します。

会員マイページトップページ（member_mypage.xhtml）

各プロバイダとの連携を、追加/解除できます。

会員登録入力ページ（member_input.xhtml）

新規会員登録時に、各プロバイダのアカウントを利用した会員登録ができます。
各プロバイダで設定された個人情報が連携され、該当項目に出力されます。

導入手順

STEP 1. 弊社への申込み【店舗様】
STEP 2. 株式会社ソーシャルPLUS様への申し込み【店舗様】
STEP 3. 利用するプロバイダの連携設定【店舗様】
STEP 4. 弊社から店舗様へソーシャルPLUSの設定情報をヒアリング【弊社】
STEP 5. デモ環境：記述要素（m:idやviewaddon）の組み込み【店舗様】
STEP 6. デモ環境：動作確認【店舗様】
STEP 7. 本番環境：記述要素（m:idやviewaddon）の組み込み【店舗様】
STEP 8. 本番環境：動作確認【店舗様】

STEP 1. 弊社への申込み【店舗様】

本オプション利用の申し込みの旨を、弊社担当営業またはサポート窓口までご連絡ください。

STEP 2. 株式会社ソーシャルPLUS様への申し込み【店舗様】

「ソーシャルPLUS」利用申し込みの旨を、株式会社ソーシャルPLUS様へご連絡ください。

STEP 3. 利用するプロバイダの連携設定【店舗様】

プロバイダ側から本システムへ連携する個人情報の設定を行います。
各プロバイダの設定方法については、ソーシャルPLUSのマニュアルをご確認ください。

Appleをご利用の場合は、初期設定「ソーシャルプラス連携Apple用サイト接続子」の設定が必要です。

STEP 4. 弊社から店舗様へソーシャルPLUSの設定情報をヒアリング【弊社】

「ソーシャルPLUS」申し込み後に発行されるアカウントID・APIキー・サイトID・使用するプロバイダをヒアリングいたします。

設定情報は以下にてご確認ください。

・アカウントID：ソーシャルPLUS管理画面アカウント設定（右上のユーザー名）＞アカウント情報＞アカウントID
・APIキー：ソーシャルPLUS管理画面ダッシュボード＞設定＞ APIキー
・サイトID：ソーシャルPLUS管理画面サービス一覧のうち、[ ]で囲まれている文字列

STEP 5. デモ環境：記述要素（m:idやviewaddon）の組み込み【店舗様】

本オプションを利用するための記述要素（m:idやviewaddon）を、以下のテンプレートに組み込みます。

注文時ログインページ（cart_login.xhtml）
ログイン専用ページ（login.xhtml）
会員マイページトップページ（member_mypage.xhtml）
会員登録入力ページ（member_input.xhtml）

記述要素（m:idやviewaddon）について

最新の詳細な記述は、本システムのショップ管理ツールのサイドバーからダウンロードできる
「最新版テンプレート」をご確認ください。

テンプレートへの組み込みについて

弊社でテンプレートへの組み込み作業を行う場合は、別途費用が発生します。

注文時ログインページ（cart_login.xhtml）

1.<html>タグ内に「xmlns:social_plus="eb:SOCIAL_PLUS/view_common.json"」を定義（記述）します。

2.以下を<head>タグ内に記述します。

3.以下を<form m:id='FORM_TAG'>内に記述します。

サンプル

<!-- social_plus  -->
<div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' class="widebox social_provider">
        <h3>他サイトのアカウントでログイン/新規会員登録</h3>
        <!-- social plus error -->
        <div id="social_plus_error" m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS'>
                <div social_plus:write="SOCIAL_PLUS_ERROR_MSG_DISP_SCRIPT" m:HTML="">
                        <!-- メッセージ用スクリプト排出エリア -->
                </div>
                <div id="social_plus_error_tbl">
                        <table summary="メッセージ">
                                <tr>
                                        <td class="ico"><img src="images/icon_error.png" /></td>
                                        <td class="content"><span id="social_plus_error_msg">ここにエラーメッセージが表示されます</span></td>
                                </tr>
                        </table>
                </div>
        </div>
        <!-- / social plus error -->
        <ul>
                <li class="facebook"><a href="#" social_plus:attr="SOCIAL_PLUS_FACEBOOK_CART_LOGIN_TAG"><span>facebook</span></a></li>
                <li class="X"><a href="#" social_plus:attr="SOCIAL_PLUS_TWITTER_CART_LOGIN_TAG"><span>X</span></a></li>
                <li class="google"><a href="#" social_plus:attr="SOCIAL_PLUS_GPLUS_CART_LOGIN_TAG"><span>google</span></a></li>
                <li class="yahoo"><a href="#" social_plus:attr="SOCIAL_PLUS_YAHOO_CART_LOGIN_TAG"><span>yahoo!</span></a></li>
                <li class="line"><a href="#" social_plus:attr="SOCIAL_PLUS_LINE_CART_LOGIN_TAG"><span>LINE</span></a></li>
                <li class="custom" social_plus:if="IS_SOCIAL_PLUS_APPLE_USABLE"><a href="#" social_plus:attr="SOCIAL_PLUS_APPLE_CART_LOGIN_TAG"><img src="images/social_long_appleid.png" alt="Apple IDにサインイン" /></a></li>
        </ul>
</div>
<!-- / social_plus  -->

画面イメージ（view/userwebの場合）

1.<html>タグ内に「xmlns:social_plus="eb:SOCIAL_PLUS/view_common.json"」を定義（記述）します。

2.以下を<head>タグ内に記述します。

3.以下を<form m:id='FORM_TAG'>内に記述します。

サンプル

<!-- social_plus アプリがインストールされていない時の表示 -->
<div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' m:NOT="">
        <!-- / amazon payments アプリがインストールされていた時の表示 -->
        <table summary="ログイン">
                <tr>
                        <th class="title">ログインID</th>
                        <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td>
                </tr>
                <tr>
                        <th class="title">パスワード</th>
                        <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td>
                </tr>
        </table>
        <!-- ====================== ↓得意先管理オプションを使用する場合 ====================== -->
        <div m:id="common.IF_USE_CUSTOMER_MANAGEMENT">
                <p align="right"><a href="password_reminder.html">→ログインID・パスワードを忘れた方</a></p>
                <p align="right" m:id="common.IF_ENABLE_REGIST_MEMBER"><a href="member_regist_new.html">→会員登録をしていない方</a></p>
                <p align="right" m:id="common.IF_ENABLE_REGIST_CHILD_MEMBER"><a m:id='common.CHILD_MEMBER_REGIST_LINK_TAG' href="javascript:void(0)">→子会員登録をしていない方</a></p>
        </div>
        <!-- ====================== ↑得意先管理オプションを使用する場合 ====================== -->
        <div m:id="common.IF_USE_CUSTOMER_MANAGEMENT" m:NOT="">
                <p align="right"><a href="password_reminder.html">→ログインID・パスワードを忘れた方</a></p>
                <p align="right"><a href="member_regist_new.html">→会員登録をしていない方</a></p>
        </div>

        <!-- amazon payments アプリがインストールされていない時の表示 -->
        <div class="buttonarea" m:id='common.IF_APP_INSTALLED' m:app_cd='AMAZON_PAYMENTS' m:NOT="">
                <input type="submit" value="ログイン" class="button positive medium" />
        </div>
        <!-- / amazon payments アプリがインストールされていない時の表示 -->

        <!-- amazon payments アプリがインストールされていた時の表示 -->
        <div class="buttonarea" m:id='common.IF_APP_INSTALLED' m:app_cd='AMAZON_PAYMENTS'>
                <input aps:if="apsIsAmazon" type="submit" value="サイトにログイン" class="button positive medium" />
                <input aps:if="apsIsAmazon" m:NOT="" type="submit" value="ログイン" class="button positive medium" />
        </div>
        <!-- / amazon payments アプリがインストールされていた時の表示 -->
</div>
<!-- / social_plus アプリがインストールされていない時の表示 -->

<!-- social_plus アプリがインストールされていた時の表示 -->
<div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' class="social_provider">
        <!-- / amazon payments アプリがインストールされていた時の表示 -->
        <div class="box">
                <h3>サイト会員IDでログイン</h3>
                <table summary="ログイン">
                        <tr>
                                <th class="title">ログインID</th>
                                <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td>
                        </tr>
                        <tr>
                                <th class="title">パスワード</th>
                                <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td>
                        </tr>
                </table>

                <div social_plus:if="IS_SOCIAL_PLUS_VIA_LOGIN">
                        <input type="hidden" social_plus:attr="SOCIAL_PLUS_ID_HIDDEN_TAG_COMMON" />
                </div>
                <div social_plus:if="IS_SOCIAL_PLUS_VIA_LOGIN" m:NOT="">
                        <!-- ====================== ↓得意先管理オプションを使用する場合 ====================== -->
                        <div m:id="common.IF_USE_CUSTOMER_MANAGEMENT">
                                <p align="right"><a href="password_reminder.html">→ログインID・パスワードを忘れた方</a></p>
                                <p align="right" m:id="common.IF_ENABLE_REGIST_MEMBER"><a href="member_regist_new.html">→会員登録をしていない方</a></p>
                                <p align="right" m:id="common.IF_ENABLE_REGIST_CHILD_MEMBER"><a m:id='common.CHILD_MEMBER_REGIST_LINK_TAG' href="javascript:void(0)">→子会員登録をしていない方</a></p>
                        </div>
                        <!-- ====================== ↑得意先管理オプションを使用する場合 ====================== -->
                        <div m:id="common.IF_USE_CUSTOMER_MANAGEMENT" m:NOT="">
                                <p align="right"><a href="password_reminder.html">→ログインID・パスワードを忘れた方</a></p>
                                <p align="right"><a href="member_regist_new.html">→会員登録をしていない方</a></p>
                        </div>
                </div>
                <!-- amazon payments アプリがインストールされていない時の表示 -->
                <div class="buttonarea" m:id='common.IF_APP_INSTALLED' m:app_cd='AMAZON_PAYMENTS' m:NOT="">
                        <input type="submit" value="ログイン" class="button positive medium" />
                </div>
                <!-- / amazon payments アプリがインストールされていない時の表示 -->

                <!-- amazon payments アプリがインストールされていた時の表示 -->
                <div class="buttonarea" m:id='common.IF_APP_INSTALLED' m:app_cd='AMAZON_PAYMENTS'>
                        <input aps:if="apsIsAmazon" type="submit" value="サイトにログイン" class="button positive medium" />
                        <input aps:if="apsIsAmazon" m:NOT="" type="submit" value="ログイン" class="button positive medium" />
                </div>
                <!-- / amazon payments アプリがインストールされていた時の表示 -->
        </div>
        <div social_plus:if="IS_SOCIAL_PLUS_VIA_LOGIN" m:NOT="">
                <div class="social_provider box">
                        <h3>他サイトのアカウントでログイン/新規会員登録</h3>
                        <!-- social plus error -->
                        <div id="social_plus_error" m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS'>
                                <div social_plus:write="SOCIAL_PLUS_ERROR_MSG_DISP_SCRIPT" m:HTML="">
                                        <!-- メッセージ用スクリプト排出エリア -->
                                </div>
                                <div id="social_plus_error_tbl">
                                        <table summary="メッセージ">
                                                <tr>
                                                        <td class="ico"><img src="images/icon_error.png" /></td>
                                                        <td class="content"><span id="social_plus_error_msg">ここにエラーメッセージが表示されます</span></td>
                                                </tr>
                                        </table>
                                </div>
                        </div>
                        <!-- / social plus error -->
                        <ul>
                                <li class="facebook"><a href="#" social_plus:attr="SOCIAL_PLUS_FACEBOOK_LOGIN_TAG"><span>facebook</span></a></li>
                                <li class="X"><a href="#" social_plus:attr="SOCIAL_PLUS_TWITTER_LOGIN_TAG"><span>X</span></a></li>
                                <li class="google"><a href="#" social_plus:attr="SOCIAL_PLUS_GPLUS_LOGIN_TAG"><span>google</span></a></li>
                                <li class="yahoo"><a href="#" social_plus:attr="SOCIAL_PLUS_YAHOO_LOGIN_TAG"><span>yahoo!</span></a></li>
                                <li class="line"><a href="#" social_plus:attr="SOCIAL_PLUS_LINE_LOGIN_TAG"><span>LINE</span></a></li>
                                <li social_plus:if="IS_SOCIAL_PLUS_APPLE_USABLE"><a href="#" social_plus:attr="SOCIAL_PLUS_APPLE_LOGIN_TAG"><img src="images/social_short_appleid.png" alt="Apple IDにサインイン" width="220px" /></a></li>
                        </ul>
                </div>
        </div>
</div>
<!-- / social_plus アプリがインストールされていた時の表示 -->

画面イメージ（view/userwebの場合）

会員マイページトップページ（member_mypage.xhtml）

1.<html>タグ内に以下を定義（記述）します。
・「xmlns:social_plus_c="eb:SOCIAL_PLUS/view_common.json"」
・「xmlns:social_plus_m="eb:SOCIAL_PLUS/view_member_mypage.json"」
・「xmlns:social_plus2="eb:SOCIAL_PLUS/view_member_auth_provider.json"」

2.以下を<head>タグ内に記述します。

3.以下をメインコンテンツ内に記述します。

サンプル

<!-- social plus error -->
<div id="social_plus_error" m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS'>
	<div id="social_plus_error_tbl">
		<table summary="メッセージ">
			<tr>
				<td class="ico"><img src="images/icon_error.png" /></td>
				<td class="content"><span id="social_plus_error_msg">ここにエラーメッセージが表示されます</span></td>
			</tr>
		</table>
	</div>
</div>
<!-- / social plus error -->

～中略～

<!-- social_plus -->
<div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' id="social_plus">
        <div social_plus_m:write="SOCIAL_PLUS_PROVIDER_DEL_SCRIPT" m:HTML="">
                <!-- 解除用スクリプト排出エリア -->
        </div>
        <div social_plus_c:write="SOCIAL_PLUS_ERROR_MSG_DISP_SCRIPT" m:HTML="">
                <!-- エラー表示スクリプト排出エリア -->
        </div>
        <h3>他サイトのアカウントと連携する</h3>
        <div social_plus_m:if="IS_SOCIAL_PLUS_MEMBER">
                <form social_plus_m:attr="SOCIAL_PLUS_PROVIDER_FORM_TAG">
                        <input type="hidden" name="key" value="" />
                        <table>
                                <tr class="title">
                                        <th class="service">サービス名</th>
                                        <th>連携状況</th>
                                </tr>
                                <tr>
                                        <th class="facebook">
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_FACEBOOK_ASSOCIATION" m:NOT="" class="on"><p>Facebook ID</p></div>
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_FACEBOOK_ASSOCIATION" class="off"><p>連携済み</p></div>
                                        </th>
                                        <td>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_FACEBOOK_ASSOCIATION" m:NOT=""><a href="" social_plus_m:attr="SOCIAL_PLUS_FACEBOOK_PROVIDER_ADD_TAG">連携する</a></span>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_FACEBOOK_ASSOCIATION"><a href="" social_plus_m:attr="SOCIAL_PLUS_FACEBOOK_PROVIDER_DEL_TAG" m:HTML="">連携を解除する</a></span>
                                        </td>
                                </tr>
                                <tr>
                                        <th class="X">
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_TWITTER_ASSOCIATION" m:NOT="" class="on"><p>X ID</p></div>
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_TWITTER_ASSOCIATION" class="off"><p>連携済み</p></div>
                                        </th>
                                        <td>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_TWITTER_ASSOCIATION" m:NOT=""><a href="" social_plus_m:attr="SOCIAL_PLUS_TWITTER_PROVIDER_ADD_TAG">連携する</a></span>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_TWITTER_ASSOCIATION"><a href="" social_plus_m:attr="SOCIAL_PLUS_TWITTER_PROVIDER_DEL_TAG" m:HTML="">連携を解除する</a></span>
                                        </td>
                                </tr>
                                <tr>
                                        <th class="google">
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_GPLUS_ASSOCIATION" m:NOT="" class="on"><p>google ID</p></div>
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_GPLUS_ASSOCIATION" class="off"><p>連携済み</p></div>
                                        </th>
                                        <td>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_GPLUS_ASSOCIATION" m:NOT=""><a href="" social_plus_m:attr="SOCIAL_PLUS_GPLUS_PROVIDER_ADD_TAG">連携する</a></span>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_GPLUS_ASSOCIATION"><a href="" social_plus_m:attr="SOCIAL_PLUS_GPLUS_PROVIDER_DEL_TAG" m:HTML="">連携を解除する</a></span>
                                        </td>
                                </tr>
                                <tr>
                                        <th class="yahoo">
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_YAHOO_ASSOCIATION" m:NOT="" class="on"><p>Yahoo! JAPAN ID</p></div>
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_YAHOO_ASSOCIATION" class="off"><p>連携済み</p></div>
                                        </th>
                                        <td>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_YAHOO_ASSOCIATION" m:NOT=""><a href="" social_plus_m:attr="SOCIAL_PLUS_YAHOO_PROVIDER_ADD_TAG">連携する</a></span>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_YAHOO_ASSOCIATION"><a href="" social_plus_m:attr="SOCIAL_PLUS_YAHOO_PROVIDER_DEL_TAG" m:HTML="">連携を解除する</a></span>
                                        </td>
                                </tr>
                                <tr>
                                        <th class="line">
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_LINE_ASSOCIATION" m:NOT="" class="on"><p>LINE</p></div>
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_LINE_ASSOCIATION" class="off"><p>連携済み</p></div>
                                        </th>
                                        <td>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_LINE_ASSOCIATION" m:NOT=""><a href="" social_plus_m:attr="SOCIAL_PLUS_LINE_PROVIDER_ADD_TAG">連携する</a></span>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_LINE_ASSOCIATION"><a href="" social_plus_m:attr="SOCIAL_PLUS_LINE_PROVIDER_DEL_TAG" m:HTML="">連携を解除する</a></span>
                                        </td>
                                </tr>
                                <tr social_plus_c:if="IS_SOCIAL_PLUS_APPLE_USABLE">
                                        <th class="appleid custom">
                                                <div social_plus_m:if="IS_SOCIAL_PLUS_APPLE_ASSOCIATION" m:NOT="" class="on"><p>Apple ID</p></div>
                                        </th>
                                        <td>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_APPLE_ASSOCIATION" m:NOT=""><a href="" social_plus_m:attr="SOCIAL_PLUS_APPLE_PROVIDER_ADD_TAG">連携する</a></span>
                                                <span social_plus_m:if="IS_SOCIAL_PLUS_APPLE_ASSOCIATION"><a href="" social_plus_m:attr="SOCIAL_PLUS_APPLE_PROVIDER_DEL_TAG" m:HTML="">連携を解除する</a></span>
                                        </td>
                                </tr>
                        </table>                        
                </form>
        </div>
                
        <div social_plus_m:if="IS_SOCIAL_PLUS_MEMBER" m:NOT="">
                <table>
                        <tr class="title">
                                <th class="service">サービス名</th>
                                <th>連携状況</th>
                        </tr>
                        <tr>
                                <th class="facebook"><a href="" social_plus_c:attr="SOCIAL_PLUS_FACEBOOK_LOGIN_TAG"><div class="on>"><p>facebook</p></div></a></th>
                                <td><a href="" social_plus_c:attr="SOCIAL_PLUS_FACEBOOK_LOGIN_TAG">追加する</a></td>
                        </tr>
                        <tr>
                                <th class="X"><a href="" social_plus_c:attr="SOCIAL_PLUS_TWITTER_LOGIN_TAG"><div class="on>"><p>X</p></div></a></th>
                                <td><a href="" social_plus_c:attr="SOCIAL_PLUS_TWITTER_LOGIN_TAG">追加する</a></td>
                        </tr>
                        <tr>
                                <th class="google"><a href="" social_plus_c:attr="SOCIAL_PLUS_GPLUS_LOGIN_TAG"><div class="on>"><p>google</p></div></a></th>
                                <td><a href="" social_plus_c:attr="SOCIAL_PLUS_GPLUS_LOGIN_TAG">追加する</a></td>
                        </tr>
                        <tr>
                                <th class="yahoo"><a href="" social_plus_c:attr="SOCIAL_PLUS_YAHOO_LOGIN_TAG"><div class="on>"><p>Yahoo! JAPAN ID</p></div></a></th>
                                <td><a href="" social_plus_c:attr="SOCIAL_PLUS_YAHOO_LOGIN_TAG">追加する</a></td>
                        </tr>
                        <tr>
                                <th class="line"><a href="" social_plus_c:attr="SOCIAL_PLUS_LINE_LOGIN_TAG"><div class="on>"><p>LINE</p></div></a></th>
                                <td><a href="" social_plus_c:attr="SOCIAL_PLUS_LINE_LOGIN_TAG">追加する</a></td>
                        </tr>
                        <tr social_plus_c:if="IS_SOCIAL_PLUS_APPLE_USABLE">
                                <th class="custom"><a href="" social_plus_c:attr="SOCIAL_PLUS_APPLE_LOGIN_TAG"><div class="on>"><img src="images/social_long_appleid.png" alt="Apple IDにサインイン" /></div></a></th>
                                <td><a href="" social_plus_c:attr="SOCIAL_PLUS_APPLE_LOGIN_TAG">追加する</a></td>
                        </tr>
                </table>
        </div>
</div>
<!-- / social_plus -->

画面イメージ（view/userwebの場合）

会員登録入力ページ（member_input.xhtml）

1.<html>タグ内に以下を定義（記述）します。
・「xmlns:social_plus_m="eb:SOCIAL_PLUS/view_member_input.json"」
・「xmlns:social_plus_c="eb:SOCIAL_PLUS/view_common.json"」

2.以下を<form m:id='FORM_TAG'>内に記述します。

サンプル

<!-- social_plus -->
<div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS'>
        <input type="hidden" social_plus_m:attr="SOCIAL_PLUS_ID_HIDDEN_TAG"></input>
        <input type="hidden" social_plus_m:attr="SOCIAL_PLUS_PROVIDER_HIDDEN_TAG"></input>
        <p social_plus_c:if="IS_SOCIAL_PLUS_VIA_LOGIN">
                <a href="#" social_plus_m:attr="SOCIAL_PLUS_ALREADY_ACCOUNT_TAG">→すでにアカウントをお持ちの方はこちら</a>
        </p>
</div>
<!-- / social_plus -->

3.以下を<div m:id='IF_MAIL_VALIDATED'>で囲みます。

サンプル

<div m:id='IF_MAIL_VALIDATED'>
        <!-- social_plus -->
        <div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS'>
                <div social_plus_m:if="IS_TRANS_FROM_SOCIAL_PLUS" m:NOT="">
                        <span m:id='PC_MAIL_HERE'>sample@example.jp</span>
                </div>
                <div social_plus_m:if="IS_TRANS_FROM_SOCIAL_PLUS">
                        <input name="PC_MAIL" type="text" size="50" value="" m:id='PC_MAIL_INPUT_HERE' />
                        <!--<span class="hissu">PCメールアドレスか携帯メールアドレスのどちらかが必須です。</span><br />-->
                        例：sample@example.jp （半角英数字で入力してください。）<br /><br />
                        
                        <input name="PC_MAIL_CONFIRM1" type="text" size="23" value="" m:id='PC_MAIL_CONFIRM1_INPUT_HERE' />@
                        <input name="PC_MAIL_CONFIRM2" type="text" size="25" value="" m:id='PC_MAIL_CONFIRM2_INPUT_HERE' />
                        ※確認のためメールアドレスを再入力してください。
                </div>
        </div>
        <!-- / social_plus -->
        <div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' m:NOT="">
                <span m:id='PC_MAIL_HERE'>sample@example.jp</span>
        </div>
</div>

4.以下をメインコンテンツ内に記述します。

サンプル

<!-- social_plus アプリがインストールされていた時の表示 -->
<div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' id="memberInput">
        <div m:id='common.IF_NOT_MEMBER_LOGIN' class="social_provider">
                <!-- / amazon payments アプリがインストールされていた時の表示 -->

                <div class="social_provider box">
                        <h3>他サイトのアカウントでログイン/新規会員登録</h3>
                        <!-- social plus error -->
                        <div social_plus_c:write="SOCIAL_PLUS_ERROR_MSG_DISP_SCRIPT" m:HTML="">
                        <!-- エラー表示スクリプト排出エリア -->
                        </div>
                        <!-- / social plus error -->
                        <ul>
                                <li class="facebook"><a href="#" social_plus_c:attr="SOCIAL_PLUS_FACEBOOK_LOGIN_TAG"><span>facebook</span></a></li>
                                <li class="X"><a href="#" social_plus_c:attr="SOCIAL_PLUS_TWITTER_LOGIN_TAG"><span>X</span></a></li>
                                <li class="google"><a href="#" social_plus_c:attr="SOCIAL_PLUS_GPLUS_LOGIN_TAG"><span>google</span></a></li>
                                <li class="yahoo"><a href="#" social_plus_c:attr="SOCIAL_PLUS_YAHOO_LOGIN_TAG"><span>yahoo!</span></a></li>
                                <li class="line"><a href="#" social_plus_c:attr="SOCIAL_PLUS_LINE_LOGIN_TAG"><span>LINE</span></a></li>
                                <li class="custom" social_plus_c:if="IS_SOCIAL_PLUS_APPLE_USABLE"><a href="#" social_plus_c:attr="SOCIAL_PLUS_APPLE_LOGIN_TAG"><img src="images/social_long_appleid.png" alt="Apple IDにサインイン" /></a></li>
                        </ul>        
                </div>
        </div>
</div>
<!-- / social_plus アプリがインストールされていた時の表示 -->

画面イメージ（view/userwebの場合）

STEP 6. デモ環境：動作確認【店舗様】

各ページで組み込んだ内容が正しく表示され、利用するプロバイダと連携しているかを確認してください。

STEP 7. 本番環境：記述要素（m:idやviewaddon）の組み込み【店舗様】

STEP5でデモ環境に組み込んだ記述要素（m:idやviewaddon）を、本番環境にも組み込んでください。

STEP 8. 本番環境：動作確認【店舗様】

各ページで組み込んだ内容が正しく表示され、利用するプロバイダと連携しているかを確認してください。

ソーシャルPLUS連携 | サポートサイト