WordPressにソーシャルログインを追加する方法（簡単な方法）

WordPressウェブサイトにソーシャルログインを追加すると、訪問者のサインアッププロセスが簡単になります。これにより、ユーザーは既存のソーシャルメディアプロフィールを使用してアカウントを作成できます。

そのため、新しいユーザー名とパスワードを設定する代わりに、FacebookやGoogleなどのプラットフォームでログインできます。

これにより、訪問者の時間と手間が省けます。さらに、許可を得れば、名前とメールアドレスにアクセスできます。

これは、訪問者に継続的にリーチし、ウェブサイトに戻ってもらうためのメールリストを構築するのに最適な方法です。

この設定の最善の方法について、しばらく調査しました。この記事では、WordPressにソーシャルログインを追加する方法を説明します。

WordPressにソーシャルログインを追加する理由

WordPressウェブサイトでユーザー登録を許可したい理由はたくさんあります。

オンラインストアを運営している場合、ユーザー登録により、買い物客は支払い情報と配送情報を保存できます。これにより、将来的に購入しやすくなります。

ユーザー登録は、WordPress会員サイトを作成する上でも重要な部分です。これにより、限定コンテンツにアクセスできる、エンゲージメントの高いユーザーコミュニティを構築できます。

しかし、ほとんどの人は長いユーザー登録フォームに記入したり、さらに別のユーザー名とパスワードの組み合わせを覚えたりすることを好みません。

ソーシャルログインを使用すると、訪問者はワンクリックであなたのウェブサイトのアカウントを作成できます。Facebookログイン情報など、既存のソーシャルメディアアカウントのユーザー名とパスワードを使用できます。

非常に便利なので、ソーシャルログインはより多くの人があなたのウェブサイトに登録することを奨励できます。それを念頭に置いて、WordPressにソーシャルログインを追加する方法を見てみましょう。

• How to Add Social Login to WordPress
  • ステップ1：Nextend Social Loginのインストールと有効化
  • ステップ2：Facebook開発者アプリの作成
  • ステップ3：ウェブサイトとFacebookアプリの接続
  • ステップ4：アプリポリシーと詳細の設定
  • ステップ5：公開してアプリの権限を確認
  • ステップ6：アプリIDとシークレットをWordPressに追加
  • ステップ7：ソーシャルログインボタンのカスタマイズ
  • ステップ8：サイトにソーシャルログインボタンを表示
• 動画チュートリアル
• ソーシャルログインに関するよくある質問

WordPressにソーシャルログインを追加する方法

WordPressウェブサイトにフロントエンドログインを追加する最も簡単な方法は、Nextend Social Login and Registerプラグインを使用することです。

この無料プラグインを使用すると、訪問者はFacebook、Twitter、またはGoogleを使用してログインできます。

ステップ1：Nextend Social Loginのインストールと有効化

まず、Nextendプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドを参照してください。

有効化したら、WordPress管理画面から 設定 » Nextend Social Login に移動してください。この画面には、WordPressサイトに追加できるさまざまなソーシャルログインオプションが表示されます。

サイトにソーシャルログインを追加するプロセスは、Facebook、Twitter、またはGoogleログインを追加するかどうかによって異なります。

例として、Facebookを見てみましょう。

WordPressウェブサイトにFacebookログインを追加するには、「Facebook」ロゴの下にある「開始する」ボタンをクリックしましょう。

この時点で、Facebookから警告が表示される場合があります。これは、Facebookが正常に機能するためにセキュアな接続を必要とするためであり、これは標準的なセキュリティ要件です。

これは、WordPressにFacebookログインを追加する前に、サイトがHTTPSを使用している必要があることを意味します。設定するには、WordPressでHTTPからHTTPSに切り替える方法に関するガイドを参照してください。

ステップ2：Facebook開発者アプリの作成

HTTPSを使用するようになったら、次のタスクはFacebookアプリを作成することです。これにより、Nextendプラグインに追加するApp KeyとApp Secretを作成できます。

