配搭 jQuery 的 Facebook JavaScript SDK
在本教學中，您將瞭解如何將 Facebook JavaScript SDK 整合到您的 jQuery 網頁應用程式。jQuery 和 JavaScript SDK 都提供各自的解決方案，使程式碼延遲至程式庫載入後再執行，本教學會協助您結合這兩項工具，並確保在您叫用 SDK 前，兩者都準備好使用。
這個範例使用 Google 代管程式庫 CDN 提供的 jQuery 2.0.0。如需深入瞭解 jQuery，請查閱 jQuery 文件
安裝
將 jQuery 新增到您的 document 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 物件會以應用程式安裝的一部分來載入。