Various JavaScript framework are present, popular ones are discussed i.e. Angular and jQuery.
Angular JS
You can integrate the Facebook SDK for JavaScript with AngularJS. However as our SDK has to work for the web and not for a particular framework, we do not offer a AngularJS module.
Loading the Facebook SDK for JavaScript – For adding the Facebook SDK for JavaScript to your app we recommend to follow the how-to Facebook authentication in your AngularJS web app or other guides posted on https://docs.angularjs.org/guide.
Use the latest SDK Version – When following any guide please make sure to load the latest SDK file sdk.js:
// Old SDK (deprecated)
js.src = “https://connect.facebook.net/en_US/all.js”;
// New SDK (v2.x)
js.src = “https://connect.facebook.net/en_US/sdk.js”;
and provide a Graph API version (currently v2.4) in the FB.init() call:
$window.fbAsyncInit = function() {
FB.init({
appId: ‘{your-app-id}’,
status: true,
cookie: true,
xfbml: true,
version: ‘v2.4’
});
};
Handling Callbacks – The Facebook SDK for JavaScript does not support the concept of promises. As a workaround you can bundle your Facebook for JavaScript SDK calls (for example) into a service:
// …
.factory(‘facebookService’, function($q) {
return {
getMyLastName: function() {
var deferred = $q.defer();
FB.api(‘/me’, {
fields: ‘last_name’
}, function(response) {
if (!response || response.error) {
deferred.reject(‘Error occured’);
} else {
deferred.resolve(response);
}
});
return deferred.promise;
}
}
});
Use the service for example like this:
$scope.getMyLastName = function() {
facebookService.getMyLastName()
.then(function(response) {
$scope.last_name = response.last_name;
}
);
};
jQuery
Both jQuery and the JavaScript SDK provide their own solutions for deferring code execution until the libraries have loaded.
Add jQuery to your document head, and implement the $(document).ready() method, which will execute when the DOM is complete and jQuery is instantiated. Your page will look something like this:
<html>
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>
<link rel=”stylesheet” href=”style.css” />
<title>jQuery Example</title>
<script>
$(document).ready(function() {
// Execute some code here
});
</script>
</head>
Instead of importing the Facebook JavaScript SDK with the default async script, use jQuery’s getScript() method to import the SDK from the correct URL for your user’s locale. You can leave out the protocol from the beginning of the URL, and this will serve a matching protocol for the current URL.
By default, jQuery timestamps asynchronous requests to avoid them being cached by the browser. You’ll want to disable this functionality using the ajaxSetup() method, so that the SDK is cached locally between pages.
The getScript() method is asynchronous, so you’ll pass an anonymous callback function in which you can do your SDK initialization code as usual. Add the App ID for your app from the App Dashboard.
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript(‘https://connect.facebook.net/en_US/sdk.js’, function(){
FB.init({
appId: ‘{your-app-id}’,
version: ‘v2.7’ // or v2.1, v2.2, v2.3, …
});
$(‘#loginbutton,#feedbutton’).removeAttr(‘disabled’);
FB.getLoginStatus(updateStatusCallback);
});
});
Dependency Decoupling – Putting all your SDK invocation logic in the getScript callback will guarantee that the FB object exists, but it’s not a great design pattern for a complex app. Since the FB object is global, you can put SDK logic outside the getScript callback as long as you check that it exists before calling it. Alternatively, you can use a module dependency framework such as RequireJS to ensure that the FB object is loaded as part of application setup.
