Facebook SDK for JavaScript with AngularJS

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;      }    ); };