Facebook statique iframe app lightbox

Question

Je travaille sur la création d'un onglet Facebook en utilisant la toile iframe. Ce que le client veut (et je ne suis pas du tout familier avec la création d'applications Facebook, d'autant qu'il semble être en pleine mutation en ce moment), c'est d'avoir une page d'onglet statique, déjà créée, avec un bouton d'inscription. Lorsque l'utilisateur clique sur ce bouton, il souhaite disposer d'une fenêtre Lightbox de type Facebook avec un formulaire d'inscription propriétaire qui envoie les données à leur script API (PHP). Est-ce seulement possible? Je n'imagine pas que Facebook vous permette de mettre en lumière leur site, mais est-ce que je peux le faire dans mon onglet? Cela me donne une erreur en essayant d'inclure jquery, etc. Ou charger une nouvelle fenêtre dans le même iframe (maintenant le lien s'ouvre dans une nouvelle fenêtre)? Voici mon code simple pour la page statique:

<?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

Vous ne pouvez pas utiliser jQuery dans une fanpage, mais vous pouvez construire un modal simple qui ressemble à JS plaine (et CSS bien sûr).

Une autre douleur dans le cul, est qu'ils ne partagent pas les informations de l'utilisateur jusqu'à ce qu'il interagit en quelque sorte d'abord (comme un appel ajax à partir d'un bouton pressé ou si un formulaire est envoyé). Vous n'aurez donc pas d'ID utilisateur tant que l'utilisateur n'aura pas interagi avec la page de fans.

Je pense que vous devriez essayer de le garder aussi simple que possible avec la fanpage et envoyer l'utilisateur à une application Facebook réelle si vous avez besoin de plus de fonctionnalité. Cela vous permettra d'économiser du temps et beaucoup de malédictions: P