2010年8月19日 星期四

控制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裡:





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:

8 則留言:

  1. 想請問一下 我有用你的方式 call js 叫出邀請朋友的視窗。
    但我有辦法知道 我邀請了哪些朋友 或是哪些朋友有接受邀請的嗎?

    回覆刪除
  2. 在<fb:request-form action='http://xxx/xxx.asp'那邊可以指定要邀請朋友後會導到哪一個頁面(xxx.asp), facebook會把你選擇的朋友的uid帶過去, 我忘了變數名稱, 你可能要自己透過httpWatch去看一下.
    至於朋友是否有接受邀請的話, facebook似乎沒有提供, 但你可以在url那邊多帶一個參數, ex:?invite_by=邀請人的uid, 然後你在app裡再去抓取這個變數去對映.

    回覆刪除
  3. 在ie8 使用 AntFB.streamPublish popup 時, 會出現 cross-site 的問題, 可是使用了您上述的方法還是一樣?

    回覆刪除
  4. AntFB.streamPublish會出現cross-site的問題,已經有人反映給facebook,但仍然無解.
    目前知道的情況是,stream.publish在發佈的資料中帶有中文字的話在某些ie8中會出現這個狀況.
    這個bug我其實也很苦惱啊

    回覆刪除
  5. 邀請完要怎樣把那個 邀請朋友介面自動關閉

    回覆刪除
  6. 我用facebook的邀請朋友的窗口,邀請後怎麼獲取那些朋友接受了邀請,貌似不能傳參數過去呢?

    回覆刪除
  7. nono:
    Facebook的邀請朋友已經有改版了,現在統一使用FB.ui來處理,你可以參考以下連結:
    http://developers.facebook.com/docs/reference/dialogs/requests/

    回覆刪除