An Introduction to XFBML

facebook

Facebook Markup Language(FBML)是Facebook提供的一種標記語言，讓你的應用程式可以輕鬆的將Facebook功能整合進去，像是邀請朋友、發布、書簽、讚等。然而Facebook毅然決然的要在2012年7月5號要將它給廢除，我們也只能默默的在心中罵聲X。好加在的是，XFBML並不會因此而消失。XFBML = HTML + FBML，是透過Ajax的方式將Facebook的資料帶到Client端並產生對應的UI，我們可以透過JavaScript SDK輕鬆的完成功能。先前引領大家的HelloWorld - Find The Single中的大頭貼也是透過XFBML。

使用FBML的好處是: 直接享有與Facebook溝通的功能與使用者介面，我想你也不希望自己的應用程式在臉書中顯得非常突兀吧?除非你打算使用聯外通的方式與Facebook溝通。如下圖，使用了fb:bookmark與fb:like兩種XFBML。

XFBML支援的標籤可以參考這裡。這些標籤都提供詳細的屬性設定。也許僅僅透過它的document會看不太懂，但Facebook非常的貼心，有些標籤內提供了Code Gen與Preview的功能，可以讓你依照自己的需求選擇，並產生對應的程式碼。以fb:like標籤來說，它提供了讓你選擇URL(嗚嗚~我只有兩個讚)、送出按鈕、Layout等屬性選擇，在輸入完成後能在右方看到結果。

Code Gen的功能提供了四種選擇: HTML5、XFBML、Iframe與URL，每一種方法都提供詳細使用說明。前三種方法顯都是在頁面顯示讚的按鈕供使用者點擊，URL則是與<a>一起使用，讓使用者點擊後導向有顯示讚按鈕的畫面。

URL的選項目前我還想不出來有什麼特別用途；iframe一般都是用在Blog中，但如果要動態的根據資料去產生對應的內容，我想是比不上HTML5與XFBML。而HTML5與XFBML哪一種好呢?HTML5的好處是: 在coding的時候不會像XFBML的標籤一直出現語法錯誤，主要原因是XFBML非正式的HTML語法。雖然HTML5是未來的主流，但它還是要等到所有瀏覽器都支援才會通行無阻，我個人目前是使用XFBML的方式去實作功能。要選擇哪一種方式就看個人需求了!

在html內加入以下語法，可以在coding的時候讓它不會出現語法錯誤:

<html xmlns:fb="http://ogp.me/ns/fb#">
...
</html>

Page Onload

通常這種方法都會用在不需要與其它API互動的情況，像是bookmark、like或邀請朋友等，都是在網頁載入時就可以決定內容的事物上。
我以<fb:like>做說明，這是範例結果:

這種使用方法最重要的是在init SDK時，將xfbml的flag設為true，好讓它自動去parse網頁中的XFBML元素並顯示。

<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Like Button/title>
<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.init( {
			appId : '354112077974900', // App ID
			status : true, // check login status
			cookie : true, // enable cookies to allow the server to access the session
			xfbml : true // parse XFBML
		});
	};
	(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>
</head>
<body>
<div id="fb-root"></div>
<div>
<h4>Like With Face and Send Button:</h4>
<fb:like send="true" width="450" show_faces="true"></fb:like></div>
</body>
</html>

Runtime Load

通常這種方法都會用在需要與其它API互動或根據使用者操作的情況，像是取得朋友名單、照片、塗鴉板上的留言等，再去特別處理顯示內容。

我以點擊button去產生<fb:profie-pic>並parse的範例做說明，這是範例結果:

在點擊button後，會觸發generatePic函式。接著產生在下的<fb:profile-pic>並append到result-div中。最後使用FB.FXBML.parse去parse這個div，prase這個function第二個參數是callback function，讓你可以做些後製。 (請原諒我使用JQuery節省些coding的工。這裡要注意$('#result-div')[0]，JQuery取得的Ojbect中的第一個element都是原本的DOM element)

<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Profile Picture</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '354112077974900', // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : false  // parse XFBML
    });
  };
 
  (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));
 
   function generatePic(){
	   console.log('Generate pic');
		$('#result-div').append('<fb:profile-pic uid="100000274774093" size="square" ' +
				facebook-logo="true"></fb:profile-pic>');
		FB.XFBML.parse($('#result-div')[0], function(){
			// callback
			window.alert(resultDiv.innerHtml);
		});
   };  
</script>
</head>
<body>
<div id="fb-root"></div>
<button onclick="generatePic();">Click!</button>
<h1>Square for loggedinuser</h1>
<div id="result-div">
</div>
</body>
</html>

Facebook提供了專門的Javascript Test Console，讓我們可以去試驗XFBML語法(包含其它的API)。在輸入完程式碼後，點擊Run Code，就能夠在下方看到結果。這讓你能夠知道你所撰寫的語法是否正確，但別把它想的太過強大喔，直接把上方的範例貼上去是不行滴~

除了Testing Tool外，它還提供了許多範例，不知道怎麼下手不妨先看看這些範例怎麼做的!

Summary

Facebook提供了工具和兩三年前相比已經豐富不少，也讓開發一個Facebook應用程式不再是那麼的困難。它不只提供了語法結果的Preview，甚至還有CodeGen的功能，最後就是它最貼心的Testing Tool與範例程式。這些都能讓新手們更容易進入這個圈子。而隨著時間的前進，Facebook對於API上也做了不少的更動。對於要寫Facebook應用程式的大家，要有不怕改變的精神喔!

友藏內心獨白: API與提供的功能變來變去，真符合Agile「不怕改變」的精神阿!

Change History

2012-07-17 fb:bookmark無法使用。由於加入應用程式時會自動加入書籤，因此fb:bookmark功能也不需要了。
2012-07-17 fb:serverFbml無法使用。可能與7月6號臉書停止使用FBML有關，此功能主要影響到我邀請朋友的功能，改透過FB.ui apprequests實作。

An Introduction to XFBML

Start

How to use?

Page Onload

Runtime Load

Javascript Test Console

Summary

Change History