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 sponsored link] WordPress プラグイン 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. 深谷隼人 より:

    gianisimは、simple membershipみたいにユーザーがサイトに投稿する事は可能ですか?

    • 兎本美佳 兎本美佳 より:

      深谷さん、こんばんは。投稿できるかどうかはgianismとは関係ないと思われます。ダッシュボードの設定>一般で新規ユーザーのデフォルト権限グループを寄稿者や投稿者などにしておくと投稿できるようになると思います。

トップへ戻る