How to open a new window with the fb:profile-pic?

在FBML的語法中，fb:profile-pic標籤提供顯示使用者大頭照功能，詳細的屬性設定可以參考SDK。而我所遇到的問題是: 點擊顯示出來的大頭照連結後，原先所期望的是導向這個使用者的個人頁面，但卻會將本頁導向至空白頁面。會發生這個問題可能和採取iframe顯示模式有關。其實我所希望的是能夠再另外一個視窗或tab，顯示出使用者的個人頁面。然而觀察下圖的html內容，a的標籤內並沒設定target='_target'，因此這個動作只能由我們自己來做處理。

在使用fb:profile-pic的標籤後，會透過FB.XFBML.parse將這個節點parse一遍，而API會將對應的超連結與顯示圖片html內容給insert進去。

FacebookUtillity.parseXFBML = function(domID){
	FB.XFBML.parse($("#" + domID)[0]);
};

一開始是在呼叫FacebookUtillity.parseXFBML後，再將insert target='_blank'給insert到a的標籤內。但FB.XFBML.parse似乎是非同步的function，因此我改透過它所提供的callback function，並透過JQuery API去尋訪圖片超連結標籤。我們只要透過下面的方式，就可以順利將target='_blank'的屬性帶給大頭照的連結。

FacebookUtillity.parseXFBML = function(domID){
	FB.XFBML.parse($("#" + domID)[0], function(){
		$("#" + domID).find('a[class="fb_link"]').attr('target','_blank');
	});
};

透過這個方式，我還可以將發佈至塗鴉牆的功能bind到頭像上。

在2012年9月之後，常常發現_blank並沒有被append到link中。FB.XFBML.parse並不如文件所說的，會等element產生後才呼叫callback function。為了解決這個問題，我改透過setTimeout的方式去呼叫原本要做的事情。

這也是偶然發現的問題!