Facebook JavaScript SDK
圖形 API 版本

搭配 RequireJS 的 Facebook JavaScript SDK

在本教學中，您將瞭解如何將 Facebook JavaScript SDK 和其他使用 RequireJS 的 JavaScript 模組整合。JavaScript SDK 和非同步模組定義（AMD）設計模式通常不相容，因此本教學涵蓋寫入填充碼以提供 SDK 所建立 FB 物件的說明。

本教學假定您已經熟悉 RequireJS 和 JavaScript 模組。深入瞭解 RequireJS。

設定

如常設定您的其他 RequireJS 指令碼，然後新增用以與 Facebook SDK 互動的新 .js 檔案。假定這個專案目錄結構如下：

- project/
   - index.html
   - scripts/
      - main.js
      - require.js

新增一個用於設定以及與 SDK 互動的檔案，如下所示：

- project/
    - index.html
    - scripts/
       - main.js
       - require.js
       - fb.js

您應該匯入 requirejs 指令碼且宣告 main.js 為 data-main，如下所示：

<script data-main="scripts/main" src="scripts/require.js"></script>

新增填充碼到 Facebook SDK

在您專案的主指令碼中，新增填充碼宣告到 require.config，顯示如下：

require.config({
  shim: {
    'facebook' : {
      exports: 'FB'
    }
  },
  paths: {
    'facebook': 'https://connect.facebook.net/en_US/sdk.js'
  }
})
require(['fb']);

這會建立使用 JavaScript SDK URL 的 facebook 模組，且標記 FB 物件來自模組的匯出。

在新建立的 fb.js 中，您可以按照一般情況個體化後使用 FB 物件。新增您應用程式主控板中的應用程式編號。

您只需要將程式碼包裝在一個定義區塊中，將 facebook 填充碼模組視為必要的相依性來傳遞。

define(['facebook'], function(){
  FB.init({
    appId      : '{your-app-id}',
    version    : 'v21.0'
  });
  FB.getLoginStatus(function(response) {
    console.log(response);
  });
});

另請參閱