javascript - FB init function gives wrong version error

Question

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?

Answer 1

**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.