配搭 AngularJS 的 Facebook JavaScript SDK

您可以將 Facebook JavaScript SDK 和 AngularJS 整合。不過，因為我們的 SDK 是於網頁上運作，而不是在特定架構運作，所以我們不提供 AngularJS 模組。

載入 Facebook JavaScript SDK

若要新增 Facebook JavaScript SDK 到您的應用程式，我們建議您遵循在您的 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 JavaScript SDK 不支援承諾的概念。例如，因應措施為將您的 Facebook JavaScript SDK 調用整合成一個服務：

// ...
.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 JavaScript SDK 的使用方式，列在 AngularJS 指南頁面。