FacebookやTwitterでログインさせる「Social Login」- ショッピング・サイトや会員制サイトをより簡単に実現させる便利プラグイン

久しぶりに、ノウハウ系のネタです。

最近の会員サイトやショッピングサイトでよく見かけるのが、

マイページにログインしたり、新規会員登録をする際に、

FacebookやTwitterアカウントで簡単に登録・ログインできるサイト、

例えば、こんな感じ↓

shk_cy

面倒なメールアドレスの入力やパスワードを考えなくていいので、便利ですよね。

今回は、そんなソーシャルネットワークを利用してログインや新規登録を簡単にさせる、

「Social Login」の設定方法について紹介します。
※Wordpress用のプラグインです。あしからず。

Step 1 プラグインのダウンロードとアップロード

まずはコチラから、「Social Login」をダウンロードし、wp-content/plugin/にアップロード

Step 2 設定をスタート

「プラグインを有効」後、左サイドバーに[Social Login]が表示されるので、
「Setup」をクリックすると、以下の画面が表示されるので、『 Click here to login to your account 』をクリック
setup

Step 3 [oneall]の設定

プラグインを提供している「oneall」のサイトに飛ぶので、こちらのマイアカウントに登録し、API Keyを取得します。

create new account

上記のような画面に飛ぶので、
以下の項目を設定していきます。

・ログイン用サブドメイン名(どのようなアドレスでもOK)
・サイトの名前(こちらはあなたのサイトの名前を任意でつけてください)
・サイトのドメイン(サイトのURL)

これらを入力すると、API Keyが発行されます。

api

Step 4 API Keyを設定

WordPressの管理画面に戻り、API Keyを入力しVerifyします。

API2

Step 5 ソーシャルメディアを設定

再び「oneall」の設定画面に戻り、
上部タブ「Social Network」をクリックすると、以下のような画面になるので、
設定したいソーシャルメディアを選び設定していきます。

social3

例えば、Facebookでログインさせたい場合には、

画面のFacebookをクリックし、これをセットアップしていきます。

Facebookの場合には、このログイン専用のアプリをFacebookで新規で設定する必要があります。

Facebookのアプリ設定はコチラから

FacabookのApi Keyが取得できたら、
「oneall」の設定画面、最下段のAPI Kyeに必要項目を入力し(下の画像)
「register Application」ボタンをクリックすれば完成です。

facebookapi

その後、Twitterなどのその他のソーシャルメディアを設定していくという繰り返しです。

セットアップが完了したら、Wordpressのウィジェットなどで表示させることができます。
sidebar

Step 6 動画でチェック