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

WordPressサイトにソーシャルログインを追加したいですか？

ソーシャルログインでは、訪問者が既存のソーシャルメディアアカウントを使用してWordPressサイトのアカウントを作成することができます。新規ユーザー名やパスワードを作成する代わりに、ユーザーはFacebook、Google、または他のプラットフォームでログインすることができます。これにより、ユーザーは時間を節約し、摩擦を減らし、将来のマーケティング目的のために彼らの名前/メール・アドレスにアクセスすることができます。

この投稿では、WordPressにソーシャルログインを追加する方法を紹介します。

なぜWordPressにソーシャルログインを追加するのか？

WordPressサイトでユーザー登録を許可したい理由はたくさんあります。オンラインストアを運営している場合、ユーザー登録によって買い物客は支払いや配送に関する情報を保存することができます。これにより、次回以降の購入が容易になります。

ユーザー登録もWordPressの会員制サイトを作る上で重要な要素です。

しかし、ほとんどの人は長いユーザー登録フォームに記入したり、また別のユーザー名やパスワードを覚えたりするのは好きではない。

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

ソーシャルログインはとても便利なので、より多くの人にサイトに登録してもらうことができます。それでは、WordPressにソーシャルログインを追加する方法を見てみましょう。

動画チュートリアル

Subscribe to WPBeginner

文章での説明がお望みなら、このまま読み進めてほしい。

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

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

この無料プラグインは、訪問者がFacebook、Twitter、Googleを使ってログインできるようにします。

注:Facebook、Twitter、Google以外のサイトのソーシャルログインを追加したいですか？PayPal、Slack、TikTokなど様々なサイトのソーシャルログインを追加できるNextendソーシャルログインプロバージョンもあります。

まず、Nextendプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化した後、WordPress管理エリアの設定 ” Nextend Social Loginにアクセスしてください。この画面では、WordPressサイトに追加できるさまざまなソーシャルログインオプションがすべて表示されます。

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

Facebookを例に見てみよう。

WordPressサイトにFacebookログインを追加するには、Facebookロゴの下にある「Getting Started」ボタンをクリックしてください。

この時点で、FacebookはHTTPS OAuthリダイレクトしか許可しないという警告が表示されるかもしれません。これは、WordPressにFacebookログインを追加する前に、サイトがHTTPSを使用している必要があることを意味します。設定するには、WordPressでHTTPからHTTPSに切り替える方法のガイドを参照してください。

HTTPを使ったら、次はFacebookアプリを作成します。これでアプリキーとアプリシークレットを作成し、Nextendプラグインに追加します。

Facebookアプリの作成は専門的に聞こえますが、ご心配なく。コードを知らなくても大丈夫です。すべての手順を説明します。

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

Facebook Developersタブで’Create App’ボタンをクリックするだけです。

アプリの種類を選ぶことができます。WordPressにソーシャルログインを追加したいので、先に進み、「Consumer」をクリックする。

その後、画面を一番下までスクロールし、「次へ」ボタンをクリックする。

表示名」フィールドに、Facebookアプリに使用する名前を入力します。この名前は訪問者に表示されるため、WordPressサイトの名前など、訪問者が認識できるものを使用したい。

次に、「App contact email」フィールドにメールアドレスを入力します。

このアドレスは、Facebookが潜在的なポリシー違反やアプリの制限について警告したり、削除されたアカウントを回復する方法についての情報を共有したりするために使用されます。このことを念頭に置いて、定期的にチェックするメールアドレスを入力することをお勧めします。

複数のFacebookページを持っている場合、Facebook Business Managerアカウントを作成しているかもしれません。これにより、ログイン情報を共有することなく、チームメンバーにFacebookページへのフルアクセスまたは部分的なアクセスを許可することができます。

Facebook Business Managerアカウントを作成している場合、「ビジネスアカウント」ドロップダウンを開くことで、新しいアプリをマネージャーアカウントに接続することができます。次に、ドロップダウンメニューからアカウントマネージャーを選択します。

Facebookビジネス・マネージャーをお持ちでない場合は、このドロップダウンを初期設定の「ビジネス・マネージャー・アカウントを選択しない」のままにしておくことができます。

その後、「アプリを作成」ボタンをクリックします。

表示されるポップアップで、Facebookアカウントのパスワードを入力し、「送信」ボタンをクリックします。

これでFacebookアプリに商品を追加する準備ができました。Facebookログインセクションを探し、「設定」ボタンをクリックしてください。

次に、『ウェブ』をクリックするだけだ。

サイトのURL」フィールドに、あなたのサイトのURLを入力します。

正しいURLを取得するには、WordPressダッシュボードを表示しているタブに戻るだけです。

この画面では、NextendをFacebookにリンクする方法が詳しく説明されています。正確なURLも表示されます。

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

左側のメニューで「Facebookログイン」のセクションを見つけ、「設定」をクリックする。

この画面で、正しいOAuthリダイレクトを貼り付ける必要があります。この値を取得するには、WordPressタブに戻ります。

これらの指示には、’Valid OAuth redirect URIs’と書かれたURLが含まれています。このURLをコピーしてください。

次に、Facebook開発者サイトに戻り、「Valid OAuth Redirect URIs」フィールドにURLを貼り付けます。

その後、一番下にある「変更を保存」ボタンをクリックすれば準備完了です。

左側のメニューで、「設定」 ” 「基本」をクリックします。

App domain」に、あなたのサイトのドメイン名を入力する。

プライバシーポリシーのURLフィールドには、あなたのサイトのプライバシーポリシーのアドレスを入力する必要があります。このプライバシーポリシーでは、ソーシャルログインから得た情報を含め、訪問者から収集した情報とそのデータの使用方法を開示する必要があります。

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

