何時加載與多個Like按鈕和Timeline應用程序的Facebook JavaScript SDK？

Question

我想知道如何加載Javascript SDK，如果我有一個Like按鈕和一個按鈕在同一頁面上調用時間軸應用程序的FB.login。對於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> 

一個我應該使用哪一個？

Answer 1

不同的代碼是SDK的異步和同步實現。首先是異步 - 代碼將加載而不會影響頁面上的其他元素。第二個（只包括腳本標籤）是同步的。 Facebook腳本將被加載，並且它將在加載時保持該頁面。

異步執行通常更好 - 它應該讓頁面感覺更快。但是，由於Facebook代碼在頁面後加載，我們不能使用任何FB函數，除非我們確定它已加載。所以，異步實現爲我們提供了一個回調，當SDK加載時會觸發回調。

我認爲最好使用第一個代碼片段中的代碼，但添加此代碼以使用回調初始化SDK。

您的按鈕上的FB.login應該與您喜歡的按鈕一起工作。

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

};