Facebook静态iframe应用程序灯箱

时间:2010-11-23 20:56:00

标签: php jquery facebook forms lightbox

我正在使用画布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>

1 个答案:

答案 0 :(得分:1)

你不能在粉丝页面中使用jQuery,但你可以构建一个看起来与普通JS(当然还有CSS)类似的简单模态。

屁股中的另一个痛苦是,他们不会共享用户的信息,直到它首先以某种方式进行交互(如按下按钮的ajax调用或发送表单)。因此,在用户与粉丝页面进行交互之前,您将不会拥有任何用户ID。

我认为您应该尝试使用粉丝页尽可能简单,并将用户发送到真正的Facebook应用程序,如果您需要进一步的功能。这将节省你的时间和许多诅咒:P