# Facebook SDK for JavaScript with AngularJS



You can integrate the Facebook SDK for JavaScript with **[AngularJS](https://www.angularjs.org/)**. 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 ](http://blog.brunoscopelliti.com/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](https://docs.angularjs.org/guide/providers):

```
// ...
.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;
     }
   );
};
```

### Third Party Libraries
There are also several third party libraries simplifing the usage of the Facebook SDK for JavaScript listed on the [AngularJS Guide](https://docs.angularjs.org/guide) page.