「Facebookアプリ」の作成は技術的に聞こえるかもしれませんが、心配しないでください。これはモバイルアプリを構築することを意味するものではありません。これは、Facebookにウェブサイトを登録するためのプロセスにすぎず、それによって彼らのログインシステムをサイトに安全に接続できます。

コードを知る必要はありません。すべての手順を説明します。

このアプリを作成するには、WordPressダッシュボードとMeta for Developersウェブサイトを切り替える必要があります。これを念頭に置いて、現在のタブでWordPressダッシュボードを開いたまま、新しいタブでMeta for Developersにアクセスすることをお勧めします。

Meta for Developersタブで、「アプリを作成」ボタンをクリックするだけです。

次にセットアッププロセスに移動します。

まず、新しいアプリに接続したいビジネスポートフォリオを選択する必要があります。「まだビジネスポートフォリオを接続したくありません」がデフォルト設定で有効になっています。このままにして「次へ」をクリックできます。

「ユースケース」の段階で、アプリに何を実行させたいかを選択します。

WordPressにソーシャルログインを追加したいので、「Facebookログインでユーザーを認証し、データをリクエストする」オプションを選択してください。

その後、「次へ」ボタンをクリックします。

次に、「表示名」フィールドに、Facebookアプリに使用したい名前を入力しましょう。この名前は訪問者に表示されるため、WordPressウェブサイトのタイトルなど、認識しやすいものを使用することをお勧めします。

アプリに名前を付けた後、「アプリ連絡先メールアドレス」フィールドにメールアドレスを入力できます。これは、Facebookがポリシー違反の可能性やアプリの制限について警告したり、削除されたアカウントを復元する方法に関する情報を共有したりするために使用するアドレスです。

これを踏まえて、定期的に確認するメールアドレスを入力してください。「次へ」をクリックして続行します。

次に確認ページが表示されます。このページで、Meta for Developersは新しいアプリに設定したすべての設定を表示します。

すべて問題なければ、「アプリを作成」ボタンをクリックしてください。

「ダッシュボードに移動」ボタンが表示された通知ポップアップが表示されるはずです。

それをクリックしましょう。

ステップ3：ウェブサイトとFacebookアプリの接続

これで、Facebookアプリに製品を追加する準備ができました。

ここから、「Facebookログインボタンのカスタマイズ」をクリックできます。

次に、「Facebookログイン」メニューから「クイックスタート」に移動します。

ここから、「Web」オプションを選択できます。

これでカスタマイズセクションが開きます。

「サイトURL」フィールドに、ウェブサイトのURLを入力してください。

正しいURLであることを確認してください。わずかな入力ミスでも接続が失敗し、「無効なリダイレクトURL」のようなエラーメッセージが表示される可能性が高いです。

これを行うには、WordPressダッシュボードが表示されているタブに切り替えるだけです。この画面には、NextendとFacebookをリンクする方法に関する詳細な手順が表示されており、使用すべき正確なURLも含まれています。

サイトのURLを「サイトURL」フィールドに入力したら、「保存」ボタンをクリックして変更を保存してください。

次に、「設定」セクションに移動しましょう。

この画面では、有効なoAuthリダイレクトを貼り付ける必要があります。この値を取得するには、WordPressタブに戻ってください。

これらの手順には、「有効なOAuthリダイレクトURI」というラベルのURLが含まれています。このURLをコピーできます。

次に、Meta for Developersのウェブサイトに戻り、URLを「確認するリダイレクトURI」フィールドに貼り付けましょう。

その後、一番下にある「変更を保存」ボタンをクリックする準備ができました。

ステップ4：アプリポリシーと詳細の設定

完了したら、左側のメニューで 設定 » 基本 に移動します。

「アプリドメイン」には、サイトのドメイン名を入力するだけです。

「プライバシーポリシーURL」フィールドには、ウェブサイトのプライバシーポリシーのアドレスを入力する必要があります。

このプライバシーポリシーには、訪問者から収集する情報と、ソーシャルログインから取得する情報を含む、そのデータの使用方法を開示する必要があります。

