跳到主要內容

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實作。

標籤：

留言

張貼留言

這個網誌中的熱門文章

解決RobotFramework從3.1.2升級到3.2.2之後，Choose File突然會整個Hand住的問題

考慮到自動測試環境的維護，我們很久以前就使用java去執行robot framework。前陣子開始處理從3.1.2升級到3.2.2的事情，主要先把明確的runtime語法錯誤與deprecate item處理好，這部分內容可以參考: link 。 直到最近才發現，透過SeleniumLibrary執行Choose File去上傳檔案的動作，會導致測試案例timeout。本篇文章主要分享心路歷程與解決方法，我也送了一條issue給robot framework: link 。 我的環境如下: RobotFramework: 3.2.2 Selenium: 3.141.0 SeleniumLibrary: 3.3.1 Remote Selenium Version: selenium-server-standalone-3.141.59 首先並非所有Choose File的動作都會hang住，有些測試案例是可以執行的，但是上傳一個作業系統ISO檔案一定會發生問題。後來我透過wireshark去比對新舊版本的上傳動作，因為我使用 Remote Selenium ，所以Selenium會先把檔案透過REST API發送到Remote Selenium Server上。從下圖我們可以發現，在3.2.2的最後一個TCP封包，比3.1.2大概少了500個bytes。 於是就開始了我trace code之路。包含SeleniumLibrary產生要送給Remote Selenium Server的request內容，還有HTTP Content-Length的計算，我都確認過沒有問題。 最後發現問題是出在socket API的使用上，就是下圖的這支code: 最後發現可能因為開始使用nio的方式送資料，但沒處理到尚未送完的資料內容，而導致發生問題。加一個loop去做計算就可以解決了。 最後我有把解法提供給robot framework官方，在他們出新的版本之前，我是將改完的_socket.py放在我們自己的Lib底下，好讓我們測試可以正常進行。(shutil.py應該也是為了解某個bug而產生的樣子..)
張貼留言
閱讀完整內容

Show NIC selection when setting the network command with the device option

 Problem  在answer file中設定網卡名稱後，安裝時會停在以下畫面: 所使用的command參數如下: network --onboot = yes --bootproto =dhcp --ipv6 =auto --device =eth1 Diagnostic Result 這樣的參數，以前試驗過是可以安裝完成的。因此在發生這個問題後，我檢查了它的debug console: 從console得知，eth1可能是沒有連接網路線或者是網路太慢而導致的問題。後來和Ivy再三確認，有問題的是有接網路線的網卡，且問題是發生在activate階段: Solution 我想既然有retry應該就有次數或者timeout限制，因此發現在Anaconda的說明文件中( link )，有提到dhcptimeout這個boot參數。看了一些人的使用範例，應該是可以直接串在isolinux.cfg中，如下: default linux ksdevice = link ip =dhcp ks =cdrom: / ks.cfg dhcptimeout = 90 然而我在RHEL/CentOS 6.7與6.8試驗後都無效。 因此我就拿了顯示的錯誤字串，問問Google大師，想找一下Anaconda source code來看一下。最後找到別人根據Anaconda code修改的版本: link ，關鍵在於setupIfaceStruct函式中的setupIfaceStruct與readNetConfig: setupIfaceStruct: 會在dhcp時設定dhcptimeout。 readNetConfig: 在writeEnabledNetInfo將timeout寫入dhclient config中；在wait_for_iface_activation內會根據timeout做retry。 再來從log與code可以得知，它讀取的檔案是answer file而不是boot command line。因此我接下來的測試，就是在answer file的network command上加入dhcptimeout: network --onboot = yes --bootproto =dhcp --ipv6 =auto --device =eth1 --...
張貼留言
閱讀完整內容

第一次寫MIB就上手

SNMP(Simple Network Management Protocol)是用來管理網路設備的一種Protocol，我對它的認識也是從工作接觸開始。雖說是管理網路設備，但是主機、電源供應器、RAID等也都可以透過它來做管理。如果你做了一個應用程式，當然所有的操作也都可以透過SNMP來完成，不過可能會很痛苦。前陣子遇到一個學弟，它告訴我說:「我可能不會想寫程式。」為什麼? 因為這是他痛苦的根源。 在這篇文章中，不是要告訴你SNMP是什麼，會看這篇文章的大哥們，應該已經對SNMP有些認識了。 是的!主題是MIB(Management information base)! 對於一個3th-party的SNMP oid，有MIB可以幫助你去了解它所提供的資訊是什麼，且可以對它做什麼操作。最近我運氣很好剛好做到關於修改MIB的工作，也讓我順便了解一下它的語法，接下來我要交給大家MIB的基礎認識。 smidump 我並非使用什麼高強的Editor去編寫MIB，我僅透過Nodepad++編輯和smidump編譯而已。smidump是Kay教我使用的一個將MIB module轉成樹狀結構或oid列表的工具，唯一的缺點是不會告訴你哪一行打錯。當然有錢直接買編輯樹狀結構的工具就可以不需要了解語法了! 安裝 在Ubuntu上可先輸入smidump確認是否安裝，如果沒安裝可透過apt-get install libsmi2ldbl安裝。(CentOS可以透過yum install libsmi) root@tonylin:~/multi-boot-server# smidump The program 'smidump' is currently not installed. You can install it by typing: apt-get install libsmi2ldbl 使用 透過下面兩行指令，就可以將mib file產生出對應的tree與oid列表的檔案。也可以透過這個結果確認MIB是不是你想要的。 smidump -f tree example1.mib > xtree.txt smidump -f identifiers example1.mib > xiden.txt 如果有參考其它檔案要加上p的參數: smidum...
張貼留言
閱讀完整內容