SDK de Facebook para JavaScript con AngularJS

Puedes integrar el SDK de Facebook para JavaScript con AngularJS. Sin embargo, como nuestro SDK debe funcionar en la Web y no en un marco concreto, no proporcionamos un módulo de AngularJS.

Carga del SDK de Facebook para JavaScript

Para añadir el SDK de Facebook para JavaScript a tu aplicación, recomendamos que sigas los pasos descritos en el documento Autenticación de Facebook en tu aplicación web de AngularJS o consultes otras guías publicadas en https://docs.angularjs.org/guide.

Usa la versión más reciente del SDK

Al seguir los pasos de cualquiera de las guías, asegúrate de cargar el archivo más reciente del SDKsdk.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";

Proporciona también una versión de la API Graph (actualmente v2.4) en la llamada a FB.init():

$window.fbAsyncInit = function() {
    FB.init({ 
      appId: '{your-app-id}',
      status: true, 
      cookie: true, 
      xfbml: true,
      version: 'v2.4'
    });
};

Gestión de las devoluciones de llamada

El SDK de Facebook para JavaScript no admite el concepto de los objetos "promise". Como alternativa, puedes agrupar las llamadas del SDK de Facebook para JavaScript en un servicio:

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

Por ejemplo, puedes usar el servicio del siguiente modo:

$scope.getMyLastName = function() {
   facebookService.getMyLastName() 
     .then(function(response) {
       $scope.last_name = response.last_name;
     }
   );
};

Bibliotecas de terceros

En la página de la guía de AngularJS encontrarás varias bibliotecas de terceros que simplifican el uso del SDK de Facebook para JavaScript.