ソーシャル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'>内に記述します。


画面イメージ(view/userwebの場合)



ログイン専用ページ(login.xhtml)

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


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


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


画面イメージ(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.以下をメインコンテンツ内に記述します。


画面イメージ(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'>内に記述します。


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


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


画面イメージ(view/userwebの場合)



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

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



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

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



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

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