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 button FBリンクボタンのHTML
Unlink account button FBリンク解除ボタンのHTML

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

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

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

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

 

Facebookログイン連携テスト

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

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

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

きた!

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

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

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

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

 

EIKINGの開発チームにジョインしませんか?


lismoaの開発チームは、あなた待ちです!

lismoa開発チームでは、Ui/UXデザイナー及びRubyのサーバサイドエンジニアを常時募集しています。
lismoaはEC販売者向けの次世代のインフラシステムです。国内外の大手企業とも提携し、最強のECインフラを目指しています。
楽しいよ、いっしょにどうですか?

EIKING
質問や相談は、TwitterかLINE@でお気軽にどうぞやで

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

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