Facebook的JS SDK語法不承認

我不知道爲什麼它沒有找到我加載JS庫：Facebook的JS SDK語法不承認

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head id="Head1" runat="server"> 
     <link href="Content/Styles/Site.css" rel="stylesheet" type="text/css" /> 
     <title></title> 
     <script src="Content/js/jquery-1.3.2.min.js" type="text/javascript"></script> 
     <script src="Content/js/jquery.cookie.js" type="text/javascript"></script> 
     <script src="Content/js/FacebookAPI.js" type="text/javascript"></script> 
    </head> 
    <body> 


     <form id="form1" runat="server"> 
      <div id="facebookPhotos-iFrameContent"> 
       <div> 
        <p>Log into facebook by clicking on the button below</p> 
        <p id="facebook-LoginButtonContainer"> 

        <input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" /> 

        </p> 
        <p><asp:DropDownList ID="facebookAlbumDropdown" runat="server" /></p> 
        <div id="facebookPhotosContainer" /> 
       </div> 
      </div> 

      <div id="fb-root"></div> 

     </form> 


     <script type="text/javascript"> 

      var facebookApplicationID = '13xxxxxxxxxxxxx'; // edited out for this forum thread 


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

      };(function() 
      { 
       var e = document.createElement('script'); 
       e.async = true; 
       e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
       $('fb-root').appendChild(e); 
      }()); 


     </script> 
     <script type="text/javascript"> 


      var photosContainerDivID = 'facebookPhotosContainer'; 
      var loginButtonID = 'btnFacebookLogin'; 
      var dCookieValues = null; 
      var accessToken = null; 
      var userID = null; 


      // WIRE UP EVENTS // 
      $('#' + loginButtonID).click(function() 
      { 
       alert("inside $('#' + loginButtonID).click("); 
       LoginToFacebook(); 
      }); 

...

當網頁加載完畢後，我得到了以下錯誤：

FB is not defined 
[Break on this error] FB.getLoginStatus(function (response) 
FacebookAPI.js (line 195)

我已經加載了Facebook JS SDK，這是一個回調？

;(function() 
      { 
       var e = document.createElement('script'); 
       e.async = true; 
       e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
       $('fb-root').appendChild(e); 
      }());

不知道我在這裏失蹤。

更新：

 var facebookApplicationID = 'xxxxxxxxxxxxxxxx; 


     window.fbAsyncInit = function() { 
      alert("got here"); 
      // Initialize/load the JS SDK 
      // cookie is set to true to activate JS SDK cookie creation & management 
      FB.init({ appId: facebookApplicationID, status: true, cookie: true, xfbml: false }); 

      // now that the Facebook JS SDK is Initialized, continue with core logic 
      FacebookJsSdkInitializedCallback(); 

     }; 
     (function() { 
      var e = document.createElement('script'); 
      e.async = true; 
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
      $('fb-root').appendChild(e); 
     }()); 


    </script> 

    <form id="form1" runat="server"> 
     <div id="facebookPhotos-iFrameContent"> 
      <div> 
       <p>Log into facebook by clicking on the button below</p> 
       <p id="facebook-LoginButtonContainer"> 

       <%--<asp:ImageButton ID="btnFacebookLogin" runat="server" ImageUrl="images/facebookLoginBtn.jpg" />--%> 
       <input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" /> 

       </p> 
       <p><asp:DropDownList ID="facebookAlbumDropdown" runat="server" /></p> 
       <div id="facebookPhotosContainer" /> 
      </div> 
     </div> 

     <div id="fb-root"></div> 

    </form> 

    <script type="text/javascript"> 

     var photosContainerDivID = 'facebookPhotosContainer'; 
     var loginButtonID = 'btnFacebookLogin'; 
     var dCookieValues = null; 
     var accessToken = null; 
     var userID = null; 

     function FacebookJsSdkInitializedCallback() 
     { 
      // bind the login button 
      $('#' + loginButtonID).click(function() { 
       alert("inside $('#' + loginButtonID).click("); 
       LoginToFacebook(); 
      }); 

     }

我現在遇到這些錯誤，我仍然不知道爲什麼。我顯然現在增加了一個回調，所以我知道Init已經完成。但我認爲，我相信是裝載庫到頁面的代碼失敗：

$("fb-root").appendChild is not a function 
[Break on this error] $('fb-root').appendChild(e);

所以它的概率，因爲jQuery庫中尚未加載，但加載在此之前異步方法運行。所以不知道如何處理這個問題。你可以看到我的jQuery包含在頂部。

來源

2010-07-23 PositiveGuy

由於您正在使用FB API的異步加載方法，因此稍後調用它時，它不會被加載。你有兩個選擇：

1）切換到同步加載方法（見first example on this page）

2）一些回調添加到window.fbAsyncInit()功能，讓你知道當API被加載並準備使用：

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

function fbInitializedCallback() { 
    // WIRE UP EVENTS // 
    .... 
    LoginToFacebook(); 
}

順便說一句，如果您選擇使用異步方法，您應該在打開<body>標記後立即放入該代碼，這樣不會減慢頁面加載速度。

來源

2010-07-23 22:40:31 serg

好，所以你說的使用回調...然後你知道圖書館已加載...了。說得通。我認爲我的按鈕的登錄功能的綁定已經在異步完成後運行，但顯然不是，回調告訴你它已經完成了，這顯然是有意義的。因此，我現有的代碼可能試圖調用FB方法，就像在異步完成之前所說的那樣...回調會告訴您它已完成。 – PositiveGuy 2010-07-24 17:36:38

爲什麼我把這個異步腳本放在哪裏，我不明白爲什麼關於如何加載頁面。 – PositiveGuy 2010-07-24 21:39:17

@coffeeaddict：異步加載器將該腳本與頁面的其餘部分並行加載。所以越早放入頁面就越早開始加載（因此加載速度會更快）。把它放低不會給你任何好處，只有缺點。 – serg 2010-07-24 22:17:28

Facebook的JS SDK語法不承認

回答

相關問題