54

I'm using the Facebook JS sdk, and I have created a new App today. Everything is configured properly. Using init function like:

window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxx', // App ID
      status     : false, 
      version:  'v2.0',
      cookie     : true, 
      xfbml      : false  // parse XFBML
    });
};

    (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/pl_PL/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));

but I have an error: "Uncaught Error: init not called with valid version " Was trying also other versions like: 2.1, 2.2 and still no luck. What am I doing wrong here?

4

20 Answers 20

35

**Disclaimer - This is purely speculation. Seems to have solved my problem.


I've had this issue on a recent project. I think this is a latency issue. The Facebook SDK requires that <div id="fb-root"></div> be on the page. This should be the first thing after the opening body tag. After this, you may see your initialization code.

For me, this issue was not consistent. I would occasionally see the bug and sometimes I would not. Thus, my conclusion of it being a latency problem. If the SDK cannot find the fb-root, then it must create one. Herein, is where I believe the latency issue exists.

Try adding this just after your opening body tag, but before your FB.init({});.

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

This seems to have solved the issue for me and will hopefully help others as well. The v1.0 documentation discusses the reason for fb-root, but the v2.0 docs make no mention of the item, likely because the init script will add it for you if it does not find it.

10
  • 1
    yes, i have <div id="fb-root"></div> just after body opening. Interesting that when im testing now, the v2.0 is working and i have no errors. I don't have errors even if im entering v5 as api version or some other string :) something on the Facebok api must have been changed.
    – abiku
    Commented Jul 5, 2014 at 18:48
  • 2
    hmmm today didn't work. I put at footer then worked. Commented Sep 17, 2014 at 1:38
  • 1
    I'm getting this annoying error intermittently even though I already have fb-root just after my opening body tag. When I move fb-root to just before the end of the page the error stops, but I get a warning that fb-root wasn't found and is being auto-created. Commented Mar 9, 2015 at 15:47
  • 1
    Three months later and this issue is still plaguing us - we have no idea what is causing it. We've tried everything we can think of, including upgrading to 2.3 and trying the tags in various relative positions. Removing the fb-root div doesn't fix it after all. On looking into the source of the error in sdk.js my colleague @StuR found it's being thrown by the function getVersion, which is checking for the Flash plugin in the browser. Very weird and very frustrating! Commented Jun 10, 2015 at 13:57
  • 1
    I found this: stackoverflow.com/questions/27621187/… and it worked for me.
    – Marty
    Commented Aug 5, 2015 at 19:00
35

I got it working by using all.js instead of sdk.js.
In your case, it would look like:

js.src = "//connect.facebook.net/pl_PL/all.js";

instead of

js.src = "//connect.facebook.net/pl_PL/sdk.js";
1
  • In my case including sdk.js it didn't fire window.fbAsyncInit using all.js it works... Commented Nov 5, 2016 at 16:30
12

Add &version=v2.0 to js.src, as follows:

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
2
  • 1
    how in the world did you figure this out?
    – rashadb
    Commented Mar 24, 2016 at 17:19
  • Can't quite remember, I think I must have seen that SDK URL somewhere else with a version number on it, so I tried it here. :) Commented Mar 25, 2016 at 7:25
6

This problem plagued me for a while. I tried many of the ideas listed here such as changing the version number and moving/removing the fb-root.

What is finally working well for me is to delete the entire window.fbAsyncInit function and specify the init properties in the hash of sdk.js. For example:

<script type="text/javascript">
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js#version=v2.2&appId=12345&status=true&cookie=true&xfbml=true";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

Of course you may omit a parameter to use its default value.

I can't find this approach documented anywhere so use it at your own risk. Luckily I was upgrading an older site from v1.x to v2.x and it used this technique when loading all.js.

1
  • I think this is how facebook now uses this by default. I copied it directly from the site and it uses the same format. Commented Nov 2, 2015 at 18:29
5

i replaced this

js.src = "//connect.facebook.net/en_US/sdk.js";

with this

