Facebook JS SDK Syntax not recognized

Question

I don't know why it's not finding the libraries I loaded for 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();
            });

...

When I load the page I get the following errors:

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

I've loaded the Facebook JS SDK in the what is this a callback?

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

not sure what I'm missing here.

UPDATED:

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

        }

I'm getting these errors now and I still don't know why. I've obviously now added a callback so I know that the Init is done. But I the code that I believe is loading the library into the page is failing:

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

So it's prob because the jQuery library was not loaded yet but this async method ran before it was loaded. So not sure then how to handle this. You can see my jQuery includes at the top.

serg · Accepted Answer · 2010-07-23 22:40:31Z

6

As you are using async loading method for FB API, it is not getting loaded when you are calling it few lines later. You have two options:

1) Switch to synchronous loading method (see first example on this page)

2) Add some callback to window.fbAsyncInit() function so you know when API is loaded and ready to use:

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

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

BTW if you choose to stay with async method you should really put that code right after opening <body> tag, it wouldn't slow down your page load.

answered Jul 23, 2010 at 22:40

serg

112k78 gold badges326 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

PositiveGuy Over a year ago

ok so you're saying use the callback...then you know the library is loaded...got it. Makes sense. I figured that my binding of the Login function to my button was already being run after the async was done but apparently no, the callback tells you it's definitely done which make obvious sense. So my existing code was probably trying to call FB methods as you are saying before the async was done...which the callback would tell you it's done.

PositiveGuy Over a year ago

why does it matter where I put this async script, I don't get why in regards to how the page loads.

serg Over a year ago

@coffeeaddict: Async loader loads that script in parallel with the rest of the page. So the earlier you put in on the page the earlier it would start loading (and as a result would complete loading faster). Putting it lower doesn't give you any advantages, only disadvantages.

PositiveGuy Over a year ago

got it. Yea I knew it loaded parallel which is what asynchronous was all about but I did not think about the fact that it would start sooner cause I did not know what really loads first with the DOM. I guess everything just loaded in order of what's on the page. Sometimes I just tend to think there is more going on here but there's not.

PositiveGuy Over a year ago

so the ;(function () { var e = document.createElement('script'); e.async = true; is not a callback? And I guess that's actually spitting the include to the .js file of the SDK on the page??

|

Collectives™ on Stack Overflow

Facebook JS SDK Syntax not recognized

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related