HanamiWEB代表のmisa(@hanami_web)です。
マッチングサイトテーマを利用してWordPressでマッチングサイトを構築しているのですが、マッチングサイトのテーマにFacebookログインの仕組みがついていました。
Faecbookログイン 用にAPIキーの発行が必要だったので発行手順を解説します！
Twitterログイン APIキー発行 / googleログイン APIキー発行は別記事でまとめています。
では、早速Facebookログイン 用のAPIキー発行方法をご紹介します！
今回設定するマッチングサイト用テーマは以下のPremiumPressです
この記事でわかる事
Facebookログイン 新規アプリ作成
Facebookログイン APIキーを発行する為に、Facebook Developerへログインします。
【アプリを作成】をクリックします。
Facebookログイン を作成する場合は生活者を選択
Facebookログイン の場合、生活者をクリックして次へ進みます。
Facebookログイン 用のアプリ表示名を入力
Facebookログイン 用アプリの表示名とメールアドレスを入力し【アプリ作成】をクリックします。
Facebookログイン を選択
アプリを作成すると、以下のようなダッシュボードへ移行するので Facebookログイン の【設定】をクリックします。
Facebookログイン ウェブを選択
今回はFacebookログイン はウェブサイトで利用をするので、ウェブを選択します。
実装するウェブサイトURLを入力
Facebookログイン を実装するウェブサイトのURLを入力します。
どんどん次へ進む
サイトでFacebookログインを実装するための埋め込みコードが色々と発行されるのですが、既に今回利用しているPremiumPressテーマでは埋め込みコード完了しているので、【次へ】進んでいきます。
完了してダッシュボードに戻り
Facebookログイン APIキー・シークレット確認
設定 > ベーシック の中にある
アプリID ⇒ APIキー
app secret ⇒ Secret Key
こちらをテーマの入力箇所へコピペで貼り付けます。
その他
- 表示名
- アプリドメイン（ドメインはhttps://以下の●●●.comの箇所です）
- 連絡先メールアドレス
- プライバシーポリシーURL
- 利用規約URL
を入力して保存します。
有効なリダイレクトURLを入力
Facebook callback URLを
Facebookログイン > 設定
の中にある【有効なOAuthリダイレクトURL】へ入力をします。
Facebookログイン 公開へ
上部にある開発中のスイッチを切り替えて、Facebookログイン機能を本公開します。
Facebookログイン 実装完了！
無事、以下のようにFacebookログイン 完了しました！
Facebook Developer登録済んでいた
Facebookはかなり昔からDeveloper登録をしていたので、Facebook Develoert登録の過程はなしで紹介をしています。
Facebookログイン は日本語で案内が出てくれるのでとても分かりやすかったです！
WordPressでマッチングサイトを構築する為に、PremiumPressというテーマを利用していて、SNSログインもテーマの設定で行えるので、プラグインなしでとても優秀です！
Twitterログイン / googleログイン も設定方法を解説しています！
