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プロデュースのPRIMAでamazon販売を加速しよう

PRIMAは業界最多10カ国のamazonに対応したamazonデータ収集・価格改定システムです。ありとあらゆる商品データ、ライバル価格を収集でき、さらに綿密なSKU別のルールで自動価格改定も行えます。現在ユーザ数は500+。

コメントを残す

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

ABOUTこの記事をかいた人

1985年生まれ、愛媛県出身東京都在住。 26歳で起業して輸出入貿易事業を開始。 現在は貿易・商品開発・業務支援システム開発・コンサルティング等を行う会社を2社経営。 ”遊ぶために働く、働くために遊ぶ”の相乗効果がパフォーマンスの高い人生を実現できる方法と信じ、日々死ぬほど働き、死ぬほど遊んでいる。 趣味はフェス・ライブ観戦、旅行。 このブログでは自身が経験したビジネス関連と国内外での遊びの情報について発信中。