Facebook 정적 iframe 앱 라이트 박스

Question

캔버스 iframe을 사용하여 Facebook 탭을 만드는 중입니다. 클라이언트가 원하는 것은 (그리고 나는 현재 매우 유동적 인 것처럼 보이기 때문에 페이스 북 앱 제작에 익숙하지 않다.) 이미 생성 된 정적 탭 페이지를 가입 단추와 함께 넣는 것이다. 사용자가 해당 버튼을 클릭하면 API 스크립트 (PHP)로 데이터를 전송하는 독점적 인 가입 양식이있는 Facebook과 같은 라이트 박스 창이 필요합니다. 이것은 가능한가? 페이스 북에서 자신의 사이트를 라이트 박스로 만들 수 있다고 생각하지 않지만 내 탭에서 할 수 있습니까? jquery 등을 포함하려고 할 때 오류가 발생합니다. 또는 동일한 iframe에 새 창을로드하십시오 (링크가 새 창에서 열림). 당신은 팬 페이지 내에서 jQuery를 사용할 수 없지만 일반 JS (물론 CSS)와 비슷 간단한 모달을 구축 할 수 있습니다

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

다음은 정적 페이지 내 간단한 코드입니다.

엉덩이의 또 다른 고통은 어떻게 든 먼저 상호 작용할 때까지 사용자의 정보를 공유하지 않는다는 것입니다 (버튼을 눌렀거나 양식을 보내는 경우와 같은 아약스 호출과 같음). 따라서 사용자가 팬 페이지와 상호 작용할 때까지는 아무 사용자 ID도 갖지 않습니다.

나는 당신이 fanpage와 가능한 한 간단하게 유지하고 더 funcionality가 필요하면 실제 페이스 북 응용 프로그램에 사용자를 보내려고해야한다고 생각해. 그러면 시간과 많은 저주를 줄일 수 있습니다. P