В последнее время возникает проблема с приложениями iframe для холстов Facebook. Я установил наши настройки на "автоматическое изменение размера" и внедрил правильный вызов FB JS для изменения размера высоты (чтобы избежать нежелательных полос прокрутки), но он, похоже, не работает.
У кого-нибудь еще была эта проблема или придумали решение?
Спасибо!
Эрик
До тега </body> я написал следующий код.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo YOUR_APP_ID ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
(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>
И он отлично работает для меня.
Не имеет значения, находится ли height Fixed or Fluid в настройках расширенного приложения.
FB.Canvas.setAutoGrow(true); не работал в моем приложении, но я обнаружил, что пропустил код <div id="fb-root"></div>. Я просто положил его перед <script type="text/javascript"> и решил проблему.
Расширение на пару пунктов, отмеченных уже:
window.fbAsyncInit = function () {
FB.init({
appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
Это позволит динамически изменять высоту приложений. Также может также помочь установить явную ширину в вашем CSS, например:
html {
width: 760px;
overflow: hidden;
}
Роозбе находится на правильном пути с его ответом. Тем не менее, его код, скорее всего, приведет к ошибке (по крайней мере, в Firefox), поскольку упоминаются как старые, так и новые SDK (и они плохо взаимодействуют друг с другом).
Кроме того, просто использование нового SDK для регулировки высоты очень просто:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ height: 890 });
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Доступна официальная документация здесь.
FB.Canvas.setAutoResize будет устаревшим, и вы должны использовать FB.Canvas.setAutoGrow, поскольку он делает именно то, что вы хотите.
Автоматическое изменение размера не работает. Это основная ошибка, которая еще не зафиксирована в facebook.
Однако здесь код работает для проблемы:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
window.onload = function(){
FB_RequireFeatures(['CanvasUtil'], function(){
FB.CanvasClient.setCanvasHeight('1500px');
});
};
</script>
Ну... автоматическое изменение размера является ошибкой и только иногда работает
вы можете установить его вручную следующим образом: FB.Canvas.setSize({height: $('body'). Height()});
Если у кого-то все еще есть эта проблема, это потому, что ваш FB.init() никогда не вызывается. В моем случае у меня было это внутри моей функции jQuery document.ready. dont сделать это!
Поместите это вне вашего jQuery:
$(function() { ... jquery here... });
// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();