Facebook SDK for JavascriptをAngularJSと組み合わせる

Facebook SDK for JavascriptをAngularJSと統合できます。ただし、Facebook SDKは、特定のフレームワークではなく、ウェブで機能するものであるため、FacebookではAngularJSモジュールを提供しておりません。

Facebook SDK for Javascriptを読み込む

アプリにFacebook SDK for Javascriptを組み込む場合、ハウツーガイドの「Facebook authentication in your AngularJS web app (AngularJSウェブアプリでFacebook認証する)」やhttps://docs.angularjs.org/guideに掲載されているその他のガイドに従うことをおすすめします。

最新バージョンのSDKを使う

いずれのガイドに従う場合も、最新のSDKファイル(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";

また、FB.init()呼び出しでは、Graph APIバージョン(現在はv2.4)を使用してください。

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

コールバックの処理

Facebook SDK for Javascriptは、Promiseの概念には対応していません。回避策の一例として、Facebook SDK for Javascriptの呼び出しをサービスにバンドルできます。

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

たとえば、次のようにサービスを使用します。

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

サードパーティーのライブラリ

Facebook SDK for Javascriptをより簡単に使用できるようにするサードパーティーのライブラリもあります。これらのライブラリは、AngularJSガイドのページに一覧が掲載されています。