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.

Cargar el SDK de Facebook para JavaScript

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

Usar la versión más reciente del SDK

Cuando consultes una guía, recuerda cargar el archivo sdk.js del SDK más reciente:

// 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";

Y de proporcionar 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'
    });
};

Administrar las devoluciones de llamada

El SDK de Facebook para JavaScript no admite el concepto de los objetos "promise". Como alternativa, puedes agrupar, por ejemplo, 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.