Facebook 静态 iframe 应用灯箱

Question

我正在使用画布 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 调用）。因此，在用户与粉丝专页互动之前，您不会有任何用户 ID。

如果您需要更多功能，我认为您应该尽量让粉丝专页保持简单，并将用户发送到真正的 Facebook 应用程序。这将节省您的时间和很多诅咒：P