Using the Facebook Javascript SDK is almost essential for interactive applications as it enables your application to access the Graph API via Javascript.
And to provide the best experience possible to your users, here are some tips:
Use Asynchronous Loading of the SDK
While you can simply include the JS-SDK, asynchronous loading can give your website a performance boost and helps loading your pages faster:
The most efficient way to load the SDK in your site is to load it asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots/spiders.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Back to topPlacement of the SDK
UPDATE: Facebook is recommending adding the SDK snippet after the opening <body> tag. But this is really the developer call. Depending on your application, you may choose having all your scripts before the closing </body> tag.
<div id="fb-root"></div>
<script src="path/to/other/js/libraries/jquery.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>If you are not sure what to do, just follow Facebook advise and add it directly after the opening tag.
Delay Facebook related tasks till the SDK is loaded
Using the asynchronous method and placing all your Facebook related code within the window.fbAsyncInit function would be enough but if you have some methods (that needs to call Facebook) outside this function then you can have a flag to insure that any call is performed only when the library is loaded, something like:
<div id="fb-root"></div>
<script>
var isLoaded = false; // Our flag
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
isLoaded = true;
};
// A function that requires calling Facebook
function myFunc(text) {
// your tasks here
// Facebook call
if(isLoaded) {
FB.ui(
{
method: 'feed',
name: 'Test Dialogs',
message: text
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
}
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>Or you can use the following approach with normal library loading (also possible with asynchronous but not recommended!):
<div id="fb-root"></div>
<script src="//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
oauth: true, // enable OAuth 2.0
channelUrl: '//www.yourdomain.com/channel.html' //custom channel
});
function myFunc(text) {
// your tasks here
// Facebook call
if(typeof FB != 'undefined') {
FB.ui(
{
method: 'feed',
name: 'Test Dialogs',
message: text
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
}
</script>But you need to make sure you don’t define FB in your own JS code or libraries!
User Auto-size option and the FB.Canvas.setSize() method
While this is up to the developer’s preferences, developers are already limited in width inside Facebook (canvas or page tabs) which means another annoying scrollbar would hurt the user experience not to mention that scrollbars within pages may scare some users.
So to avoid scrollbars, set the “IFrame Size” option in your “Facebook Integration” tab inside your application settings to “Auto-resize” then use the FB.Canvas.setSize() whenever needed:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
FB.Canvas.setSize();
};
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}UPDATE: A good place to put your FB.Canvas.setSize(); call is when the “window” finishes loading!
Why, you ask? Well, today I had to place an image in a Facebook Page Tab. Seems obvious enough, but the thing is having the FB.Canvas.setSize(); call inside the window.fbAsyncInit wasn’t enough!
Because this would fire even if images haven’t loaded fully yet. And this caused the ugly scrollbars!
So the solution was:
window.onload = function () {
FB.Canvas.setSize();
}Please note that this would override other onload events! so it’s adviced to search online for a better solution (1 2). Also note that jQuery and most well-known JS libraries support this.
Also note that you may use the approach described in the previous step just in case something went wrong and the SDK didn’t load!
Avoid including the library more than once
People that want to include more than one XFBML version of the Like Plugin mostly “copy/paste” the code generated by Facebook, which would result on multiple inclusion of the fb-root DIV and the JS-SDK. Instead you can do something like:
<fb:like href="" send="true" width="450" show_faces="true" font=""></fb:like> <!-- content here --> <fb:like href="" send="true" width="450" show_faces="true" font=""></fb:like> <!-- content here --> <div id="fb-root"></div> <script src="//connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script>Back to top
Custom Channel URL
Facebook has further explained the importance of the channel file:
This is an option that can help address three 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. Third, this will prevent inclusion of extra hits in your server-side logs.
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
</script>The content of the channel.html file is just a single line (the JS Library):
<script src="//connect.facebook.net/en_US/all.js"></script>
Facebook also suggest to cache the file if you have a server-side access:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>Do you have more tips? share them in the comment section!
Back to top
Twitter Love!
Pingback: Programmers’ / Webmasters’ Corner: Real-life problems of the Windows Phone 7 browser and fixing them | SEARCH ALL