今運用している会員サイトにユーザーが登録の手間を省けるようにSNSログインを入れたい。
実はそれはジャイアニズムというプラグインを使えば解決することができます。
ジャイアニズムはそれ単体では、会員サイト構築するということは難しいです。
でも、既存のサイトにFacebookやTwitterログインといったSNSログインを簡単に導入することができます。
なので、今回はジャイアニズムを使ってFacebookログインを導入する方法をご紹介していきます。
今回の記事を読むことで、どういう流れでFacebookログインを導入や流れの確認をすることができるのでぜひ最後まで読んでみてください。
Contents
ジャイアニズムとは
ジャイアニズムとはWordPressにSNSログインを実装することができる国産のプラグインになります。
SNSを使って登録もできるので、ユーザーに登録フォームの入力の手間を省いて登録率アップにもつなげることができます。
ジャイアニズムででできること
ジャイアニズムでは、次のSNSログインを実装することができます。
・Facebook
・Twitter
・Google
・Instagram
・LINE
今回はFacebookとジャイアニズムを連携する方法を紹介していきます！
実際ジャイアニズムでをFacebookと連携
まずは、ジャイアニズムとFacebookを連携するために、FacebookのApp IDとApp Secretを取得します。
App IDとはFacebookで作成したFacebookログイン機能の認証のために必要なIDのことです。
また、App SecretもFacebookで作成したFacebookログイン機能の認証のために必要な秘密の鍵のことを指します。
FacebookのApp IDとApp Secretを取得するには次のステップを踏みます。
Step1.Facebookの開発者ページにアクセスする。
Step2.Facebook開発者ページから「新しいアプリ」をクリックする。
Step3.アプリの開発の設定をしていく。
Step4.アプリの設定が終わったら、App IDとApp Secretを取得。
Step1.Facebookの開発者ページにアクセス
まずは下記のURLから、Facebookの開発者ページにアクセスします。
https://developers.facebook.com/
Step2.Facebook開発者ページから「新しいアプリ」をクリック
アクセスができたら、マイアプリから新しいアプリを追加をクリックしましょう。
クリックすると新しいアプリの追加画面が表示されるので、表示名や連絡先メールアドレスを入力していきます。
入力ができたら、アプリIDのを作成をクリックして作成します。
作成をクリックすると下記のようにセキュリティチェックが表示されるので、チェックを入れて「送信する」をクリックします。
すると管理画面にアクセスできます。
管理画面の中から、「Facebookログイン」を選択して「設定」をクリックします。
Step3.アプリの開発の設定
クリックすると下記のように色々なアイコンが表示されます。
今回はWordPressと連携をするので「ウェブ」を選んでクリックします。
すると各種設画面が表示されるので、順番に埋めていきます。
サイトURLの入力
まずは、サイトURLを入力します。
URLはサイトのトップページのURLを入力するようにしましょう。
入力ができたら「Save」をクリックして、「次へ」のボタンをクリックします。
JavaScriptコードの設定
次の画面へ進むと今度はJavaScriptのコードが表示されます。
JavaScriptとはWebで使われるプログラミング言語のことです。
まずは、表示されているJavaScriptのコードをコピペして、メモしておきましょう。
コピペができたら、下記のコードをそれぞれ変更します。
|
1 2 |
appId : '{your-app-id}', version : '{api-version}' |
コードの中の{your-app-id}を画面左上のアプリIDに書き換えます。
書き換えることができたら、今度は{api-version}を画面の中にある「現在のバージョンは2.1です。」と表示されている数字に書き換えます。
|
1 2 |
appId : '12345321', version : '2.1' |
書き換えたものに関しては後で使用するので、メモをして残しておきます。
App IDとApp Secretキーの取得
アプリ開発の設定ができたら、左側のメニューにある「ベーシック」という部分をクリックしましょう。
クリックすると、作成したアプリの詳細などが表示されます。
その中にApp IDとApp Secretという項目があります。
これがジャイアニズムでの設定に必要なApp IDとApp Secretになります。
ジャイアニズムの設定画面に移動
App IDとApp Secretの取得ができたら、今度はジャイアニズムの設定画面に移動します。
設定画面に移動すると下記のような項目が表示されると思います。
ジャイアニズムには次のような基本設定があります。
１．現在の登録設定
２．ログイン画面
３．ボタンサイズ
現在の登録設定について
現在の登録設定については、WordPressのデフォルトの設定を使用するか、ジャイアニズムの設定を使用するかを選べます。
特に理由がなければここは、ジャイアンらしく登録を「登録を強制する」にチェックを入れておきましょう。
ログイン画面設定について
ここでは、すべてのログイン画面にログインボタンを表示するか、ログインボタンを手動で設定するかを選ぶことができます。
特に理由がなければ、「すべてのボタンをログイン画面に表示する」を選んでおきましょう。
ボタンサイズについて
ここでは、ボタンサイズを「中」か「大」の２つのサイズから選ぶことができます。
好きなサイズを選ぶようにしましょう。
ジャイアニズムとFacebookを連携
ジャイアニズムとFacebookを連携するには、ジャイアニズムの設定画面を下にスクロールしていきましょう。
すると、Facebookの設定画面が表示されるので、設定に必要な項目を埋めていきます。
必要な項目を埋めたら「変更を保存」をクリックしましょう。
これで、ログイン画面に移動するとFacebookログインのボタンが表示されていると思います。
まとめ
今回はジャイアニズムを使ってFacebookログインを実装する方法を紹介しました。
ジャイアニズムは他のSNSログイン(TwitterやLine)などにも対応しているので、他にも対応させたいものがあれば対応させることができます。
ジャイアニズムはSNSログインを付与するプラグインなので、これだけで会員サイトを作成するとかはできません。
ただ、今の会員サイトにSNSログインを実装したいなどの場合は、とても便利なプラグインなのでぜひ使ってみてください！