js.src = "//connect.facebook.net/en_US/all.js";

and worked :)

0
3

This was the only fix that would eliminate the error 100% of the time.

You can recreate this error by deleting your FB.init. Which confirms that although the sdk.js had been loaded and the FB namespace existed, FB.init hadn't been called by the time we were trying to use FB methods elsewhere in our scripts.

So we need to ensure that FB.init has been called. I used a similar approach to this answer:

if (typeof(fbApi) === 'undefined') { fbApi = {}; }
fbApi = (function () {

    var fbApiInit = false;

    var awaitingReady = [];

    var notifyQ = function() {
        var i = 0,
            l = awaitingReady.length;
        for(i = 0; i < l; i++) {
            awaitingReady[i]();
        }
    };

    var ready = function(cb) {
        if (fbApiInit) {
            cb();
        } else {
            awaitingReady.push(cb);
        }
    };

    window.fbAsyncInit = function () {
      FB.init({
        appId  : '<?php echo esc_js( $facebook_app_id ); ?>',
        status : true,
        cookie : true,
        xfbml  : true,
        version: 'v2.0'
      });

      fbApiInit = true;
      notifyQ();
    };

    return {
        /**
         * Fires callback when FB is initialized and ready for api calls.
         */
        'ready': ready
    };

})();

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

Then, elsewhere, any reference to FB can be made like this:

        fbApi.ready(function() {
          FB.XFBML.parse($("#fb-comments"));
        });
0
3

This was happening to me too with great inconsistency. Somewhere my hunch said, it is got to be a timing issue. Further debugging, found out an error in developer console by manually executing "FB.login()". The error said, "init not called with valid version".

In my case, I was adding //connect.facebook.net/en_US/sdk.js as a script tag in the header of the html page and the window.fbAsyncInit came in another file just after that. This pointed to me as a timing issue and hence I swapped these 2 script tags. Now once I had included window.fbAsyncInit before including //connect.facebook.net/en_US/sdk.js, the problem was gone. Hope this helps others.

3

For single page applications (React in my case)

In single page applications you have less control about the order in which the code will run. Sometimes the script will have loaded by the time you call your code, sometimes not.

To make it work regardless of whether the facebook script has already loaded or not, I do a check whether the FB global variable is already defined at the moment of running the code. If so, I just do a normal initialize, otherwise I provide the callback.

This is my code:

export function initializeFacebookSdk() {

  /* Asynchronous flow: if the global 'FB' variable is still undefined,
     then the facebook script hasn't loaded yet, in that case, provide
     a global callback that will be called by the facebook code. If the 
     variable is already present, just call the code right away and forget
     about the callback. */
  if(window.FB === undefined) {
    console.log('FB undefined -> provide callback');
    window.fbAsyncInit = function() {
      initialize();
    };
  }
  else {
    console.log('FB defined -> call init right away');
    initialize();
  }

  function initialize() {
    window.FB.init({
      appId      : '492331311256888',
      cookie     : true,
      xfbml      : true,
      version    : 'v3.2'
    });    
  }
}

In my html file I just provide the script given by facebook, and in my code I can call initializeFacebookSdk() wherever and whenever I want:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My application</title>
  </head>
  <body>    
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>

    <script>    
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "https://connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

    <div id="root"></div>
  </body>
</html>
1
  • Tried it in my react app. Still getting error occasionally Commented Mar 5, 2019 at 13:29
1

Try this code:

setInterval(
function() { FB.api('/me/', 
    function(r) { console.log('response: ', r); })
}, 5000);

I noticed then when I'm trying get info fb still be not initialized.

I fixed it by adding my initialization code to end of:

FB.getLoginStatus(function(response) { init(); });
1

I resolved this error by loading the script on document ready instead of document load.

For example, this gave the error about 10% of the time:

$(window).load(function(){
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
});

whereas this works all the time:

$(window).ready(function(){
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
});
1

