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實作。
留言
張貼留言