Facebook靜態iframe應用燈箱

Question

我正在使用canvas iframe創建Facebook選項卡。客戶想要的是什麼（我對Facebook應用程序的創建非常陌生，特別是現在看起來非常流行），就是擁有一個已經創建的靜態標籤頁，並帶有註冊按鈕。當用戶點擊該按鈕時，他們需要一個具有專有註冊表單的Facebook式燈箱窗口，將數據發送到其API腳本（PHP）。這甚至有可能嗎？我不認爲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）類似。

在屁股的另一個痛苦是，他們不共享用戶的信息，直到它首先以某種方式進行交互（如按下按鈕或發送表單時的ajax調用）。因此，在用戶與粉絲頁面進行交互之前，您不會有任何用戶標識。

我認爲你應該儘量保持它與粉絲頁一樣簡單，並且如果你需要進一步的funcionality將用戶發送到真正的facebook應用程序。這將節省您的時間和很多詛咒：P