圖形 API 版本

搭配 jQuery 的 Facebook JavaScript SDK

在本教學中,您將瞭解如何將 Facebook JavaScript SDK 整合到您的 jQuery 網頁應用程式。jQuery 和 JavaScript SDK 都提供各自的解決方案,使程式碼延遲至程式庫載入後再執行,本教學會協助您結合這兩項工具,並確保在您叫用 SDK 前,兩者都準備好使用。

這個範例使用 Google 代管程式庫 CDN 提供的 jQuery 2.0.0。如需深入瞭解 jQuery,請查閱 jQuery 文件

實作方式

將 jQuery 新增到您的 head 元素,然後實作 $(document).ready() 方法,就會在完成 DOM 且個體化 jQuery 後執行。您的頁面看起來會像這樣:

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <title>jQuery Example</title>
  <script>
    $(document).ready(function() {
      // Execute some code here
    });
  </script>
</head>

使用 jQuery getScript() 方法從適用用戶使用語系的正確網址匯入 SDK,而不是以預設非同步處理指令碼匯入 Facebook JavaScript SDK。在網址的開頭您可以不指定通訊協定,這樣做會提供符合的通訊協定給目前的網址。

jQuery 預設會為非同步處理要求加上時間戳記來避免瀏覽器快取要求。建議使用 ajaxSetup() 方法來停用這個功能,這樣就會在頁面切換之間快取本機的 SDK。

getScript() 方法是非同步處理,所以您會傳遞匿名回呼函數,您可以在這裡像平常一樣輸入 SDK 初始化程式碼。新增您應用程式主控板中的應用程式編號。

$(document).ready(function() {
  $.ajaxSetup({ cache: true });
  $.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
    FB.init({
      appId: '{your-app-id}',
      version: 'v2.7' // or v2.1, v2.2, v2.3, ...
    });     
    $('#loginbutton,#feedbutton').removeAttr('disabled');
    FB.getLoginStatus(updateStatusCallback);
  });
});

相依性分離

getScript 回呼中置入所有 SDK 叫用邏輯會保證 FB 物件存在,但這對一個複雜的應用程式來說,卻不是一個好的設計模式。因為 FB 物件具有全域性,所以您可以將 SDK 邏輯放置在 getScript 回呼外的位置,只要您在呼叫前確認物件是否存在即可。另外,您也可以使用模組相依性架構,例如 RequireJS,以確保 FB 物件會以應用程式安裝的一部分來載入。