スタッフブログ

  • 最新配信
  • RSS

Facebookやtwitterログイン機能をあなたのサイトに簡単に追加できるモジュール

mik : XOOPS » モジュール 2012/10/11 15:09

Blogger's Avatar

2014/05/19
設定方法が若干変わっています。FacebookとTwitterのkeyとsecretを取得する部分はこちらを参照してください。

TPソーシャルメディアを使ってXOOPS CubeにFacebookログインする
http://ryus.co.jp/blog/tpsocialfacebook/
TPソーシャルメディアを使ってXOOPS CubeにTwitterログインする
http://ryus.co.jp/blog/tpsocialtwitter/


先日行われたXOOPS Cube初心者勉強会で「Facebookとかでログイン機能ってないんですか?」と質問をされました。TOKYOPenではその機能を作ってあったのでXOOPS Cubeで使えるようにしてみました!

SoialMedia説明動画




ダウンロードする


下記のリンクからダウンロードすることができます。

TPソーシャルメディア
ダウンロード

ダウンロードしたら解凍してください。

htmlとxoops_trust_pathフォルダがありますので、インストールしたいサイトの該当するフォルダに中身をコピーします。

サイトの管理画面 互換モジュール>モジュールのインストール から SocialMedia をインストールします。




FacebookとtwitterのKeyとSecretを取得して設定する


Facebookとtwitterのログイン機能を利用するには「どのサイトにログインさせる機能なのか」を登録してKeyとSecretを取得する必要があります。

別ページでまとめて説明していますので取得に関してはこちらをご覧ください。

Facebookとtwitterのkeyとsecretを取得する
http://ryus.co.jp/socialkeysecret.html

管理画面左ブロックにある SocialMedia をクリックします。



FacebookとtwitterのKey,Secretを入力する画面になります。

ここに先ほどの説明で取得したKeyとSecretを入力して[登録する]をクリックします。

Facebookだけtwitterだけでも登録可能です。


ソーシャルログイン機能を使ってみる


ここまで設定できたらログアウトしてサイトを見てください。

左ブロックにソーシャルボタンが表示されています。



[Facebookでログイン]をクリックすると確認画面が2つ出ます。





続行して進むと、設置したサイトに戻ります。

[twitterでログイン]の場合も同様で、このような画面が表示されます。




戻った画面はこのようなになります。



すでにXOOPSユーザー登録してあるIDに結びつけたい場合は左の赤枠の入力域に入力します。
新しくアカウントを作成したい場合は右の緑枠の入力域に入力します。

[登録する]ボタンをクリックするとログインしてサイトに入ることができます。

次回以降は[Facebookでログイン]あるいは[twitterでログイン]をクリックするだけでログインできるようになります。

簡単にログインできるようになりましたね(^^)♪


補足・実際のログインと古いXOOPS Cubeの対応


うさぎにもできるXOOPS Cube入門にインストールしてみましたので「すぐに試してみたい!」という方はこちらで確認してみてください。

http://usadeki.jp

ここにインストールするときに問題が起こりました。管理画面でKeyとSecretを登録する画面のボタンが押してもサブミットされないという状況です。調べてみるとこのボタンはjqueryを使っていましたが、管理画面のテーマではjqueryを読み込んでいなかったために何の反応もなかったようです。

表側のテーマにはjqueryを読み込む部分があったのでその行をコピーしたりして、

\modules\legacy\admin\theme\admin_theme.html

に行を追加しました。



の前あたりにこれらの行を追加すれば、古いxclでも動くかもしれません♪

// 追加したところ






トラックバック

スタッフブログ最新
カテゴリ一覧

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.