FB.init
Method to initialize the library.
Typical initialization enabling most optional features:
<div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : 'YOUR APP ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); </script>
The best place to put this code is right before the closing </body>
tag.
Asynchronous Loading
The library makes non-blocking loading of the script easy to use by providing the fbAsyncInit
hook. If this global function is defined, it will be executed when the library is loaded:
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR APP ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>
The best place to put the asynchronous version of the code is right after the opening <body>
tag. This allows Facebook initialization to happen in parallel with the initialization on the rest of your page.
Note: Some UI methods like stream.publish and stream.share can be used without registering an application or calling this method. If you are using an appId, all methods must be called after this method.
You can determine whether or not the FB library has loaded by looking at window.fbAsyncInit.hasRun
. If window.fbAsyncInit.hasRun
is true
then the library has loaded (however, this doesn't indicate whether or not the FB.init()
has been called yet).
If FB.init has not been called yet than FB._apiKey is null. Following code block checks _apiKey and initializes FB.
if(typeof(FB) === "object" && FB._apiKey === null) { FB.init({ appId : 'YOUR APP ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }
Custom Channel URL
This is an advanced option that can help address two specific known issues. First, when auto playing audio/video is involved, the user may hear two streams of audio because the page has been loaded a second time in the background for cross domain communication. Second, if you have frame busting code, then you would see a blank page. In these scenarios, you may provide the optional channelUrl parameter:
<div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : 'YOUR APP ID', channelUrl : 'http://example.com/channel.html' // custom channel }); </script>
The contents of the channel.html file should be this single line:
<script src="http://connect.facebook.net/en_US/all.js"></script>
The channelUrl MUST be a fully qualified absolute URL. If you modify the document.domain, it is your responsibility to make the same document.domain change in the channel.html file as well. Remember the protocols must also match. If your application is https, your channelUrl must also be https. Remember to use the matching protocol for the script
src
as well. You MUST send valid Expires headers and ensure the channel file is cached by the browser. We recommend caching indefinitely. This is very important for a smooth user experience, as without it cross domain communication becomes very slow.
Important: If you do not specify a custom channelUrl, you should remove the following from your logs to ensure proper counts
- Matches against user-agent: "facebookexternalhit/*"
- Pageviews containing "fb_xd_bust" or "fb_xd_fragment"
- Track clicks from FB-hosted iframes separately from referrers (http://www.facebook.com/plugins/ http://www.facebook.com/plugins/like.php)
Parameters
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options | Object |
|