この重要なページを作成するのに助けが必要な場合は、WordPressにプライバシーポリシーを追加する方法に関するガイドを参照してください。

GDPRに準拠するためには、ウェブサイトでユーザーがアカウントを削除できるようにする必要があります。

WordPressアカウントを削除する方法はたくさんありますが、常にこれらの手順を訪問者と共有する必要があります。ユーザーがWordPressアカウントを削除できるようにする方法には多くの方法がありますが、常にこれらの手順を訪問者と共有する必要があります。

ユーザーがこの情報を見つけられるように、「ユーザーデータ削除」セクションをクリックし、ドロップダウンメニューから「データ削除手順URL」を選択してください。

次に、訪問者がアカウントを削除する方法を見つけられるURLを入力またはコピー＆ペーストできます。例えば、プライバシーポリシーやFAQページに手順を追加することができます。

それが完了したら、「カテゴリ」ドロップダウンメニューを開き、WordPressウェブサイトでソーシャルログインをどのように使用する予定かを最もよく表すカテゴリを選択します。

例えば、FacebookログインをWooCommerceストアに追加する場合、通常は「ショッピング」カテゴリをクリックします。

それが完了したら、次のステップはアプリアイコンを選択することです。このアイコンは、「アプリセンター」でアプリを表します。アプリセンターは、Facebookの新しいアプリケーションを見つけることができるエリアです。

これは私たちのアプリにとって特に重要ではありませんが、要件なので、アプリアイコンを作成する必要があります。

アプリアイコンは透明な背景を持ち、512 x 512ピクセルから1024 x 1024ピクセルの間である必要があります。このアイコンを作成する際、Facebookのロゴ、商標、またはアイコンのバリエーション（WhatsApp、Oculus、Instagramブランドを含む）を使用することはできません。

「Facebook」または「FB」というテキストを含めることもできません。

まだお持ちでない場合は、ロゴメーカーを使用して、プロフェッショナルな見た目のFacebookアプリアイコンを簡単に作成できます。

アプリアイコンを作成したら、「アプリアイコン」セクションをクリックして、使用したい画像ファイルを選択してください。

これらすべてを行った後、「変更を保存」ボタンをクリックできます。

ステップ5：公開してアプリの権限を確認

Facebookアプリはデフォルトでプライベートに設定されているため、Facebookを使用してログインできるのはあなただけです。

訪問者がFacebookを使用してアカウントを作成できるようになる前に、アプリを公開する必要があります。これを行うには、「アプリモード：開発」スライダーを見つけてクリックして公開します。

Facebookアプリケーションは、ユーザーの情報に対して「標準アクセス」または「高度なアクセス」を持つことができます。アプリが標準アクセスの場合、訪問者はFacebookのソーシャルログインを使用してログインできません。

過去にFacebookはデフォルトの権限設定を変更したため、アプリがソーシャルログインをサポートするために正しい権限を持っているか常に確認する価値があります。

左側のメニューで、「権限」セクションに移動しましょう。

次に、「email」と「public_profile」の権限を確認します。

ソーシャルログインをサポートするには、次の画像に示すように、これら2つの権限の両方を「高度なアクセス」および「使用準備完了」としてマークする必要があります。

代わりに「高度なアクセスを取得」ボタンが表示されますか？これは、現在、ソーシャルメディアにログインするための適切な権限がアプリにないことを意味します。

この場合、「高度なアクセスを取得」ボタンをクリックし、画面の指示に従う必要があります。

「高度なアクセス」権限が付与されたら、左側のメニューから アプリ設定 » 基本 に移動してください。

ページの上部には、「アプリID」と「アプリシークレット」が表示されます。

「アプリシークレット」を表示するには、「表示」ボタンをクリックするだけです。次に、Facebookアカウントのパスワードを入力できます。Meta for Developersウェブサイトが更新され、「アプリシークレット」が表示されます。

ステップ6：アプリIDとシークレットをWordPressに追加

次のステップは、「アプリシークレット」と「アプリID」をNextendプラグインに追加することです。これを行うには、WordPressダッシュボードに戻りましょう。

