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.
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.
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' }); };
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; } ); };
There are also several third party libraries simplifing the usage of the Facebook SDK for JavaScript listed on the AngularJS Guide page.