facebook - 何时加载带有多个“赞”按钮和时间线应用程序的 Facebook Javascript SDK？

Question

我想知道如果我在同一页面上有一个 Like 按钮和一个为 Timeline 应用程序调用 FB.login 的按钮，我应该如何加载 Javascript SDK。 “赞”按钮的代码使用以下内容:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=126380467442965";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

但对于 OAuth dialog对于应用程序，Facebook 建议使用:

<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
  // assume we are already logged in
  FB.init({appId: '123050457758183', xfbml: true, cookie: true, oauth: true});
  ...
</script>

我应该使用哪个？

Answer 1

不同的代码是 SDK 的异步和同步实现。第一个是异步——代码将在不影响页面上其他元素的情况下加载。第二个(只包括脚本标签)是同步的。 Facebook 脚本将被加载，它会在加载时保持页面。

异步实现通常更好——它应该让页面感觉更快。但是，由于 Facebook 代码是在页面之后加载的，因此在确定它已加载之前我们不能使用任何 FB 函数。因此，异步实现为我们提供了一个回调，它会在 SDK 加载时触发。

我认为最好使用第一个片段中的代码，但添加此代码以使用回调初始化 SDK。

您按钮上的 FB.login 应该可以正常工作，旁边还有您的赞按钮。

window.fbAsyncInit = function() {
    FB.init({
        appId: ...,
        status: true,
        cookie: true,
                xfbml: true,
        oauth: true
    });

};