GDPRを遵守するためには、ユーザーに対してサイト上でアカウントを削除する方法を提供する必要があります。

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

ユーザーがこの情報を見つけやすいように、「ユーザーデータ削除」セクションをクリックし、ドロップダウンメニューから「データ削除指示URL」を選択します。

その後、訪問者が自分のアカウントを削除する方法についての情報を見つけることができるURLを入力するか、コピー＆ペーストすることができます。例えば、プライバシーポリシーやFAQのページに削除方法を追加することができます。

カテゴリー」ドロップダウンメニューを開き、WordPressサイトでソーシャルログインをどのように使用するかを表すカテゴリーを選択します。

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

それができたら、次のステップはアプリのアイコンを選ぶことです。このアイコンは、ユーザーが新しいアプリケーションを見つけることができるFacebookのエリアであるApp Centerで、あなたのアプリケーションを表します。

私たちのアプリでは特に必要ありませんが、必須ですので、アプリアイコンを作成する必要があります。

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

また、「Facebook」や「FB」のテキストを含めることもできません。

すでにロゴをお持ちでない場合は、ロゴメーカーを使って簡単にプロフェッショナルなFacebookアプリのアイコンを作成することができます。

アプリアイコンを作成したら、「App Icon」セクションをクリックし、使用する画像ファイルを選択します。

すべて終わったら、「変更を保存」ボタンをクリックする。

Facebookアプリは初期設定でプライベートに設定されています。つまり、Facebookを使ってログインできるのはあなただけです。

訪問者がFacebookを使ってアカウントを作成する前に、アプリを公開する必要があります。これを行うには、’App Mode：開発者’スライダーを見つけてクリックし、スライダーを白から青に変えてください。

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

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

左側のメニューで、App Review ” Permissions and Featuresをクリックします。

次に、’メール’と’public_profile’権限を見つける。

ソーシャルログインをサポートするには、以下の画像にあるように、これらの権限を両方とも「Advanced Access」と「Ready to Use」にマークする必要があります。

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

この場合は、先に進んで「高度なアクセスを取得」ボタンをクリックし、画面の指示に従ってください。

高度なアクセス権限を取得したら、左メニューの「設定 ” 基本」をクリックします。

ページの上部に「App ID」と「App secret」が表示されます。

アプリの秘密を明らかにするには、「表示」ボタンをクリックし、Facebookアカウントのパスワードを入力するだけです。

Facebook Developersサイトが更新され、あなたのアプリの秘密が表示されます。

次のステップは、NextendプラグインにApp secretとApp IDを追加することです。これを行うには、WordPressダッシュボードに戻ります。

ここで「設定」タブをクリックします。WordPressダッシュボードの’App ID’と’App secret’フィールドにIDとsecretを貼り付けることができます。

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

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

Facebookのユーザー名とパスワードを入力するポップアップが開きます。ソーシャルログインが正しく設定されていれば、WordPressブログにログイン中です。

ソーシャルログインが機能していても、プロバイダーが無効化されている旨の警告が表示されることがあります。この警告が表示されたら、有効化ボタンをクリックしてください。

これでWordPressサイトにソーシャルログインを追加することができました。次のステップは、ログインボタンのサイト上での表示と動作を変更することです。

ソーシャルログインボタンのスタイルを設定するには、「ボタン」タブをクリックしてください。ソーシャルログインボタンに使用できるすべてのスタイルが表示されます。

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

ログインラベル」を編集して、Nextendがこのボタンに表示するテキストを変更できます。

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

オプションとして、このボタンが「リンクラベル」に使用するテキストを変更する設定もあります。これは、訪問者があなたのサイトでアカウントを作成したが、そのアカウントをFacebookにリンクしていない場合にNextendが表示するテキストです。

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

このテキストを変更するには、「リンクラベル」フィールドに入力するだけです。もう一度言いますが、HTMLを使ってラベルテキストに基本的な書式を適用することができます。

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

そこで登場するのが「ラベルのリンク解除」フィールドだ。

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

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

ほとんどのサイトでは、これらの設定で十分です。ただし、完全にカスタマイザーなボタンを作成したい場合は、「カスタムボタンを使用する」にチェックを入れてください。

これは、コードを使用して独自のソーシャルログインボタンを作成できる新しいセクションを追加します。

ボタンのスタイルに満足したら、「変更を保存」ボタンをクリックします。

次に、「使用法」タブをクリックします。WordPressサイトにソーシャルログインボタンを追加するために使用できるショートコードがすべて表示されます。

これらのショートコードは、様々なログインボタンを作成することができます。Facebook用の基本的なログインボタンを作成するには、以下のショートコードを使用します：

[nextend_social_login provider=”facebook”]。

以下の画像は、このソーシャルログインボタンがあなたのサイトでどのように見えるかの例です。

Usage」タブにあるように、ショートコードに追加できるパラメータがいくつかあります。これによってボタンの見た目や動作が変わります。

テキスト・ラベルを持たないソーシャル・ログイン・ボタンを作成したい場合は、例えば、[nextend_social_login provider=”facebook” style=”icon”]のように、’icon’パラメータを追加することができます。

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

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

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

他にもショートコードに追加できるパラメータがいくつかあります。パラメータの全リストを見るには、プラグインのドキュメンテーションのリンクをクリックしてください。

使いたいショートコードを決めたら、そのコードを任意のページ、投稿、ウィジェット準備エリアに追加できます。ステップバイステップの手順については、WordPressでショートコードを追加する方法についての初心者ガイドを参照してください。

この投稿がWordPressサイトにソーシャルログインを追加する方法を学ぶのにお役に立てば幸いです。また、WordPressに最適なソーシャルメディアプラグインや、WordPressサイトへの訪問者をトラッキングする方法についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.