WooCommerce ソーシャルログインプラグイン - YITH WooCommerce Social Login

コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ワードプレスウコマースサイトでは、Facebook、Twitterは、グーグルなどのSNSアカウントにログインできるように連動する場合ウコマース、ソーシャルログインプラグインを使用することができます。 ウコマースに使用できる無料のプラグインとしてYITH WooCommerce Social Login、 Social Login Lite For WooCommerce などがあります。

YITHプラグインには、無料版とプレミアム版があります。 ソーシャルアイコンの変更などの追加機能が必要ない場合は、無料版でも十分と思われる。 ここでは、無料版を使用して、Facebook連動方法について簡単に説明します。

数年前に、Facebookのアカウントでログインするように連動する方法について扱ったことがあったが、インターフェースが少し変わったようです。 フェイスブックのソーシャルログイン連動を有効にするには、サイトで利用できるセキュリティサーバSSL証明書がインストールされている必要があります。

ネイバー、ダウム、カカオアカウントなどでログインするように連動する場合恵みの雨ストアのOne Stop Social Loginのようなプラグインがあったが、今は販売中止されたようで、代わりに アルティメットメンバーコリアこの機能が提供されているようです。

ウコマース、ソーシャルログインプラグイン - YITH WooCommerce Social Login

ウコマース、ソーシャルログインプラグイン -  YITH WooCommerce Social Login無料版

YITH WooCommerce Social Loginプラグインを使用すると、フェイスブック、ツイッター、グーグルアカウントにワードプレスのサイトにログインしたり、会員登録することができます。

このプラグインは、無料版と有料版があり、無料版では、次のような機能を提供しています。

  • Facebookでログイン
  • ツイッターでログイン
  • グーグルでログイン
  • 「Login with "フレーズカスタマイズ可能
  • チェックアウトページでのテキストのカスタマイズが可能

プラグインをインストールするには、管理者ページで プラグイン]> [新規追加をクリックして、「YITH WooCommerce Social Login」を検索してインストールして有効にします。

WordPressのプラグインのインストール

プラグインをインストールして有効にして左側のメニューから YITH> Social Loginをクリックして設定ページに移動して設定することができます。

呉コマースでは、Facebookのログイン連動する

フェイスブックのアカウントでログイン/会員登録ができるように連動する方法について簡単に説明します。

フェイスブックのログインを有効にするには、Facebook App IDとFacebook Secret情報が必要です。

ウコマース、ソーシャルログイン - フェイスブック連動

この情報を得るためには、Facebookの開発者サイト(https://developers.facebook.com/apps)を訪問して、新しいアプリを作成します。

Facebook for Developersサイトにアクセスすると、生成されたアプリの一覧が表示されます。 新しいアプリを追加(Add a New App)をクリックします。

フェイスブックの開発者サイト - アプリ作成

新しいアプリIDの作成(Create a New App ID) ポップアップウィンドウが表示さ 表示名(Display Name)連絡先メールアドレス(Contact Email)を入力して アプリIDの作成(Create App ID)をクリックします。

フェイスブックアプリIDの作成 - ソーシャルログイン連動

製品の追加(Select a Product) ページで Facebookログイン(Facebook Login)設定(Set Up) ボタンをクリックします。

Facebookログインアプリを作る - フェイスブックログイン連動

ウェブ(Web) オプションを選択します。

ウコマースFacebookのログイン連動

サイトのURL(Site URL)を入力して 保存をクリックします。

ワードプレスFacebookのログイン連動設定 - フェイスブックアプリを作る

残りの2(JavaScript用Facebook SDKの設定)、3(ログイン状態を確認)、4(Facebookログインボタンを追加)、5(次のステップ)のオプションは、スキップするようにします。 アプリのレビューは、要求しないようにします。

ここまで進行したら、重要な設定さえあれば、ほぼ完了します。 ワードプレスの管理ページ> YITH> Social Login> Facebook SettingsCallback URLをコピーします。

YITH場合コマース、ソーシャルログインフェイスブックの設定

コピーしたコールバックURLを、Facebookの 製品> Facebookログイン>設定 セクションの "有効なOAuthリダイレクトURI(Valid OAuth redirect URIs)"フィールドに貼り付けます。

ワードプレスFacebookのログイン登録連動

設定>基本設定をクリックすると、 アプリIDアプリシークレットコードを確認することができます。 このIDとコードをYITH Social Loginプラグインのフェイスブックの設定]セクションに入力するようにします。

ウコマースFacebookのログイン登録連動

名前空間、アプリドメイン、個人情報の処理方針URL、サービス利用規約のURLを入力して、上部の「開発中」ボタンをクリックすると、「ライブ済み」に変わります。

今、Facebookのアカウントでログインしようとすると、通常のログインになります。 もし "URLを読み込むことができません:アプリドメインに含まれていないURLです」エラーメッセージが表示される場合、上記の図では、アプリドメインにドメインを入力してみてください。

ソーシャルログインアイコンとフレーズが気に入らず表示されている場合は、単純なCSSを使用して調整することができます。

ウコマースマイアカウントページにFacebookのログインアイコンを追加

無料版だけで満足していない場合は、プレミアムバージョンを考慮してみることができますが、価格のために、あえて有料版を利用する必要はないようです。 無料版とプレミアム版の機能の詳細については、プラグインのページを参照してみてください。

参考



コメントを残す

コメント