FBe is not a function even though it is defined

Question

<script>
         var userId = '1';
         var appId = 'MYAPPID';
         var appHost = 'https://localhost:44300/';
         // Api holder
         FBe = {};

         // FB JS SDK
         window.fbAsyncInit = function () {
             FBe = FB;
             FBe.init({
                 appId: appId,
                 status: true,
                 cookie: true,
                 xfbml: true,
                 frictionlessRequests: true
             }); 
         };

         (function (d, debug) {
             var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
             if (d.getElementById(id)) {
                 return;
             }
             js = d.createElement('script');
             js.id = id; 
             js.async = true;
             js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
             ref.parentNode.insertBefore(js, ref);
         }(document, /*debug*/ false));

    </script>
    <script>
        // Test
        function fbTest() {
            FBe.api('/me', function (response) {
                alert('Your name is ' + response.name);
            });
        }


        fbTest();
    </script>

my code above gives me this:

TypeError: FBe.api is not a function

Why am i getting this error?

How can i fix it?

Answer 1

You are calling fbTest() too early. You have to wait until after window.fbAsyncInit has been called. The FB API is not yet loaded.

Because you are loading the FB API asynchronously, you can't use it until after window.fbAsyncInit has been called. Any use of the FB API upon page load should be called from window.fbAsyncInit .