'}}

2021年版 Facebookログイン 設定方法を解説!

HanamiWEBオンラインスクールでは

●バーチャル自習室でのリアルタイム質問!

●チャットで質問し放題!

●24時間学び放題のEラーニング教材!

全部ついて 2,500円/月!

HanamiWEB代表のmisa(@hanami_web)です。
マッチングサイトテーマを利用してWordPressでマッチングサイトを構築しているのですが、マッチングサイトのテーマにFacebookログインの仕組みがついていました。

Faecbookログイン 用にAPIキーの発行が必要だったので発行手順を解説します!

Twitterログイン APIキー発行 / googleログイン APIキー発行は別記事でまとめています。

では、早速Facebookログイン 用のAPIキー発行方法をご紹介します!

今回設定するマッチングサイト用テーマは以下のPremiumPressです

Facebookログイン 新規アプリ作成

Facebookログイン APIキーを発行する為に、Facebook Developerへログインします。

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ログイン も設定方法を解説しています!

ホームページのリスキリングはお任せください!

2019年よりWordPressやホームページに関するスキルシェアを行ってきました。事例やノウハウが蓄積され、スピーディーかつ的確にお悩みを解決へと導く事を得意としています。ホームページに関するお悩みがございましたら、LINE公式アカウントよりお気軽にご相談ください!

↑クリックするとLINE公式が開きます

新着記事

'}}
Lifter LMSを使ってクレジット分割払いを受け付ける仕組みを解説
'}}
LifterLMSのシステム自動出力ページのカスタマイズ方法を解説
'}}
LifterLMS 銀行振り込みなどで登録日とアクティブ日が異なる場合のカスタマイズ例
'}}
(解決済)WordPressから送信されるGmail宛のメールだけ送られない【ロリポップ】
WP Rocket - WordPress Caching Plugin
ja日本語