ここから、「設定」タブに移動し、WordPressダッシュボードの「アプリID」および「アプリシークレット」フィールドにIDとシークレットを貼り付けます。

それが完了したら、「変更を保存」ボタンをクリックしてください。

さらに進む前に、ソーシャルログインが正しく設定されているかテストすることをお勧めします。これを行うには、「設定の確認」ボタンをクリックするだけです。

これにより、Facebookのユーザー名とパスワードを入力できるポップアップが開きます。ソーシャルログインを正しく設定した場合、WordPressブログにログインできるはずです。

ソーシャルログインが機能していても、プロバイダーが無効になっているという警告がNextendから表示される場合があります。この警告が表示された場合は、「有効にする」ボタンをクリックするだけです。

おめでとうございます。難しい部分は完了し、WordPressウェブサイトにソーシャルログインを正常に追加しました！

ステップ7：ソーシャルログインボタンのカスタマイズ

さて、楽しい部分です。サイトでのログインボタンの外観と動作をカスタマイズしましょう。

ソーシャルログインボタンをスタイル設定するには、[Buttons]タブをクリックするだけです。すると、使用できるさまざまなスタイルが表示されます。

別のスタイルを使用するには、ラジオボタンをクリックして選択できます。

それが完了したら、このボタンの[Login label]テキストを編集して、Nextendが表示するテキストを変更できます。

ログインラベルに基本的なフォーマットを適用することもできます。たとえば、次の画像では、<b>と</b>のHTMLタグを使用して太字の効果を適用しています。

このボタンが[Link label]に使用するテキストを変更するオプションもあります。これは、訪問者があなたのウェブサイトにアカウントを作成したが、Facebookにそのアカウントをリンクしていない場合にNextendが表示するテキストです。

リンクラベルを使用して、ログイン中のユーザーにさまざまなソーシャルメディアプロフィールにアカウントを接続するように促すことができます。

このテキストを変更するには、[Link label]フィールドに入力するだけです。ここでも、HTMLを使用してラベルテキストに基本的なフォーマットを適用できます。

また、訪問者がソーシャルメディアプロフィールをWordPressウェブサイトから簡単に切断できるようにする必要があります。

ここで[Unlink label]フィールドが登場します。

このフィールドでは、サイトがすでにソーシャルアカウントをウェブサイトに接続しているログイン中のユーザーに表示するテキストを入力できます。

このリンクをクリックすると、ユーザーはWordPressウェブサイトとソーシャルメディアアカウント間の接続を切断できます。

これらの設定は、ほとんどのウェブサイトで十分です。

ただし、完全にカスタムボタンを作成したい場合は、[Use custom button]ボックスをチェックできます。これにより、コードを使用して独自のソーシャルログインボタンを作成できる新しいセクションが追加されます。

ボタンのスタイル設定に満足したら、[Save Changes]ボタンをクリックして進めることができます。

ステップ8：サイトにソーシャルログインボタンを表示

次に、[Usage]タブに切り替えます。

Nextendは、ソーシャルログインボタンをWordPressウェブサイトに追加するために使用できるすべてのショートコードを表示します。

これらのショートコードは、さまざまなログインボタンを作成できます。Facebookの基本的なログインボタンを作成するには、次のショートコードを使用します。

[nextend_social_login provider=”facebook”]

次の画像は、このソーシャルログインボタンがサイトにどのように表示されるかの例を示しています。

「使用法」タブでわかるように、ショートコードに追加できる追加のパラメータがいくつかあります。これにより、ボタンの外観や動作が変更されます。

テキストラベルのないソーシャルログインボタンを作成したい場合は、「icon」パラメータを追加できます。例：[nextend_social_login provider=”facebook” style=”icon”]

ここに、このボタンがWordPressサイトにどのように表示されるかの例を示します。

訪問者がソーシャルアカウントを使用してサイトにログインすると、自動的にページにリダイレクトできます。この画面には、ユーザーをNextendサイトにリダイレクトする例のショートコードがあります。

