WordPressにFacebookやTwitterログインを追加するGianism

あるWordPressサイトをつくっていて「ユーザーに気軽にユーザー登録してもらいたい」という必要が生じました。いわゆるFacebookやTwitterのアカウントを利用してボタン一つでログインできるようにしたいです。調べてみるとGianismというプラグインが見つかったのでこれでFacebookとTwitterログインができるようにしてみました。すべてを書こうと思いましたが案外長くなってしまったので基本的な設定と使い方について書きます。

Gianism(ジャイアニズム)とは？

Gianism(ジャイアニズム)のプラグインページを見ると一目瞭然なのですが、

https://ja.wordpress.org/plugins/gianism/

あの、ジャイアン哲学(？)が元になっているようです。おまえのユーザーはおれのユーザー、ということでFacebookなどSNSのユーザーを簡単にWordPressサイトのユーザーにできるプラグインです。

Gianismのインストール

ダッシュボード　プラグイン＞新規追加　で

gianism　と入力してリターン

今すぐインストール　をクリック

プラグインを有効化　をクリック

インストールは終了するのですが、使えるようにするにはまだ設定が必要です。Gianism設定 をクリックします。

Facebookログインができるように設定する

Facebookのアカウントでログインができるように設定したいと思います。

Gianismの設定画面のFacebook部分はこのようになっています。
ここを設定していきます。

Facebookと接続　の　有効　にチェックを入れます。そして、　ここ　をクリック

Facebook開発者ページにリンクします。右上にある　Add a New App をクリック

この画面がポップアップするので　WWW　をクリック

この画面になるのでこのアプリの名前を入力して、Create New Facebook App ID をクリック。

カテゴリ　を選択して、 Create App ID をクリック

この画面になります。画面の下の方に、

Tell us about your website という欄があるので、このログインを利用するサイトURLを入力して　NEXT　をクリック。これでAppは作成されました。

作成したAppに関する情報をGianismの設定画面に入力していきます。Facebook開発者ページの上部にある　My Apps をクリック

今作ったアプリを探して、名前をクリック

App ID の欄にある数字をコピーして、WordPressのダッシュボード Gianismの設定画面の

(1)に貼り付けます。

Facebook開発者ページの先ほどのページに戻り、App IDの右にある　App Secret　にある　Show　をクリックします。

App Secretが表示されるので、コピーして、WordPressのダッシュボード Gianismの設定画面の

(2)に貼り付け、変更を保存　をクリックします。

上部にこのように表示されます。これで設定が終わりました。

試してみます。

ログアウトしてからログイン画面を見ると、このように　Facebookでログイン ボタンが表示されていました。

Facebookログインを試してみます。ここで、注意事項なのですがFacebookで利用しているメールアドレスがすでにこのWordPressサイトのユーザーとして登録済みの時は試すことができないのでその場合は一時的にWordPressの該当ユーザーのメールアドレスを変更しておきましょう(あとで戻すのをわすれずに)。

Facebookでログイン　をクリック

このような確認画面が出るので、OK　をクリック

WordPressサイトにログイン済みになり、個人設定画面に遷移します。

*このログイン後の画面についてはトップページに飛ばすなどカスタマイズすることは可能です。このカスタマイズについては次回のblogに書きます。

Twitterログインができるように設定する

Twitterのアカウントでログインができるように設定をします

Gianismの設定画面のTwitter部分はこのようになっています。
ここを設定していきます。

上記の　ここ　をクリックします。

Twitter Appsの画面に移動します。右上にある　Create New App をクリック

この画面からAppの設定をします。Name,Description,Websiteを入力して、

Yes, I agree にチェックを入れて、Create your Twitter application をクリックします。

これでapplicationは作成できたので、applicationの情報をGianismの設定画面に入力していきます。

Twitter applicationでSettingsタブの、Nameをコピーして、

Gianism設定画面のTwitter スクリーン名にペーストします

Twitter applicationでKeys and Access Tokens タブのConsumer Key(A),Consumer Secret(B)と

この画面の下の方にある　Token Actions の　Create my access token をクリックして、表示される

Access Token(C),Access Token Secret(D)を使います。

Twtitterのapplication画面の A ～ D をGianism設定画面に、

こんな感じにコピーしてペーストします

変更を保存　をクリックします。

Gianism設定画面の

ここの　コピー　をクリック。

URLがポップアップされるのでコピー

Twitter application画面の、Settingsタブをクリックして

Callback URL　欄に今コピーしたURLをペーストします

画面の下部にある　Update Settings をクリックします。

これで設定が終了しました。

ログアウトして試してみます。

ログイン画面を見ると　Twitterでログイン　ボタンが表示されていました。

Twitterでログイン　ボタン　をクリック

一瞬、こういう画面が表示されて自動的に

WordPressサイトにログイン済みになり、個人設定画面に遷移します。

メールアドレスはなにか自動的に付けられているようなので、Twitterログインだけだとメールアドレスの重複は心配しなくてもいいのかもしれません。

まとめ:基本的な設定は終了しました

Gianismを使ってログイン画面からFacebookログイン、Twitterログインができるようになりました。思っていたよりすこし手間がかかってしまいましたので表画面にログインボタンを表示する方法や、ログイン後に表示する画面のカスタマイズ方法については次回のblogで書きたいと思います。

また、今回FacebookアプリとTwitterアプリを作ったときに色々困ったことがあったのでそれについても次回に書ければ書きたいと思います。

[amazon_searchlink search=”WordPress プラグイン”]