網上總是能看到各種Like Button，Recommendation之類的東西，FB提供了一系列的API專門供開發人員使用，從而定製頁面，這些按鈕之類的東西叫做Social Plugins。
1. Social Plugins
這個是藉助FB平臺開發的最簡單的方式。只需要嵌入一段HTML代碼，就可以將社交的特性整合進你的頁面。由於它們是由FB來維護的，所以說這些plugins都是爲當前那些登錄的用戶所定製化的，即使它們是第一次訪問你的頁面。
最重要的Social Plugin就是Like Button，使得用戶可以通過僅僅點擊一下就能和好友分享該頁面。你可以通過使用iframe標籤將like button給添加進去，代碼FB官方會提供。
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</body>
</html>大多數的Social Plugins都可以簡單通過加入iframe標籤添加進頁面，但是還有一些，比如comments，live stream，就需要使用XFBML(eXtended Facebook Markup Language)了。總的來說這個也就是一些寫成形的js語句。
拿like button來說，其實它也可以用XFBML來寫，只是轉換成了js語句。通常來說，如果你僅僅是使用的話，那麼用iframe版本的就不錯了，因爲它最簡單。XFBML版本是給那些需要加入更多的控制的開發者來用的。其實FB提供了非常簡便的小工具可以幫助開發人員很快地選擇並且加載Social Plugins。就是每個plugin都會提供一個configurator，可以直接在下拉框裏面選就是了，選好了點generate code，就可以直接生成你需要的代碼，複製粘貼就行。
2. Authentication
FB通過使用FB作爲登錄系統，幫助開發人員簡化並且增強了用戶註冊和登錄過程。用戶無需再多填寫一次或者記住另外一個帳號來登錄你的頁面，只要用戶登錄了FB，他們就可以自動地登錄到你開發的頁面。使用FB來登錄，你可以獲取所有的需要的信息，通過這些信息來創建一個social，personalized的用戶體驗。
FB使用OAuth 2.0進行授權和認證，但是你可以直接使用OAuth 2.0添加登錄框到你的頁面，而開源的JavaScript SDK就是使用FB進行登錄的最簡便的方法。JavaScript SDK首先要求你使用Facebook註冊你的網站，然後獲得一個App ID，這個id是你的網站的唯一的識別標籤。爲了使用認證方法，App必須配置一App Domain，也就是網站的網址。這個可以在設置頁面進行設置，一旦設置好了，就可以將下面的代碼添加進去，也就是所謂的JavaScript SDK。
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
這個時候你要想添加任何Social Plugins，比如login，很簡單，就在</script>標籤後面添加一行代碼就行了。
<div class="fb-login-button">Login with Facebook</div>爲了使得用戶能夠登錄到你的頁面去，有3件必不可少的事情。第一件，FB需要驗證用戶，保證用戶沒有作假，通常是爲了保證是本人。第二件，FB需要驗證你的網站，保證用戶是將信息給你的網站，而不是其他人。最後，用戶需要明確地授權你的網站能夠獲取他們的信息，這樣能夠保證用戶知道自己的哪些信息會被交給你的網站。
雖然看起來很複雜，但是，對於開發人員來說，只是需要使用Login Button，而對於用戶來說，只是需要點擊它。當用戶點擊的時候，JavaScript SDK就會保證用戶已經登錄了FB，也會同時保證請求來自於你的網站。FB接着會彈出一個authorization dialog，這個dialog會展示你的頁面和你要請求獲取的信息。
如果用戶點擊量Allow，那麼FB就會讓你的頁面能夠獲取你請求的信息。如果用戶點擊了Don't Allow，那麼該對話框就會被關閉，並且你不會得到任何信息。默認情況下，你可以獲取用戶的user name，picture，還有其他用戶公開給每個人的信息。如果想獲得更多的信息，比如說用戶的email，那麼就必須針對該信息特別地發出請求。FB對這個也會提供支持，那就是在原有的基礎上簡單地添加一個scope屬性就行了。
<div class="fb-login-button" scope="email,user_checkins">
Login with Facebook
</div>用戶點擊了login button以後，他們可以看到授權的對話框，這個對話框會告訴他們需要提供哪些信息，然後他們再決定是不是允許。需要記住的是，儘量請求獲取最少量的信息，請求的信息越多，用戶越容易拒絕。
除了login button之外，還有registration plugin。這個控件主要可以提供2個login button沒有的功能。第一，允許那些沒有FB帳號的用戶能夠使用。第二，還可以請求用戶在註冊的時候填寫一些FB不能提供的信息，比如最喜歡的顏色之類的。使用方法和login button一樣，添加類似如下代碼。
<div
class="fb-registration"
data-fields="[{'name':'name'}, {'name':'email'},
{'name':'favorite_car','description':'What is your favorite car?',
'type':'text'}]"
data-redirect-uri="URL_TO_LOAD_AFTER_REGISTRATION"
</div>如果用戶還沒有登錄FB，那麼他們會看見登錄的連接，然後可以點擊登錄。如果用戶已經登錄到了FB，那麼有些已經有的信息就會被預先填寫進去，剩下其它一些需要填寫的信息。用戶填寫完其它信息以後，就可以點擊Register。然後認證和授權的操作就自動開始了。一旦授權和認證完成了，FB就會將頁面自動轉到redirect-uri屬性裏面寫的URL，然後完成註冊。
Login Button和Registration Plugin可以輕輕鬆鬆地幫你帶來5億用戶到你的頁面上去。所以說，如果想要這樣做的話，可以減少自己的代碼量，學會將Login的代碼添加進去。具體的參考Login Button和Registration
Plugin以及JavaScript SDK就行了。
3. Personalization
Social Plugins提供了一個簡單的方式來讓你的網站顯得更加個性化，一旦你將登錄加入到你的頁面了，你就能完全地使用Graph API，爲你的用戶們創建更加個性化的用戶體驗。你可以使用Graph API來獲取用戶的FB Profile，使用該信息來定製你想要的體驗。你還可以使用Graph API想用戶的Facebook Wall和News Feed發佈消息。還可以使用它獲取用戶的好友信息，從而將他們也帶到你的網站。
JavaScript SDK提供了非常直接的方式來使用Graph API:FB:api。這個方法接收一個字符串參數，這個參數指定當這個方法被調用的時候會調用哪個函數。下面是一個例子，說明怎麼使用它。
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};還有一個東西就是post東西到FB上。使用FB:ui方法。這個方法會調用Platform Dialogs。除了post之外，還可以邀請朋友。如下代碼是一個例子。
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool'});
};學習這個的最好的方式就是使用JavaScript Console，可以通過這個模擬器來看看你每一步的操作會引起什麼樣的結果。通過JavaScript SDK使得開發人員可以使用Graph API 和 Platform Dialog，除了在客戶端獲得支持之外，也有服務器端的PHP支持。
4. Analytics
使用Insights，開發人員可以查看具體的統計數據，包括用戶數，用戶數怎樣分享你的頁面的之類的。無論用戶數怎樣使用到了你開發的頁面，都會被算到統計數據裏面。除了直接使用FB的之外，你還可以自行整合這個功能，比如你自己想加一個網站統計，那麼你就去available
in the Graph API查看。如果使用外部的統計分析系統的話，那麼有一些注意事項。這個用到的時候再說。