Facebookページに追加するアプリのことです。
Canvas Pageとも呼ぶんですかね。
親切な人、教えてくださいな。
Facebookアプリを使うときに、そのアプリに対してアクセス許可をしていなければダイアログが出ますが、
１．新しいウインドウが開いて、そこに承認画面が表示されるタイプ
２．ページ内にダイアログのレイヤー（lightbox的なカンジ）が表示されて、そこに承認画面が表示されるタイプ
の2種類あります。
言葉で説明するのは難しいので、実際に見てください。
１は、画面左にあるメニューの「承認方法テスト（別ウインドウに表示版）」から、
２は、「承認方法テスト（ページ内に表示版）」から試してください。
→このブログのFacebookページへ
１はポップアップブロックに引っ掛かってしまうという大弱点がありますし、
Facebook公式アプリの認証が２なので、できれば２にしたいと思い、
調べたけどなかなか分からないので試行錯誤を重ねまして、その成功したコードを紹介します。
（Javascript SDKを使いました。）
１のコード：
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'アプリのApp ID',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.session) {
// 許可済みの時の挙動
} else {
FB.ui({
method: 'permissions.request', //
display: 'popup'
},
function (response) {
if(response.session){
// 許可されたときの挙動
}else{
// 許可されなかったときの挙動
}
});
}
});
</script>
２のコード：<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'アプリのApp ID',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.session) {
// 許可済みの時の挙動
} else {
FB.ui({
method: 'auth.login',
display: 'iframe' // pageでもOK。違いはよく分からんｗ
},
function (response) {
if(response.session){
// 許可されたときの挙動
}else{
// 許可されなかったときの挙動
}
});
}
});
</script>
違うのは赤字の部分です。
<script></script>の部分は、<head>内に入れてもOKですが、
離れてるのもイヤなんで<body>に置いてます。
</body>の直前に入れるのが描画上良いんでしたっけね。
まあ細かいことは置いておきます。
で、普通考えればdisplayだけ変えればいいような気がしますが、違ったんです。
auth.loginは使われなくなって、permissions.requestを代わりに使えという話もあるんですが、
permissions.requestはバグのせいか何かでdisplayがpopupしか使えないみたいです。
なので、auth.loginを使っています。（いずれpermissons.requestが使えるんでしょうかね。）
リファレンスが公式にも少なくて手探り過ぎて笑えます。
これ、仕事でやってる人は大変そう。
0 件のコメント:
コメントを投稿