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语法不承认

回答

相关问题