Статический лайтбокс приложения Facebook iframe

Я работаю над созданием вкладки Facebook, используя холст iframe. Чего хочет клиент (и я очень не знаком с созданием приложений для 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>

person theflowersoftime    schedule 23.11.2010    source источник


Ответы (1)


Вы не можете использовать jQuery внутри фан-страницы, но вы можете создать простое модальное окно, похожее на простой JS (и, конечно же, CSS).

Еще одна головная боль в заднице заключается в том, что они не передают информацию о пользователе до тех пор, пока она сначала не взаимодействует каким-либо образом (например, вызов ajax при нажатии кнопки или при отправке формы). Таким образом, у вас не будет идентификатора пользователя, пока пользователь не взаимодействует с фан-страницей.

Я думаю, вы должны попытаться сделать это как можно проще с фан-страницей и отправить пользователя в реальное приложение facebook, если вам нужна дополнительная функциональность. Это сэкономит вам время и кучу проклятий :P

person alan.reid    schedule 28.01.2011