このショートコードを簡単にカスタマイズして、訪問者をWordPressサイトのページにリダイレクトできます。

ショートコードに他のいくつかのパラメータを追加できます。パラメータの完全なリストを表示するには、プラグインのドキュメントへのリンクをクリックしてください。

使用するショートコードを決定した後、コードを任意のページ、投稿、またはウィジェット対応領域に追加できます。ステップバイステップの手順については、WordPressでのショートコードの追加方法に関する初心者向けガイドをご覧ください。

動画チュートリアル

テキストでの説明よりもビデオでの説明がお好みですか？WordPressにソーシャルログインを追加する方法に関するビデオチュートリアルをご覧ください。

WPBeginnerを購読する

ソーシャルログインに関するよくある質問

WordPressサイトにソーシャルログインを追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

ユーザーがログインできるソーシャルネットワークを選択できますか？

はい、Nextend Social Login & Registerを含むほとんどのソーシャルログインプラグインでは、提供するネットワークを選択できます。

視聴者が好むGoogleやFacebookなどのものだけを有効にし、その他を非表示にすることができます。たとえば、プロフェッショナルな視聴者を対象とする場合はLinkedInを有効にするかもしれませんが、GoogleやFacebookは一般的なユーザーにより人気があります。

ソーシャルログインを設定するために開発者が必要ですか？

いいえ、コードを書かずに自分で設定できます。WordPressのほとんどのソーシャルログインプラグインは初心者向けで、詳細なドキュメントが用意されています。

一部のプラグインには、GoogleやFacebookなどのプラットフォームからアプリキーを作成するためのセットアップウィザードが組み込まれているものもあります。数ステップ追加で必要ですが、ほとんどはコピー＆ペーストで完了します。

ソーシャルログインを追加すると、私のウェブサイトは遅くなりますか？

コードが適切に記述されたプラグインを使用していれば、ソーシャルログインを追加してもウェブサイトが遅くなることはありません。

Nextend Social Login & Registerのような人気のツールはパフォーマンスが最適化されており、スクリプトは必要な場合にのみ読み込まれます。

それでも、インストール後にサイトの速度を監視することをお勧めします。遅延に気づいた場合は、パフォーマンスプラグインまたはキャッシュソリューションを使用してサイトを高速に保つことを検討してください。

ソーシャルログインは私のWordPressサイトにとって安全ですか？

はい、信頼できるプラグインを使用し、それらを最新の状態に保てば、ソーシャルログインは安全です。

ログインはGoogleやFacebookのような大手プラットフォームによって処理されるため、サイトはユーザーパスワードを保存または管理する必要がありません。

ただし、HTTPSを使用し、WordPressセキュリティのベストプラクティスに従って、すべてを安全に保つことをお勧めします。

WooCommerceまたはメンバーシップサイトでソーシャルログインを許可できますか？

もちろんです！ソーシャルログインは、WooCommerce、BuddyPress、MemberPress などと連携してうまく機能します。

お客様や会員が素早くログインできるようになり、カート放棄やサインアップの手間を軽減します。多くのソーシャルログインプラグインには、人気のプラグインとの統合機能が組み込まれているため、追加の設定は不要です。

ユーザーがソーシャルログインでログインした後、後でメールログインを使用した場合、どうなりますか？

ほとんどの場合、プラグインはアカウントを自動的にリンクします。

たとえば、ユーザーがメールアドレス「jane.doe@example.com」を使用してGoogleアカウントでサインアップし、その同じメールアドレスで既にWordPressユーザーアカウントを持っている場合、プラグインは一致を認識して両方をリンクします。

これにより、アカウントの重複を防ぎます。ただし、公開する前に、プラグインがどのように処理するかを正確に確認するために、この機能をテストすることをお勧めします。

この記事で、WordPressウェブサイトにソーシャルログインを追加する方法を学んでいただけたなら幸いです。また、WordPressのベストソーシャルメディアプラグインに関するガイドや、WordPressのログインおよび登録フォームにCAPTCHAを追加する方法のチュートリアルもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。