WordPressでFacebook OAuthログインできるNextend Facebook Connectを導入する方法

WooCommerceでの国内最強ダンボール屋さんの開発に伴い、
WordPress関連のナレッジが蓄積してきたのでどんどん出していきたいと思います。

今回はWooCommerceに特化してるわけではないんですが、
アカウントをFacebookでソーシャルログインできる方法です。

あまりEC系サイトでは見かけないですね。

EIKING
だからこそや

ということで導入してみたのでありました。

 

Nextend Facebook Connectプラグイン導入

今回は、Nextend Facebook Connectというプラグインを使います。

理由は、導入したテーマの必須プラグイン(推奨かな)だったからです。
どうせだから入れとこうぜみたいな。

まずはプラグインのインストールから有効化まで行います。

検索したら出てきます。

有効化して、Settingsへ。

サイドバーのメニューからは、
設定 > Nextend FB Connect

からいけます。

 

Nextend Facebook Connect設定

Facebookアプリの作成

まずは、Facebookでログインできるようにするためには、
そのログイン用のアプリを作成する必要があります。

アプリといっても別になにか開発するわけではないです。

まずは、開発者向けFacebookへGO。

ログインしたら、「新しいアプリを追加」へ。

表示名とメールアドレスを入力します。

表示名はまあWordpressのサイト名とかでいいでしょう。

「アプリIDを作成してください」をクリックするとセキュリティチェックが入るかもしれません。

入力して「送信する」。

 

Facebookアプリの設定

Facebookアプリを作成すると下記のような画面になると思うので、
サイドバーから「設定」へ。

Facebookアプリのベーシック設定を行います。

とりあえず入れれるところだけでいいと思います。
普通に動くので。

表示名デフォで入ってますが変更可
ネームスペース特に不要
アプリドメイン特に不要(でもサイトドメイン入れとく)
連絡先メールアドレスデフォで入ってますが変更可
プライバシーポリシーのURLサイト内のプライバシーポリシー表示URL
サービス規約のURLサイト内のサービス規約表示URL(ECでは特商法のページでいいのでは)
アプリアイコンこれはFBログイン時に表示されるアイコン
カテゴリ一番サイトに近いカテゴリを選択

上記データは、まだ準備できてない部分に関しては後でもいいと思います。

次にサイト下部から「プラットフォームを追加」をクリック。

ウェブサイトを選択。

WordPressのサイトURLを追加します。

これで右下の「変更を保存」ボタンをクリックして、
とりあえずFacebookアプリ側の設定完了!

 

Facebookアプリ情報を入力

Nextend Facebook Connectプラグイン側の設定画面に戻ります。

Facebook App IDと、App Secretを入力します。

Facebook App IDと、App Secretは、
先程のFacebookアプリ管理ページのサイドバー内「ダッシュボード」から確認できます。

app secretは「表示」を押して、パスワード入力したら表示されます。

 

残りのNextend Facebook Connect設定項目

特に変更不要ですが、
内容としては下記の様な感じです。

 

New user prefixユーザ名の頭につく接頭辞
Fixed redirect url for loginログイン後のリダイレクトURL
Fixed redirect url for register新規登録後のリダイレクトURL
Load button stylesheetボタンのCSS読む?
Login buttonログインボタンのHTML
Link account buttonFBリンクボタンのHTML
Unlink account buttonFBリンク解除ボタンのHTML

ちなみにうちでは上3つだけいじりました。

ボタンのスタイルは今のテーマではあまり表示されるところがないので、
そのままにしています。

通常のWordpressログイン画面や、ユーザ画面で表示されるぽいですね。

マイページやログイン画面はテーマに依存してる場合は必要ないかと。

 

Facebookログイン連携テスト

これでNextend Facebook Connect関連の設定は全て完了したので、
実際にログインできるかやってみます。

このテーマではすでに推奨プラグインであることもあってか、
テーマ側でログインボタンが用意されてました。

LOGIN WITH FACEBOOKをクリックすると。。

きた!

ここで出て来るアイコンは、
Facebookアプリ設定時に設定した1024x1024pxのアプリアイコンです。

実際Wordpressのユーザ管理画面でも追加されていました。

権限グループは「購読者」ですね。

という感じでFacebookログインの導入をすることができました!
Googleに関しても対応したので、また別で記事にしたいと思います。

 

システム開発の無料相談受け付けています


現場を理解したシステム開発が得意技。

これまで、EC支援システムをメインに、PRIMAやlismoaの開発に携わってきました。

EC販売とシステム開発両方に精通した私たちillustriousにお任せください。
漠然とした相談でもかまいません、ご相談全て私EIKINGが対応します。

EIKING
記事に関する質問や相談は、LINE@でお気軽にどうぞやで
line

ABOUTこの記事をかいた人

1985年生まれ、愛媛県出身東京都在住。26歳で起業し、現在は商品開発及び直販・システム開発・仮想通貨(暗号通貨)関連の事業を行う会社を2社経営。 ”遊ぶために働く、働くために遊ぶ”の相乗効果がパフォーマンスの高い人生を実現できる方法と信じ、日々死ぬほど働き、死ぬほど遊んでいる。 趣味はフェス・ライブ観戦(主にBABYMETAL)、麻雀、旅行。 このブログでは、自身が経験したタメになったことや、自信の考えをビジネス・遊び関係なしで配信中。