Facebookの静的iframeアプリケーションのライトボックス

Question

私はキャンバスのiframeを使用してFacebookのタブを作成しています。クライアントが望んでいるもの（Facebookアプリケーションの作成にはまだ慣れていません。特に、今は非常に流動的です）は、既に作成された静的なタブページをサインアップボタンで表示することです。ユーザーがそのボタンをクリックすると、APIスクリプト（PHP）にデータを送信する独自​​のサインアップフォームを持つFacebookのようなライトボックスウィンドウが必要になります。これも可能ですか？私はFacebookがライトボックスにあなたのサイトを許可するとは思わないが、私は自分のタブ内でそれをすることはできますか？ jqueryなどを含めるときにエラーが表示されます。または、同じiframeに新しいウィンドウを読み込みます（今すぐリンクが新しいウィンドウで開きます）。ここでは、静的なページのための私の単純なコードは次のとおりです。

<?php 

require_once 'includes/facebook.php'; 

$facebook = new Facebook(array(
    'appId' => 'xxxx', 
    'secret' => 'xxxx', 
    'cookie' => true, 
)); 

?> 
<style type="text/css"> 
    div.wrapper { 
    width:520px; 
    height:542px; 
    background:#006; 
    background:url(bg1.jpg) 0 0 no-repeat; 
    } 
    div,h1,h2,h3,h4,h5,h6 { 
    width:357px; 
    margin:0 auto; 
    } 
    div.content { 
    padding-top:145px; 
    } 
    div.content h1 { 
    width:213px; 
    height:27px; 
    margin:0 auto 23px; 
    text-indent:-499px; 
    background:url(invited.jpg) 0 0 no-repeat; 
    } 
    h6 { 
    font-size:12px; 
    margin:0 auto; 
    text-align:center; 
    color:#000; 
    } 
    div.bullets ul { 
    list-style-type:disc; 
    list-style-position:inside; 
    font-family:Arial; 
    margin:5px auto 15px; 
    } 
    div.bullets ul li { 
    color:#000; 
    font-size:12px; 
    margin:0 auto 5px 20px; 
    /*letter-spacing:-1px;*/ 
    } 
    div.bullets a { 
    text-indent:-499px; 
    display:block; 
    margin: 18px auto 17px; 
    width:96px; 
    height:28px; 
    background:url(button.jpg) 0 0 no-repeat; 
    } 
    div.links { 
    width:331px; 
    margin:0 auto; 
    border-top:1px solid #000; 
    } 
    div.links ul { 
    text-align:center; 
    margin:13px auto 0; 
    padding:0; 
    } 
    div.links ul li { 
    width:331px; 
    height:15px; 
    padding:0 7px; 
    display:inline; 
    } 
</style> 
<div class="wrapper"> 
    <div class="content"> 
    <h1>You're Invited</h1> 
    <h6>You're busy - so we'll get right to the bullet points:</h6> 
    <div class="bullets"> 
    <ul> 
    <li>Sign Off is a fresh, dynamic email delivered After Hours</li> 
    <li>An evening de-brief of curated info that matters to you</li> 
    <li>Scan-able, scroll-able, relevant and unforgettable</li> 
    <li>A nightcap of today's news and tomorrow's to-do’s</li> 
    </ul> 
    <a href="signup.php">Sign Up</a> 
    </div> 
    <div class="links"> 
    <ul> 
    <li><img src="bn.jpg" /></li> 
    <li><img src="deals.jpg" /></li> 
    <li><img src="events.jpg" /></li> 
    <li><img src="sex.jpg" /></li> 
    <li><img src="media.jpg" /></li> 
    </ul> 
    </div> 
    </div> 
</div> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId : '<?php echo $facebook->getAppId(); ?>', 
     session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it 
     status : true, // check login status 
     cookie : true, // enable cookies to allow the server to access the session 
     xfbml : true // parse XFBML 
    }); 

    // whenever the user logs in, we refresh the page 
    FB.Event.subscribe('auth.login', function() { 
     window.location.reload(); 
    }); 
    }; 

    (function() { 
    var e = document.createElement('script'); 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

Answer 1

あなたはファンページ内のjQueryを使用することはできませんが、プレーンなJS（そしてもちろんCSS）と似ていますシンプルなモーダルを構築することができます。

もう1つの痛みは、最初に何らかの形でやりとりするまでユーザーの情報を共有しないことです（押されたボタンからのajax呼び出しやフォームが送信された場合など）。したがって、ユーザーがファンページとやりとりするまで、ユーザーIDはありません。

私はファンページでできるだけシンプルにしておき、さらなる機能が必要な場合は実際のFacebookアプリケーションにユーザーを送ってください。それで時間が節約され、多くの呪いが省かれます：P