Watch out when you call FB api after init. Init seems synchronous, but window.fbAsyncInit is not, so you have to wait for its execution. My example to reproduce is in phonegap browser platform, but after I checked the facebook plugin code I'm sure it can be reproduced in pure javascript environment also.

This was my code that fires the error:

if (window.config.debug_mode) {
    facebookConnectPlugin.browserInit('xxxxxxxxx', function() {
    });
}
// getLoginStatus is wrong here as window.fbAsyncInit is not yet completed
facebookConnectPlugin.getLoginStatus(function(status) {
    alert('logged: ' + JSON.stringify(status));
}, function(error) {
    alert('error: ' + JSON.stringify(error));
});

Here is how I fixed it:

if (window.config.debug_mode) {
    facebookConnectPlugin.browserInit('xxxxxxxxx', function() {
        facebookConnectPlugin.getLoginStatus(function(status) {
            alert('logged: ' + JSON.stringify(status));
        }, function(error) {
            alert('error: ' + JSON.stringify(error));
        });
    });
}

I'm sure that the following code will throw in browser, but I don't have time to verify it:

window.fbAsyncInit = function fbAsyncInit () {
    version = version || 'v2.6'

    FB.init({
        appId: appId,
        xfbml: false,
        version: version
    })
}
// now calling any FB function here will rise this error
0

We use our own API that does this:

   _loadFacebookApi: function(callback) {
        logger.info('_loadFacebookApi');

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "https://connect.facebook.net/en_US/sdk.js";


        }(document, 'script', 'facebook-jssdk'));

        var fbScript = window.document.getElementById('facebook-jssdk');

        fbScript.onload = fbScript.onreadystatechange = (function() {

            logger.info('fbScript onLoad');

            window.FB.init({
                version: 'v2.1',
                appId: '',
                channelUrl: '/fbchannel.html',
                status: false,
                cookie: true,
                xfbml: true,
                logging: true,
                oath: true
            });

            this.dispatch(constants.FACEBOOK_INIT_SUCCESS);

            if(callback){
                callback();
            }

        }.bind(this));

    }
0

I had the same problem when I tried to embed a simple Facebook post in an article I was writing.

<div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/feyenoord/posts/10153224326681816:0" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/feyenoord/posts/10153224326681816:0"><p>Een teleurstellende middag in De Kuip. Ook ADO Den Haag bleek vanmiddag te sterk voor Feyenoord. http://bit.ly/1UA3ZxZADO Den Haag too strong for Feyenoord. http://bit.ly/1UA6rEN</p>Posted by <a href="https://www.facebook.com/feyenoord/">Feyenoord Rotterdam</a> on&nbsp;<a href="https://www.facebook.com/feyenoord/posts/10153224326681816:0">Sunday, January 31, 2016</a></blockquote></div></div>

When I debugged the Facebook sdk.js I saw that the .getVersion returned "undefined" and thus not rendering the widget.

Apparently Facebook can't handle passing query parameters seperated by &amp; instead of & when loading the sdk.js. I had changed my code to &amp; for validation reasons.

Works:        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
Doesn't Work: js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3";

Facebook sdk debug getVersion

1
  • how do you get sdk.js:formatted? Is this a chrome plugin? Commented Mar 9, 2018 at 1:12
0

The error happened each time I redirected to a page (Edge Browser) that had a fb-page plugin.

If I refreshed the page it would work. If I got there through a hyperlink it would throw the error.

Fixed it by adding sdk.js?d=" + new Date().toISOString(); to the script.

