何时加载带有多个 Like 按钮和 Timeline 应用程序的 Facebook Javascript SDK？答案

【问题标题】：When to load Facebook Javascript SDK with multiple Like buttons and Timeline app?何时加载带有多个 Like 按钮和 Timeline 应用程序的 Facebook Javascript SDK？
【发布时间】：2015-03-05 14:42:12
【问题描述】：

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

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

我应该使用哪一个？

【问题讨论】：

标签： facebook oauth facebook-like

【解决方案1】：

不同的代码是 SDK 的异步和同步实现。第一个是异步的——代码将加载而不影响页面上的其他元素。第二个（仅包括脚本标签）是同步的。 Facebook 脚本将被加载，并在加载时保持页面向上。

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

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

您按钮上的 FB.login 应该可以与您的“赞”按钮一起使用。

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

};

【讨论】：