跳到主要內容

An Introduction to XFBML (Deprecated)

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。

Start

使用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>

How to use?

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>

Javascript Test Console

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

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

Summary

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

Change History

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

留言

這個網誌中的熱門文章

PostgreSQL - Unattended installation on windows

Introduction 要將別人軟體包裝到自己軟體中,不可或缺的東西就是Unattended installation。以Unattended installation來說,我們可以選擇透過Installer的silent mode安裝,也可以透過把目標軟體做成portable的版本。本篇文章分享這兩種方法,教導大家如何將PostgreSQL透過Unattended installation方式安裝到目標系統成為service。 Note. 本篇以PostgreSQL 10.7為例。 Install with installer Tips 安裝程式或反安裝程式的參數,除了可以直接上官網搜尋Installation User Guide以外,也可以直接使用help參數查詢: postgresql- 10.7 - 2 -windows-x64.exe --help Windows安裝程式主要有EnterpriseDB與BigSQL兩種。BigSQL版本安裝元件是透過網路下載且支援參數不如EnterpriseDB版本多,以我們需求來說,我們傾向於使用EnterpriseDB版本。接下來分享給大家安裝與反安裝方法。 Installation @ echo off set INSTALL_DIR =C:\postgres10 set INSTALLER =postgresql- 10.7 - 2 -windows-x64.exe   rem options for installation set SSMDB_SERVICE =postgresql- 10 set MODE =--unattendedmodeui none --mode unattended   set DB_PASSWD =--superpassword postgres set DB_PORT =--serverport 5432   set SERVICE_NAME =--servicename % SSMDB_SERVICE %   set PREFIX =--prefix "%INSTALL_DIR%" set DATA_DIR =--datadir "%INSTALL_DIR%\data"   set OPTIONS =

How to install RIDE on Windows?

Introduction 多年沒在Windows上開發RobotFramework,趁著這次整理一下RIDE安裝方法。 目前RIDE最新版本與Python對應版本如下: (3.6 < python <= 3.11) Install current released version (2.0.8.1) with: pip install -U robotframework-ride 安裝Python 直接到Python官網找尋最新的3.11版本,我使用3.11.9: link 。安裝就是一直下一步而已。 安裝wxPython 每次安裝RIDE最困難的都是wxPython。看了一下 官網 描述,我就姑且相信一下: 接著進入下 載頁面 就有安裝教學。基本上就是到Python目錄下的Scripts直接執行以下command: pip install -U wxPython 安裝RIDE 接著就如RIDE官網所說,執行以下command: pip install -U robotframework-ride 啟動RIDE 直接在相同目錄下執行ride就可以啟動了,你也可以直接在桌面建ride連結,加快下次啟動時間。 沒想到這次這麼順利就安裝完成了。因為我是使用java去啟動robot framework,就不特別講要怎麼使用pip安裝robot framework了。

Hello World!

即將要搬家,因此舊網頁內容將慢慢轉移至Blogger。 如果要存取舊網頁,可以使用以下連結: https://wiki.tonylin.idv.tw/dokuwiki/doku.php