Facebook JS SDK语法无法识别

Question

Facebook JS SDK语法无法识别

我不知道为什么它找不到我为JS加载的库:

<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();
            });

...

Run Code Online (Sandbox Code Playgroud)

当我加载页面时,我收到以下错误:

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

Run Code Online (Sandbox Code Playgroud)

我已经将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);
            } ());

Run Code Online (Sandbox Code Playgroud)

不知道我在这里缺少什么.

更新:

        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();
            });

        }

Run Code Online (Sandbox Code Playgroud)

我现在收到这些错误,但我仍然不知道为什么.我显然现在添加了一个回调,所以我知道Init已经完成了.但是我认为将代码库加载到页面中的代码失败了:

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

Run Code Online (Sandbox Code Playgroud)

所以这很可能是因为jQuery库还没有加载但是这个异步方法在加载之前就已经运行了.所以不确定如何处理这个问题.你可以看到我的jQuery包含在顶部.

Answer 1

ser*_*erg 6

由于您正在使用FB API的异步加载方法,因此当您稍后调用它时,它不会被加载.您有两种选择:

1)切换到同步加载方法(参见本页的第一个示例)

2)添加一些回调window.fbAsyncInit()功能,以便您知道何时加载API并准备使用:

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

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

Run Code Online (Sandbox Code Playgroud)

顺便说一句,如果你选择使用异步方法,你应该在打开<body>标签后立即放置该代码,这不会减慢你的页面加载速度.

归档时间：	15 年，3 月前
查看次数：	1941 次
最近记录：	15 年，3 月前