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

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

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

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

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

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

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

YITH WooCommerce Social Loginプラグインを使用すると、 Facebook, Twitterは、Googleアカウントに WordPress サイトにログインしたり、会員登録することができます。

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

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

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

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

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

WooCommerceから Facebook ログイン連動する

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

Facebook ログインを有効にするには、Facebook App IDとFacebook Secret情報が必要です。

WooCommerce ソーシャルログイン -  Facebook 連動

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

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

Facebook 開発者サイト - アプリ作成

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

Facebook アプリIDの作成 - ソーシャルログイン連動

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

Facebookログインアプリを作る -  Facebook ログイン連動

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

WooCommerce Facebook ログイン連動

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

WordPress Facebook ログイン連動設定 -  Facebook アプリ作成

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

ここまで進行したら、重要な設定さえあれば、ほぼ完了します。 WordPress 管理者ページ> YITH> Social Login> Facebook Settingsから コールバックURLをコピーします。

YITH WooCommerce ソーシャルログイン Facebook 設定

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

WordPress Facebook ログイン会員登録連動

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

WooCommerce Facebook ログイン会員登録連動

名前空間、アプリドメイン、プライバシーポリシーURL、利用規約URLを入力し、上部の「開発中」ボタンをクリックすると「ライブ済み」に変わります。

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

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

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

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

参照


2のコメント

  1. WooCommerceから Naver、カカオログイン機能を追加するには韓国型有料プラグインを購入する方法しかないのですか?

    1. 自分でコーディングして作成したり、そのような機能を提供するプラグインがあれば、プラグインを利用するのが簡単に行く道だと思います。 自分でコードを作成したい場合は、次の記事を参照してください。 一般的な投稿(記事)にSNS共有ボタンを追加する方法を説明していますが、 WooCommerceでも適用可能です。

      https://www.thewordcracker.com/intermediate/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EA%B3%A0-%EC%86%8C%EC%85%9C-%EA%B3%B5%EC%9C%A0-%EB%B2%84%ED%8A%BC-%EC%B6%94%EA%B0%80/

コメントを残す

*メールアドレスは公開されません。