Facebook静态iframe应用程序灯箱

Question

I'm working on creating a Facebook tab using the canvas iframe. What the client wants (and I am very unfamiliar with Facebook app creation, especially as it seems to be very in flux right now) is to have a static tab page, which is already created, with a signup button. When the user clicks that button they want a Facebook-like lightbox window with a proprietary signup form that sends data off to their API script (PHP). Is this even possible? I don't imagine Facebook allows you to lightbox their site, but can I do it within my tab? It gives me an error when trying to include jquery,etc. Or load a new window in the same iframe (right now the link opens in a new window)? Here's my simple code for the static page:

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

You can't use jQuery inside a fanpage, but you can build a simple modal that looks similar with plain JS (and CSS of course).

Another pain in the ass, is that they don't share user's information until it interacts somehow first (like an ajax call from a button pressed or if a form is sent). So you won't have any userid until the user interacts with the fanpage.

I think you should try to keep it as simple as possible with the fanpage and send the user to a real facebook application if you need further funcionality. That will save you time and a lot of curses :P