2011-05-08 1 views
2

a Facebook app을 FBML에서 iFrame (PHP SDK 사용)으로 변환하고 이전에 (로고, 플래시 게임 및 아래 링크 3 개가있는 라인) 동일한 양의 콘텐츠에 대해 수직 스크롤바가 표시됩니다. 하지만 이전에는 스크롤 막대가 없었습니다.Facebook iFrame 앱 - 세로 스크롤 막대를 없애고 있습니까?

앱 설정 자동 크기 조정을 설정하면 콘텐츠의 하단 부분이 전혀 표시되지 않습니다. 이는 나쁘다. 플래시 게임은 재생할 수 없습니다.

나는 주위를 둘러 보았고 모든 제안 된 해결책에는 자바 스크립트가 관련되어 있지만 실제로 PHP SDK를 사용하고 있습니다. PHP/CSS 전용 솔루션이 없습니까? 내 현재 코드 아래

:

또한 내 PHP 스크립트가

<html> 
<body> 
..... 
</body> 
</html> 

를 인쇄하도록되어있는 경우 잘 모르겠어요

<?php 

require_once('facebook.php'); 

define('FB_API_ID', 'XXX'); 
define('FB_AUTH_SECRET', 'XXX'); 

$facebook = new Facebook(array(
      'appId' => FB_API_ID, 
      'secret' => FB_AUTH_SECRET, 
      'cookie' => true, 
      )); 

if (! $facebook->getSession()) { 
    printf('<script type="text/javascript">top.location.href="%s";</script>', 
     $facebook->getLoginUrl(
       array('canvas' => 1, 
         'fbconnect' => 0, 
         #'req_perms' => 'user_location', 
     ))); 
    exit(); 
} else { 
    try { 
     $me = $facebook->api('/me'); 

     $first_name = $me['first_name']; 
     $city  = $me['location']['name']; 
     $female  = ($me['gender'] == 'male' ? 0 : 1); 
     $avatar  = 'http://graph.facebook.com/' . $me['id'] . '/picture?type=large'; 

    } catch (FacebookApiException $e) { 
     exit('Facebook error: ' . $e); 
    } 
} 

# print the logo, the flash game and 3 links 

?> 

? 현재 나는 몸 안에있는 것만 인쇄합니다.

그리고 나는 PHP의 헤더 ('위치 : ....')로 내 코드에 top.location.href = ....를 교체하는 것이 좋습니다 궁금;?

<html> 
<head> 
<script type="text/javascript"> 
window.fbAsyncInit = function() { 
     FB.Canvas.setSize(); 
} 

function sizeChangeCallback() { 
     FB.Canvas.setSize(); 
} 
</script> 
</head> 
<body> 
...... 

<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script> 
FB.init({ 
     appId : '<?php print(FB_API_ID); ?>', 
     status : true, 
     cookie : true, 
     xfbml : true 
}); 
</script> 
</body> 
</html> 

하고 설정 탭에서을 자동 크기 조정 IFrame을 크기을 설정

답변

2

비동기 메서드를 사용하려는 경우에는 그 안에 많은 FB 코드를 넣는 것이 좋습니다. 아래처럼 뭔가 작동합니다 : 당신이 (등 ... 아약스의 내용을로드, 새 탭을 클릭) 레이아웃을 변경할 때마다

<html> 
<head> 
</head> 
<body> 
<div id="fb-root"></div> 
<script> 
window.fbAsyncInit = function() { 
    FB.init({appId: 'your app id', status: true, cookie: true, 
      xfbml: true}); 
    FB.Canvas.setSize(); 
}; 

function sizeChangeCallback() { 
    FB.Canvas.setSize(); 
} 
(function() { 
var e = document.createElement('script'); e.async = true; 
e.src = document.location.protocol + 
    '//connect.facebook.net/en_US/all.js'; 
document.getElementById('fb-root').appendChild(e); 
}()); 
</script> 
</body> 
</html> 

는 이제 sizeChangeCallback() 함수를 호출합니다.

0

좋아, 나는 the solution을 발견했습니다.

header ('Location :'. $ url);은 어떤 이유로 작동하지 않습니다.

+1

1)은 iframe이 내부에서 작업하기 때문에'header' 당신이'window.fbAsyncInit' 방법 안에 ** 모든 ** FB 관련 JS 기능을 포장한다) 작동하지 않습니다 (내가 여기에 의미' FB.init') – ifaour

+0

안타깝게도 : fbAsyncInit 제안 (http://developers.facebook.com/docs/reference/javascript/에서 가져옴)을 시도했으며 Google 크롬에서는 작동하지 않습니다 : iframe 콘텐츠는 하단에서 잘립니다. –

+1

[this] (http://pastebin.com/aDNpR3Kf)와 같은 것이 작동해야합니다. – ifaour

0

블로그에 PHP-SDK를 사용하여 광범위한 튜토리얼을 작성했습니다. 스크롤바를 제거하는 것 외에도 팬 게이트 (Fan-Gate)와 간단한 공유 버튼을 만드는 방법을 보여줍니다. 나는 그와 함께 당신의 어떤 사람들을 도울 수 있기를 바랍니다 :

http://net-bites.de/facebook/tutorial-how-to-create-facebook-iframe-pages-for-timeline-width-810px-with-fan-gate-and-share-button/

+1

이 링크가 질문에 대답 할 수 있지만, 여기에 답변하고 참조 용 링크를 제공하십시오. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않게 될 수 있습니다. –

0

내 Sollution 때마다 작품! 이것을 추가하기 전에 몸이 넘쳐 흐르게하십시오.

<div id="fb-root" class="fb_reset"><script async="" src="https://connect.facebook.net/en_US/all.js"></script></div> 
    <script type="text/javascript"> 
     window.fbAsyncInit = function() { 
      FB.init({appId: '293887700673244', status: true, cookie: true, xfbml: true, oauth: true}); 
      window.setTimeout(function() { 
       FB.Canvas.setAutoGrow(); }, 250); 
     }; 

     (function() { var e = document.createElement('script'); 
      e.async = true; 
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
      document.getElementById('fb-root').appendChild(e); }()); 
    </script>