控制Facebook FB.ui跳出的對話框大小

Facebook Graph的js api有一個很好用的東西，那就是FB.ui。
FB.ui基本上就是叫出一個對話框，裡面可以塞入很多你想塞進去的東西，最常用到的就是把stream.publish給塞進去，或者是跳一些alert訊息。
要塞到FB.ui裡的東西主要是以FBML為主，目前為止我實驗了一下，只有like button我怎麼塞都塞不進去，其他的好像大置上都ok。

FB.ui有另一個可以解決長久以來flash在wmode=transparent之下輸入中文的問題，因為FB.ui可以強迫該對話框是要以「iframe」的形式或是「popup」的形式呈現，預設是iframe。iframe的話就是一般facebook的對話框直接疊在畫面上，但是一但flash的wmode=transparent的話，該對話框會因為flash的關係而變得破碎甚至有些東西不能點，因此我們可以指定對話框改用popup的方式出現，這樣一來對話框就會變成另外的跳出視窗。

但是如果把FB.ui的對話框指定成popup的話，雖然大部份的時候都很正常，但是還是會遇到一些問題：
1. 一定要有滑鼠的點擊事件觸發才可以叫出對話框，否則會被瀏覽器擋下來。
2. 如果是stream.publish的話，在某些電腦的IE8上會被視為是cross-site script attack，沒辦法正常呈現發佈頁面。
3. Bookmark的功能被放到popup裡會出現程式錯誤(不知道facebook修好了沒)
4. 即使帶入寬高的變數，它仍然不理你。

嗯，這篇就是要解決第四個問題。

原理很簡單，有點tricky。其實就是直接去改變js api裡面FB.ui對話框的大小預設值，然後呼叫FB.ui跳出視窗，然後再馬上把預設值還原，以免影響其它FB.ui的正常大小。
以下的code我是把邀請朋友的畫面塞到popup裡：
<br /> //取得原本預設大小<br /> var originalSize = FB.UIServer.Methods["fbml.dialog"].size;<br /> //指定你要的大小<br /> FB.UIServer.Methods["fbml.dialog"].size = {width:750, height:600};<br /> <br /> var str = "<fb:fbml><fb:request-form action=' http://xxx/xxx.asp ' method='POST' invite='true' type='This is a test' content='Accept Invite<fb:req-choice url=\"http://apps.facebook.com/xxx/\" label=\" Accept Invite \" />'>";<br /> str += "<fb:multi-friend-selector showborder='false' actiontext='It’s a testing'>";<br /> str += "</fb:request-form></fb:fbml>";<br /> var content = {<br /> method: "fbml.dialog",<br /> fbml: str,<br /> width: 750,<br /> height: 600<br /> };<br /> //指定為popup視窗<br /> content.display = "popup";<br /> FB.ui(content);<br /> //再把預設大小還原成原本的設定<br /> FB.UIServer.Methods["fbml.dialog"].size = originalSize;<br />




FB.ui is very convenient when we use new Facebook Graph js api. We can assign the content and let it show up in a dialog by calling FB.ui, like stream.publish. The content mush be FBML form. Though I didn’t successfully put the like button into the content, I think FB.ui is already good enough.

Also, FB.ui allows us to assign the dialog to be “iframe” or “popup”. Setting the dialog to “popup” can solve the flash localization keyboard input problems when wmode=transparent.
But we will meet some other problems if the dialog becomes a popup window:
1. It needs to be triggered just after the mouse clicking happens, or the popup would be block by most browsers.
2. It might occur cross-site attack with IE8 when we do stream.publish.
3. Bookmark doesn’t work.(not sure if it’s a facebook bug or not)
4. We can not change the size of the popup window.

And this article is to solve the fourth problem.
The concept is simple and tricky. It’s just directly change the facebook FB.ui default size. After calling FB.ui, just change the default size back to original.

Take the “invite friends” for example:
<br /> //Get the original default size<br /> var originalSize = FB.UIServer.Methods["fbml.dialog"].size;<br /> //Assign a new size you want<br /> FB.UIServer.Methods["fbml.dialog"].size = {width:750, height:600};<br /> <br /> var str = "<fb:fbml><fb:request-form action=' http://xxx/xxx.asp ' method='POST' invite='true' type='This is a test' content='Accept Invite<fb:req-choice url=\"http://apps.facebook.com/xxx/\" label=\" Accept Invite \" />'>";<br /> str += "<fb:multi-friend-selector showborder='false' actiontext='It’s a testing'>";<br /> str += "</fb:request-form></fb:fbml>";<br /> var content = {<br /> method: "fbml.dialog",<br /> fbml: str,<br /> width: 750,<br /> height: 600<br /> };<br /> //Set the dialog to be popup<br /> content.display = "popup";<br /> FB.ui(content);<br /> //Restore the default size immediately <br /> FB.UIServer.Methods["fbml.dialog"].size = originalSize;<br />