(function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js?d=" + new Date().toISOString();
        fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
1
  • that's awful! :-/ Commented Mar 7, 2018 at 5:10
0

You are using the cordova-plugin-facebook4 plugin, and that is a custom error message that means that the init hasn't finished when the facebook api function is called. Since the plugin does not give a waitForInitialize using setTimeout and then retrying the api method is the best bet.

var retryFunc = (iteration) => {
    return new Promise((s, f) => facebookConnectPlugin.getLoginStatus(s, f))
    .then(authentication => authentication.status === 'connected')
    .then(isLoggedIn => {
        /* Your Code Here */
    })
    .catch(failure => {
        console.log(`Waiting for Facebook Init. Iteration: ${iteration || 0}`);
        if((iteration || 0) < 10) { 
            return new Promise((s, setTimeout(() => s(), 1000)
            .then(() => retryFunc(null, (iteration || 0) + 1);
        }
        else { return Promise.reject({Error: 'Failed to check login status.', Detail: failure}); }
    });
};

retryFunc();
/* Or replace getLoginStatus with your api call. */
3
  • Not wrong but dirty! See my post below for better solution. I'm using exactly the same plugin.
    – user732456
    Commented Aug 23, 2016 at 16:51
  • I agree, except if you want to call multiple facebook methods, you don't want to call the init function over and over again. The functions really should be updated to wait for init, or you can write your own wait for init, returning a promise.then(() => facebookConnectPlugin.METHOD()). Commented Aug 24, 2016 at 11:50
  • This was meant to be in the application initialization, so there is no discussion. browserInit should be called only once for sure :)
    – user732456
    Commented Aug 24, 2016 at 12:12
0

SINGLE INCLUDE—make sure the Facebook JavaScript API isn't included more than once on your page.

(This was my problem)

0

Make sure you're using https:// in the URL

js.src = "https://connect.facebook.net/en_US/sdk.js";

I would not have believed this either, but the only difference between what Facebook has in their current sample code and what I have is https:// instead of // for the url.

Updating to be https:// seems to have fixed it for me and I cannot duplicate the error.

Also if you're doing any checks elsewhere in your code to see if FB is defined make sure to check if (window.FB) and not if (FB) or you will get an error.

// call after manually adding DOM nodes containing FB widgets
if (window.FB)
{
    window.FB.XFBML.parse()
}

If you're using typescript you need to add something like this:

interface Window
{
    FB: IFacebook;
}

interface IFacebook
{
    XFBML: any;
    ui: any;
    getLoginStatus(callback: (response: { status: string }) => any);
    login(callback: (response) => any, options: any);
    logout(callback: () => any);
    Event: any;
    api(url: string, callback: (response: any) => any);
}
0

I had the same problem, and I think I found the root cause!

Root cause

In my case, we were injecting FB SDK dynamically to our customer's website. However, some of our customers were already added FB SDK via other plugins. Those plugins have different app id and version.

So depending on latency some plugins call init before/after ours

Solution

If you're the owner of the site where you're injecting the SDK, make sure no other plugins are injecting FB SDK and calling init different version and app id

If you don't own the site, then at least try to inject the SDK before anyone else and prefer not async

I also reported the same to FB. They told not to call init separately, pass init params directly in the rule. I've attached the code that I use:

if (!document.getElementById("fb-root")) {
      // create div required for fb
      const fbDiv = document.createElement("div");
      fbDiv.id = "fb-root";
      document.body.appendChild(fbDiv);
      // Run any script after sdk is loaded
      window.fbAsyncInit = () => {
        //
      };
      // inject sdk.js
      (function(d, script) {
        script = d.createElement("script");
        script.type = "text/javascript";
        script.async = true;
        script.src =
          "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2&appId=" +
          process.env.REACT_APP_FB_APP_ID +
          "&autoLogAppEvents=1";
        d.getElementsByTagName("head")[0].appendChild(script);
      })(document);
    }

0

In my case it was an api version problem, as suggested by the error message.

Let the version loaded in the FB script tag match the one in your FB initialization script, by specifing the same when loading the sdk (in the hash), for instance for version 4.0:

<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"></script>

and in your script like:

window.fbAsyncInit = function() {
    FB.init({
        appId: XXX,
        autoLogAppEvents: true,
        xfbml: true,
        version: 'v4.0' //<------------- same version
    });
};
-3
window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxx', // App ID
      status     : false, 
      version:  'v2.0',
      cookie     : true, 
      xfbml      : false  // parse XFBML
    });
};

There is error version: 'v2.0', This is not valid code

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.