Я потратил больше часа, пытаясь исправить это в своем приложении, и я хотел бы упомянуть пару основных моментов, которым нужно следовать , чтобы это сработало.
- Вы должны включить div с идентификатором fb-root, прежде чем включать файл all.js и перед любым кодом JS, использующим объект FB.
- Файл all.js должен быть включен ниже div fb-root и выше любого фактического кода JS, использующего объект FB
- Наконец, любой код JS, использующий объект FB, должен быть ниже div fb-root, а all.js включает
В моем коде не было ошибок, но он отказывался работать, потому что я включал all.js и мой JS-код в элемент , а мой div fb-root был в . Вот что мне пришлось изменить:
...
<head>
<!-- include jQuery so we can use window.load below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
...
</head>
<body>
<!-- the div has to come first which forces the JS include and code to be put below it -->
<div id="fb-root"></div>
<!-- then we have to include the all.js file -->
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<!-- and finally we can use the FB JS SDK and it will actually work :) -->
<script type="text/javascript" charset="utf-8">
FB.init({
appId: '...',
status: true,
cookie: true,
xfbml: true
});
jQuery(window).load(function(){
//resize our tab app canvas after our content has finished loading
FB.Canvas.setSize();
});
</script>
...
Очевидно, что 3 элемента, которые я упомянул, не обязательно должны быть расположены друг за другом, но они должны отображаться в указанном порядке в вашем исходном коде. Это действительно заставило меня задуматься, так что, надеюсь, это сэкономит кому-то время и разочарование :)