WordPressテーマ「メシオプレス」ブログ

WordPressの管理画面に主要SNSアカウントでログインできるようになる
「Gianism(ジャイアニズム)」という面白いネーミングのプラグインを
みつけましたので、設定方法を解説しておきます。

Gianismイメージ画像

Gianismとはどんなプラグインなのか

Gianism」とは、各種ソーシャルメディアに登録したユーザー情報を受け取り、
その情報でログインできるユーザーを自動で作成するプラグインです。

「Gianism(ジャイアニズム)」という特徴的な名前と、
「おまえのユーザーはおれのユーザー」というキャッチフレーズが
とてもセンスを感じるネーミングで目に止まりました。

「Gianism」を使用すると、下記のように

WordPressログイン画面

WordPressのログイン画面にFacebook、Twitter、Googleなどの
ログインボタンで管理画面にログインできるようになります。

これはWordPressで会員制サイトを運営している場合などに、
ユーザーが新たにアカウント情報を登録する手間が省けるため、
ユーザービリティや顧客満足度の向上に繋がります。

Gianismは、現在は下記SNSに対応ということになっています。

  • Facebook
  • Twitter
  • Google
  • mixi
  • Yahoo! JAPAN

しかし、mixiとYahooに関してはエラーになり登録できませんでしたので、
今回はそれ以外の設定を「Gaianism」を有効化後の状態からの解説していきます。

Gianismプラグイン:Facebookログインボタン設定編

まずはFacebookの設定方法から解説していきます。
「Gianism」でFacebookログインを実装するためには、
Facebookアカウントだけでなく、「Facebook開発者」登録が必要になります。

まずFacebookアカウントにログインした状態で、Facebook developersにアクセスし、画面上の「アプリ」を押してください。

Facebookアプリ

私のアカウントはすでに開発者登録済みですので、
このあとの流れは下記の記事を参照して開発者登録を完了させてください。
facebook開発者(Developer)への登録

開発者登録を完了したら、ログイン機能実装のために必要なFacebookアプリを登録します。


アプリページの「Create New App」ボタンをクリックして、
「新しいアプリを作成」画面に移動してください。

Facebookアプリ登録画面1

「Display Name」欄に任意の名前(ブログタイトル等)を入力し、
ご自分のブログに近いカテゴリを適当に選択し、
「アプリケーションを作成」ボタンをクリックします。


クリック後、セキュリティチェックが要求されるので、
画像にあるアルファベットを入力し、送信ボタンを押してください。
セキュリティチェックに問題がなければ、
アプリ登録はこれで完了となり、作成したアプリのTOPページに移動します。

Facebookアプリトップページ
左メニューの「設定」をクリックして、
「サイトURL」を入力して「変更を保存」してください。

それと、このページ上部にある、

  • アプリケーションID
  • アプリのシークレットキー

が「Gianism」の登録に必要なのでメモしておいてください。
これで、Facebook側の作業は終了です。

次に、Wordpressの設定画面に移動します。
メニューのユーザーから「外部サービス連携」を選択してください。

外部サービス連携画面

「Facebookと接続」欄で「有効」を選択して、
「App ID」にさきほどメモした「アプリケーションID」を入力し、
「アプリの秘訣」欄に「アプリのシークレットキー」を入力後、設定を保存してください。

その後、Wordpressをログアウトすると、
ログイン画面にFacebookでログインボタンが表示されるようになります。

WordPressログイン画面

設定に問題がなければ、このFacebookでログインボタンを押した後、
FacebookのログインIDとパスワードの入力が求められ、
ログイン後、認証を許可するかどうかを求められます。

そして、認証許可後に自動で新しいユーザーが作成され、
そのユーザーのプロフィール画面に移動します。
これで、GianismによるFacebookログイン機能の設定完了です。

Gianismプラグイン:Twitterログインボタン設定編

次はTwitterの設定です。

まだ登録していない場合はTwitter公式サイトでアカウントを作成してから、
開発用ページにアクセスしてログインしてください。
そして、マイアプリページにある「Create a new application」をクリックします。

Twitter開発者画面1

各項目には下記の情報を入力してください。

「Name」 → このアプリの名前(ブログタイトル等)
「Description」 → このアプリの説明文
「Website」 → サイトのルートURL
「CallbackURL」 → サイトのルートURL

入力後、画面下部にある「Yes, I agree」をチェックし、
キャプチャの文字と数字を入力した後、
「Ceate your Twitter application」ボタンをクリックしてください。
これで、Twitterアプリの登録は完了です。

登録完了後に表示された画面の「Create My Access Token」ボタンを
クリックすると下記の画面に移動します。

Twitter開発者画面2

  • 「Consumer Key」
  • 「Consumer Secret」
  • 「Access Token」
  • 「Access token」 secret

の4項目は後で必要になるので、保存しておいてください。
これで、Twitter側での設定は終了です。

次に、Wordpressの設定画面に移動し、
左メニューの「ユーザー」から「外部サービス連携」を選択してください。

WordPressの外部サービス連携2

「Twitterと接続」欄で「有効」を選択し、
スクリーン名にはTwitterアカウント名などのわかりやすい識別名を入力して、
それ以外の項目には先ほど保存した情報をそれぞれ入力して設定を保存してください。

