How to fully load ALL of facebook's JS features onto Connect website

Question

Well, here I am trying to integrate a website with facebook connect and I'm trapped in some strange ring of hell.

I have seen 2 ways of initializing the js on a fbc site, I've tried both repeatedly but they only do opposite halves of the whole job I need done.

<script src="http://connect.facebook.net/en_US/all.js"&gt;&lt;/script&gt;
...
$(document).ready(function(){
   FB.init({'appId':'000',
       'cookie':true,
       'status':true,
   });
});

This is what the official documentation says to do, however this does not load all the features. FB.Connect is undefined, ensureInit does not do anything and I'm screwed. The other code I have seen is

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
...
$(document).ready(function(){
   FB.init("000", "/xd_receiver.htm");
});

This at first seems to be great, because it loads the FB.Connect features... but it seems like this is the only set of features it loads as FB.ui is undefined, FB.getLoginStatus is undefined and all the other "core functions" are undefined...

Trying to include both the different js files leads to strange errors and half initialized sessions, I'm not sure what the difference between the 2 different types of FB.init calls are...

Thank you!

Answer 1

You first example describes the "new way" of doing things in new API recently introduced (several months ago), while you second example is what old API used to be (now deprecated).

The best way of loading FB js now is:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Which won't prevent page from loading until js is loaded.

There is no way of getting best from both worlds unfortunately, and you should start using new API for new projects if possible as support for the old one will be dropped sooner or later.

You can find new API docs here. 90% of the features from old API were carried over (often under different names), but some old goodies such as FB.ensureInit() are actually missing. Also some old API features are now require using FQL.

Answer 2

Turns out I was majorly confused, those two files and function calls apply to 2 different versions of the js lib... So when I use the new version, I should not expect FB.Connect to be defined and when I use the old version I should not expect FB.ui to be defined...

I could have been saved a day's time had the documentation been a lot more clear and had a lot less link rot.

Cheers!

Answer 3

The first example is using the new JS SDK, which is most definitely what you want to be using. The FeatureLoader URL will give you the older SDK. They cannot be loaded in at the same time as you've discovered, so just use the new one for the latest and greatest.