その後、Wordpressをログアウトすると、
ログイン画面にTwitterでログインボタンが表示されるようになります。

ソーシャルボタン付きWordPressログイン画面

これでGianismによるTwitterログイン機能の設定完了です。

Gianismプラグイン:Googleログインボタン設定編

最後はGoogleの設定です。

まだアカウント登録していない場合はGoogleアカウントを作成し、
その後、Google Console APIに移動してください。
そして、移動後のページで、「Create Project…」ボタンをクリックしてください。

Google Console API登録画面1

左メニューの「API Access」を選択して、
「Create an OAuth 2.0 Client ID」をクリックしてください。

Google Console API登録画面2

「Product Name」にこのアプリの名前(ブログタイトル等)を入力し、
「Home Page URL」にサイトのルートURLを入力し、
「Next」ボタンをクリックしてください。

Google Console API登録画面3

「Aplication Type」は「Web Application」を選択してください。

その下の「Your site or hostname」は、
ログイン時にSSLを使用する場合はプロトコルをhttpsにして、
それ以外はhttpを選択して、サイトのルートURLを入力した後、
「Create client ID」をクリックすればアプリの登録は完了です。

Google Console API登録画面4

登録完了後の上記画面に表示されている

  • Client ID
  • Client Secret

の2項目が必要になるので、保存しておいてください。
これでGoogle側での設定は終了です。

次に、Wordpressの設定画面に移動し、
メニューの「ユーザー」から「外部サービス連携」を選択してください。

WordPress外部サービス連携画面3

「Googleと接続」欄で「有効」を選択し、
リダイレクトURIにサイトのルートURLを入力して、
それ以外の項目には先ほど保存した情報をそれぞれ入力して設定を保存してください。

その後、Wordpressをログアウトすると、
ログイン画面にGoogleでログインボタンが表示されるようになります。

Googleボタン付きWordPressログイン画面

これで、GianismによるGoogleログイン機能の設定完了です。

以上が、Facebook、Twitter、Googleアカウントを使った
ソーシャルログインボタンの実装方法の解説です。

ちなみに、外部サービス連携の「カスタマイズ」タブをクリックすると、
細かなカスタマイズ方法が日本語で解説されています。
色々カスタマイズしてみたい人はそちらを参照してみてください。

Gianismのカスタマイズ画面

管理画面内にカスタマイズ方法が日本語で解説されていたり、
プラグインの作者と日本語でやり取りできるのは国産プラグインの強みですね。

●本日のまとめ
FacebookやTwitterのアカウント情報でWodpressにログインできるようになる
「Gianism」は、会員サイトを展開している場合などに導入すると、
ユーザーがアカウント登録をする手間が省けるユーザーのためのプラグイン。

この記事を書いた人

めしお
めしお メシオプレス販売者

めしおさんのめしおさんによるめしおさんのためのWordPressテーマ「メシオプレス」を有料でおすそ分けしています。

コメント

  1. わかりやすい解説の記事をありがとうございます。
    facebookのdevelopersサイトが記事の物を変わっているようで、仕様も変わってしまったのでしょうか、ボタンをWPのログイン画面に表示させることができません。もし変更があるようでしたら追加情報をアップしていただけるとありがたいです。

    • 関さん、最新版にしておきました。

    • ありがとうございます。ボタンは追加されたのですが、クリックすると「見つかりません」になってしまうようです。Developersの仕様が変わったりしているのか、確認のためフォーラムで問い合わせてみたいと思います。

      どうもありがとうございました。

    • たびたび失礼します。

      できました。

      WPのパーマリンクがデフォルトだとうまくいかないようです。
      /facebook/login/というディレクトリが見つからないというのでおかしいと思ったらそういうことでした。

      ご迷惑おかけしました。
      ご協力ありがとうございました!

    • 設定できたようで良かったです!

  2. 丁寧な解説でとてもありがたいです。
    FBでログイン後、ユーザーに投稿してもらうサイトを構築中ですが、
    投稿者名等を変更することは可能でしょうか・・?
    少し関係ない質問ですいません。

    • ぶっこさん

      ごめんなさい。
      設定後のカスタマイズ方法はちょっとわからないです。
      作者の高橋さんに直接聞いてみてください。

  3. 返信ありがとうございます。
    わかりました。ありがとうございます。

  4. 過去記事にコメント失礼いたします><
    FB開発者サイトで、シークレットキーがブランク表示されてしまうのですが。。登録の仕方は変わっていませんよね?m(__)m

    • アヤナさん

      Facebookは仕様変更が頻繁にありますが、私の環境ではシークレットキーは正常に取得できます。

  5. はじめまして
    WP-menberとの連帯はできないのでしょうか?
    WP-menberのログイン部分にFBなどのSNSログイン機能を付けたいのですが。ご存知でしたら教えていただけますか?

  6. Twitterログインをしようとすると、『ページは機能していません。HTTP ERROR 500』とでるのですが、何が原因だかわかりますでしょうか?
    ジャイアニズムを入れ直しても改善されませんでした。。。

コメントする


※メールアドレスは公開されません。

オリジナル有料WordPressテーマ好評発売中

メシオプレス02 メシオプレス03