IE下Facebook JS SDK getLoginStatus無法取得登入狀態

這又是一篇不走正途的解法…大概寫一下就好。

之前在執行專案時發現，在一部份的IE裡(有些ok，有些不ok)，即使使用者已經授權且登入的狀態下，Facebook JS SDK的getLoginStatus仍然一直無法取得登入資訊，所以導致這些IE的使用者完全無法使用Facebook JS SDK。

搞了很久，一直沒辦法解決這個問題。
後來火了，想說反正所有的api都是透過access_token做認證的，只要我能取得access_token的話，就應該能夠繼續使用api。

要取得access_token的方式很簡單，用導向的方式處理就可以了，文件說明在這：https://developers.facebook.com/docs/authentication/client-side/
在Client-side authentication without the JS SDK的部份，很簡單。
因此我在頁面上加入判斷，針對這些不ok的IE，我先將他們導向到
https://www.facebook.com/dialog/oauth?client_id="+YOUR_APP_ID+"&redirect_uri="+YOUR_REDIRECT_URI+"&scope="+COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES+"&response_type=token
其中的參數：
YOUR_APP_ID = api id
YOUR_REDIRECT_URI = 使用者授權後要導回來的url，通常就是原本的網站本身
COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES = 要取得的授權

導回來後，access_token就會跟在網址後面一起回來了，格式會是像這樣：
http://xxx/#access_token=USER_ACCESS_TOKEN&expires_in=NUMBER_OF_SECONDS_UNTIL_TOKEN_EXPIRES
於是access_token就取得了。

接下來要面臨的問題就是，access_token我們是取得了，但是Facebook JS SDK仍然無法work，因為它還是不知道access_token，所以我們要做的事情就是把access_token塞給Facebook JS SDK，強迫它使用這一組access_token。
Facebook JS SDK在使用者登入後會把一些資訊存在FB._authResponse這一個物件裡，包括access_token，如果使用者還沒登入的情況下FB._authResponse會是一個null值，但沒關係，我們可以自動幫它new出來，然後再把access_token塞進去。
if (!FB._authResponse) FB._authResponse = {};
FB._authResponse.accessToken = 我們自己取得的access_token;

這樣一來就可以直接使用原本的Facebook JS SDK了。
測試過後是沒問題的，甚至我把其它人的access_token塞進去也可以跑出正確的資料出來，因此可以很肯定Facebook JS SDK的確是依靠FB._authResponse這個物件來判斷當下的使用者身份。

希望這一篇會幫助到同樣受IE所苦的開發者們。

FB.Event.subscribe事件沒有被觸發

無法查看此摘要。請 按這裡查看文章。

控制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 />

Facebook取得某個網頁被按了多少次「讚」及有誰按「讚」

之前因為沒特別有這個需求，因此就沒去測，今天測了一下，發現有點有趣。
拿我blog裡其中一篇文章來測的話，這篇：http://blog.iamjason.com/2010/07/aniclip.html

基本上要取得讚的東西應該都是直接走FQL了，所以我先去object_url這個table取得對映到這個網址的object_url：
Select id from object_url where url='http://blog.iamjason.com/2010/07/aniclip.html'

跑出來的結果得到這個網址的object_id=410602097134。
然後再去like這個table撈一下有哪些人按過讚：
Select user_id from like where object_id=410602097134

出來的筆數有三筆，可是facebook的social plugin顯示的是四筆，查到的三個人裡面有兩個是我的朋友，另一不是，我猜最後那個「失蹤」的使用者可能隱私權設得比較高吧？
因此看樣子不能直接從這裡得到按了讚的總人數，因為可能會有誤差。

所以如果要得到按讚的總人數，就只好透過link_stat這個table了：
Select like_count from link_stat where url='http://blog.iamjason.com/2010/07/aniclip.html'

這樣出來的結果就正確了。

至於能不能不透過social plugin就可以按讚(例如在flash裡)?
目前似乎沒有開放，但是既然都是透過http在傳資料，很多東西都是有跡可循的，以下這篇(http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/)就是觀察按了讚之後送出的資料來反推，再去判斷從flash裡要送出哪些參數，但是作者也說了，他很多參數不知道是代表什麼意思，只是盡量讓它能work而已。
所以我暫時不打算去試，就看facebook到時會不會開放了。
不開放就再做打算…><。

Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記

Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記

由於Facebook說他們要開始使用New Data Model的Deadline是六月三十號(連結在這http://developers.facebook.com/blog/post/392)，因此一些之前已經寫好並且正在線上的iframe、connect app的使用者權限方式要做改變，否則將會發生要什麼資料就沒什麼資料的冏境。雖然說New Data Model仍然可以使用舊的Facebook Connect的permissionDialog來額外讓使用者同意New Data Model的一些新permission，但是我總覺得麻煩，而且希望畢其工於一役，要改就一次改，免得之後又來個什麼東東的deadline，就又要焦頭爛額的去改。

Facebook Open Graph的登入授權方式

上一篇有說過，Open Graph的登入授權已經不像是以前Facebook Connect一樣。在Connect的時候，我們需要取得session_key以及動態的secret，而現在Open Graph則主要只需要一個key值，他們叫它access_token。
老實說我不知道這樣會不會比較安全，但是既然Facebook這樣做，我們靠它吃飯的也只好跟著做，不過至少，Open Graph取得access_token的方式可說是十分簡易呢，不用像Connect時代一樣傷透腦筋。

就像剛說的，要取得access_token很簡單。官方文件寫很多，但是歸納起來就是兩種方法而已，一個是透過網頁導向授權取得，另一種則是透過JS Api來取得。最常使用的當然是用JS Api，但是一定有某些因素Facebook才會提供導向式的方式取得授權，也許是某些application需要使用者一開始就是登入狀態，或是一些Desktop application無法使用JS Api… etc。

Facebook Open Graph試玩心得

Facebook前一陣子宣佈了Open Graph這東西，說實在反應很兩極化，多半都是跟隱私權有關係，另一個部份就是跟使用者行為的精準度分析有關，一但讓Facebook的手滲透入大部份使用者的網站或Blog之後，Facebook所能得到的資料可是非常值錢的東西啊…。


不過這種邪惡的趨勢及商業行為的東西不是今天這篇要聊的。



今天試玩了一下Open Graph，所以就來寫寫心得。

Facebook Flash Application開發心得(5) - 新版的streamPublish

Facebook的api在之前偷偷的有更新過了一次，但是flash的swc似乎仍然沒有變動，基本上影響不大。
其中發佈到個人塗鴉牆的部份，Facebook打算捨棄原本的template，從原本FB.Connect.showFeedDialog改成FB.Connect.streamPublish，這樣也好，不然每次要弄一個新的format就要去註冊一個新的template，這樣真的很麻煩。由於舊方法目前還可以繼續使用，但是為了將來著想，最好還是將舊有的程式改寫成新方法會比較好。
說是對flash影響不大的原因，因為雖然flash api裡原本就有com.facebook.commands.feed.PublishTemplatizedAction這個類別來處理發佈到塗鴉牆的工作，但是如果使用者沒有去允許這個app擁有完整publish_stream的權限的話(一般來說使用者很少主動允許這個權限)，從flash發佈出去的東西是不會主動呈現在使用者的塗鴉牆上的，需要使用者回到自己的塗鴉牆再去點選一次才會真的出現，因此實用性並不大，我也是通常都使用javascript來處理發佈的動作。

因此在這裡記錄一下streamPublish該怎麼處理好了。
新版的發佈動作是藉由javascript api裡的FB.Connect.streamPublish來進行的。
streamPublish(String user_message, Object attachment, Object action_links, String target_id, String user_message_prompt, Function callback, Boolean auto_publish, String actor_id)
這些參數的意義分別為：
1. user_message：要講的話，通常是空的，由使用者自己填寫。
2. attachment：這是一個Object，就是原本的template，用來制定塗鴉牆上顯示的格式，attachment的寫法是重點，待會再提。
3. action_links：塗鴉牆上的連結，一樣是Object型態，通常是[{ "text": "點這邊!!", "href": "http://www.yourdomain.com/xxx.html"}];
4. target_id：要發佈到誰的塗鴉牆上，如果是要發佈到使用者自己的塗鴉牆的話，這個值就要帶空值。
5. user_message_prompt：會出現在user_message之前的一個開頭語，例如『正在想』、『覺得』…etc這些東西。
6. callback：對話窗關閉後會回call的function，如果不打算接受這個事件就不用管。
7. auto_publish：如果使用者已經同意publish_stream的權限且auto_publish是帶true的話，那麼使用者將不會看到有對話窗跳出來，訊息會直接出現在塗鴉牆上。(個人十分討厭這種作法)
8. actor_id：這好像是粉絲頁面用的，可以選擇直接發佈到粉絲頁，但前提是這個使用者是該粉絲頁的管理者。


看起來是很簡單明瞭了。
所以主要的重點還是在attachment。其實attachment跟以前的template差別不大，分別只在於以前的template先制定好了『格式』，現在的attachment則是隨時可以帶入不同的Object，比較活。
官方wiki對於attachment的解說請參考這個網址
http://wiki.developers.facebook.com/index.php/Attachment_%28Streams%29

通常attachment會具有以下幾個properties：
1. name：就是主旨。
2. href：主旨點下去會連結的網址，通常是app或是某活動、官網的網址。
3. caption：跟name不一樣，也跟下面的description不一樣，這個caption通常會寫出誰誰誰做了什麼事，在caption裡加上{*actor*}的話這一串字串就會自動被取代成使用者的名稱，例如：『{*actor*}剛剛做了心理測驗』，出來的結果就會是『Jason剛剛做了心理測驗』
4. description：嗯，這個就是一大堆文字了，可以當成作文去寫，通常facebook裡那些心理測驗在解釋測驗結果的那一大堆話就是塞在這個屬性裡。
5. properties：這屬性我還沒實作過，功能還不明，跳過。
6. media：除了description以外最多人用也最有興趣的就是這個屬性了，這是一個陣列，定義了所有會出現的圖或flash或聲音，全都塞在這個陣列裡，陣列裡放的是Object，每一個Object會有三個屬性：type，src，href。type定義是什麼媒體，有image、flash及mp3三種，src則是這個媒體所在的網址，href就是點了之後會連到哪。所以media應該會是類似這樣的型態：[{'type': 'image', 'src': 'http://icanhascheezburger.files.wordpress.com/2009/03/funny-pictures-kitten-finished-his-milk-and-wants-a-cookie.jpg', 'href': 'http://icanhascheezburger.com/2009/03/30/funny-pictures-awlll-gone-cookie-now/'}, {'type': 'image', 'src': 'http://photos.icanhascheezburger.com/completestore/2009/1/18/128768048603560273.jpg', 'href': 'http://ihasahotdog.com/upcoming/?pid=20869'}]
7. 剩下的像comments_xid及自定義屬性，好像都是要用再更深入的機制上才會用到的，目前我也沒實作過，因此一樣跳過。
基本上attachment最常被使用到的就是這幾個屬性了，差不多瞭解了之後就可以很快的發佈屬於自己的塗鴉牆。


接下來，如何從Flash去呼叫FB.Connect.streamPublish，不用說一定是透過ExternalInterface，需要注意的是，因為attachment是一個Object，我試過直接用Flash丟Object出來給js，結果是失敗的，雖然js也是收到一個Object，但是其實這個Object已經不是原本的Object了，所以要嘛就是把要發佈的attachment先在js裡寫好，但是這麼一來整個code又變得很不活，也無法類別化，所以我都會改採另外一種方式：JSON。
在Flash裡，先產生相對映的Object，然後藉由Adobe as3corelib裡面com.adobe.serialization.json的package，JSONEncoder類別將Object轉換成JSON的字串後，用字串的方式傳遞給js，js裡再還原成Object就可以了，js裡字串還原成JSON的方法可以直接用eval，或是使用JSON.js來做parsing的動作(JSON.js可在此下載http://www.json.org/js.html)。
這樣做的好處是可以在flash裡動態的隨時產生不同的attachment，視不同的狀況發佈不同的塗鴉牆，比較靈活，js也不需要因為每個專案而再重新編寫。

Facebook Flash Application開發心得(4) – Iframe的架構下取得Session

相對於FB Connect在取得Facebook登入Session值的複雜度，Iframe架構下的Application在這方面反而方便許多。
前一篇已經有說到Flash api裡的FacebookSessionUtil在FB Connect的情況下會有bug，但是在iframe之下卻可以運作得非常順利。其中很大的原因，是因為iframe的架構原本就是附屬在Facebook裡的，登入的狀況都由Facebook先處理掉了，Facebook才會開始載入iframe，也就是說user很少會在還沒登入的狀況之下就接觸到你的iframe application，因此我們可以少掉一部份處理尚未登入的情況，但如果user真的有辦法在未登入的情況下進入我們的iframe application(會有，在某些情況下會發生)，我們只要直接把頁面導回給Facebook處理就好，等登入後Facebook會自動再幫我們導回來(很方便吧!)。這個利用Facebook來做導向的機制也會發生在user第一次進入應用程式的時候的那個授權頁。
另一個很重要的原因，正由於iframe架構是由Facebook所載入的，因此Facebook｢很貼心｣的順便帶了一些十分有用的資訊放在url後面的變數裡給iframe，這一大堆的資訊裡面就包括了Session值。

既然知道了這很重要的兩點，就來實作吧。
首先當然是針對javascript下手。

依照剛剛所說的兩個重點，一開始先要取得的就是Facebook帶給iframe的所有必要參數。
< script type="text/javascript"><br /> var api_key = “XXXXXXXXXXXXXXXXX”; //api key<br /> //取得網址列後面的所有參數字串<br /> var queryString = window.location.search;<br /> queryString = queryString.substring(1);<br /> var fields = queryString.split('&');<br /> //fb_sig_added這個值很重要，它指出了user有沒有認證使用你的application<br /> var fb_sig_added = 0;<br /> <br /> //將所有網址後的參數都原封不動帶入flashVars<br /> var flashVars ={};<br /> for (var i = 0; i < fields.length; i++) { var index = fields[i].indexOf('='); var key = fields[i].substring(0, index); var value = fields[i].substring(index + 1); if (key.toLowerCase() == "fb_sig_added"){ fb_sig_added = value; } flashVars[key] = value; } flashVars.api_key = api_key; if (fb_sig_added == 0) { //如果還沒登入或還沒授權就導向 window.parent.location = "http://www.facebook.com/login.php?api_key=" + api_key + "&next=index.htm&v=1.0&canvas=1"; } else { //如果已經ok就進行facebook javascript api初始化 initFB(); } < /script><br />
上面這段code最重要的部份就在於取得所有網址列後面的變數並放在flashVars裡。
另一個重點就是fb_sig_added變數的取得，它代表了user是否已經授權使用你的application，如果是0(尚未登入的情況下好像也會是0)，我們就把整個頁面導向到http://www.facebook.com/login.php?api_key=" + api_key + "&next=index.htm&v=1.0&canvas=1的這個網址，網址列後面的參數api_key就是你的api_key，next指的是授權後要再導回來的頁面，我習慣是再導回index.htm。(有興趣的人可以觀察一下，事實上Facebook如果是在你已經登入的情況但沒授權的時候是會導到另外一頁的，不過next也會跟著被帶過去，所以我們只要直接全交給login.php去處理就好)
當一切都就續時，我最後呼叫一個initFB的function，這個function裡我就開始初始化facebook javascript api。
<br /> < script type="text/javascript"><br /> function initFB() {<br /> FB_RequireFeatures(["Api","XFBML","Connect"], function() {<br /> FB.Facebook.init(api_key, "xd_receiver.htm");<br /> FB.Facebook.apiClient.requireLogin(function(exception){ <br /> //facebook api初始化之後<br /> //產生一個FB.ApiClient實體(以後有些功能會需要它)<br /> apiClient = new FB.ApiClient(api_key);<br /> //呼叫一個function來載入swf<br /> initFlash();<br /> })<br /> })<br /> }<br /> < /script><br />
初始化Facebook javascript api的部份，跟FB Connect不一樣，我這次採用FB_RequireFeatures來做為初始化的點，因為我很確定user已經是登入狀態，所以一開始就初始化所有該用到的東西。
而且如果我沒記錯的話(說真的印象有點久遠了)，使用FB_RequireFeatures的話，Facebook會強制在你的appilication外層加上它的外框(上面的header及下面的footer)，所以如果你是直接輸入你application實際的網址的話，遇到FB_RequireFeatures時還是會Facebook框起來。
因此之後有時候，我們將會遇到iframe及FB Connect同時應用在一個application的情況中，也就是說即使在iframe的情況之下，有時還是要用到FB Connect，這也是我先介紹FB Connect的原因之一。(如果我以後還會繼續寫下去的話)
至於FB_RequireFeatures裡所帶的一些值的意義，可以去官方的wiki上看，基本上我也沒有實際的去比較這幾個之間差多少，所以我就乾脆直接初始化三種我覺得可能會用到的。
通常這個function這樣應該就ok了，不需要改寫，直接拿去用就好。
等到一切都就緒後，就呼叫initFlash這個function來載入flash，這function我就不寫出來了，反正就是用swfObject載入就是了 (記得要將flashVars帶進去)

接下來就是Flash裡的code了。
既然已經說了FacebookSessionUtil在iframe裡很好用，就直接大方的用了吧。
<br /> package {<br /> //需要import以下類別<br /> //因為我是用document class，所以多import了MovieClip<br /> import flash.display.MovieClip;<br /> import com.facebook.Facebook;<br /> import com.facebook.utils.FacebookSessionUtil;<br /> import com.facebook.events.FacebookEvent;<br /> <br /> public class FB_documentClass extends MovieClip {<br /> private var _sessionUtil:FacebookSessionUtil;<br /> private var _facebook:Facebook;<br /> public function FB_documentClass() {<br /> //取得api_key<br /> var _apiKey:String = this.loaderInfo.parameters.api_key;<br /> //初始化FacebookSessionUtil<br /> //基於api secret的值不曝光，因此第二個值帶null<br /> _sessionUtil = new FacebookSessionUtil(_apiKey, null, this.loaderInfo);<br /> //監聽FacebookSession跟Facebook之間連線的事件<br /> _sessionUtil.addEventListener(FacebookEvent.CONNECT, fbConnectHandler);<br /> //如果使用FacebookSessionUtil的話<br /> //Facebook物件實體是由FacebookSessionUtil給的<br /> _facebook = _sessionUtil.facebook;<br /> <br /> //如果fb_sig_session_key這個值有值的話<br /> //直接請FacebookSessionUtil跟Facebook取得連線就可<br /> if (this.loaderInfo.parameters.fb_sig_session_key) {<br /> _sessionUtil.verifySession();<br /> } else {<br /> _sessionUtil.login(true);<br /> }<br /> }<br /> <br /> //理論上都正常的話是連線成功的<br /> //使用FacebookSessionUtil的話可以直接取得uid<br /> private function fbConnectHandler(e:FacebookEvent):void {<br /> trace("uid = " + _facebook.uid);<br /> }<br /> }<br />
基本上，user算是通過層層關卡才會到達flash這一層的驗證：Facebook本身一層，javascript有兩層驗證，第四層才會是FacebookSessionUtil，所以基本上在上面的code裡使用FacebookSessionUtil.login()是用於開發時直接在本機端跑的情況下，否則應該都是直接verifySession就可以取得登入uid了。

ps:如果是在開發的時候，api secret值需要寫入，否則無法登入，這就是Facebook建議我們不要把api secret值寫死在code裡的原因，因為一但被取得，其它cracker就可以利用本機端寫程式來破壞你的application，所以記得上線時要把api secret值從code裡拿掉，FacebookSessionUtil自動會從loadInfo裡所有的flashVars取得它該使用的secret值。

Facebook Flash Application開發心得(3) - 由Flash Api從Facebook取得資料

當最煩人的session問題解決之後，就該試著跟Facebook要點資料來瞧瞧了。
這一篇會大概解說一下Flash api如何跟Facebook索取資料的動作。
基本上Facebook Flash api在這方面的流程很簡單，其實就是先產生一個「命令」然後把這個命令丟給Facebook類別往外post出去就好，要做什麼動作就去產生相對應的命令類別就可以了。
所有的命令類別都繼承com.facebook.net.FacebookCall，有興趣的人可以直接去說明文件看這個類別，它就有列出所有它的子類了。
說明文件在這邊：
http://facebook-actionscript-api.googlecode.com/svn/release/current/docs/index.html
幾乎所有的命令類別都是在com.facebook.command的package裡。

相對於發出命令的簡易，Facebook Flash api在接收資料時的繁複卻是不可思議到讓人惱怒。有時一個命令發出後，收到的資料型別居然要層層解析，動輒用到四五個類別，再加上說明文件的陽春，所以往往需要不斷的一直trace，最後才能得到你想要的資料。
這個部份待會的code就會見識到…。

接下來，我們繼續接著上一篇的去修改，Html的部份就不用動了，這次沒動到javascript，所以只改ActionScript。
我們這次要從Facebook取得自己的個人資料，因此在上次的connectHandler裡驗證成功後馬上執行這個動作：
使用到的是com.facebook.commands.users.GetInfo;這個類別。

<br /> //需要import這兩個類別<br /> import com.facebook.commands.users.GetInfo;<br /> import com.facebook.data.users.GetInfoFieldValues;<br /> <br /> private function connectHandler(e:FacebookEvent):void {<br /> trace(e);<br /> if (e.success) {<br /> trace("驗證成功");<br /> //加入這一行，進行取得資料的動作<br /> getMyInfo();<br /> }<br /> }<br /> <br /> private function getMyInfo():void {<br /> //產生一個命令的instance<br /> //GetInfo是取得某人(可多人)的某些欄位資料(可指定欄位)<br /> //我這裡是取得自己的所有欄位資料<br /> var _call:GetInfo = new GetInfo([_uid], GetInfoFieldValues.ALL_VALUES);<br /> //監聽FacebookEvent.COMPLETE事件<br /> _call.addEventListener(FacebookEvent.COMPLETE, infoCompleteHandler);<br /> //把instance交給Facebook類別往外丟出去<br /> _facebook.post(_call);<br /> }<br />

GetInfo這個類別是用來跟Facebook索取會員資料用的，它可以允許一次索取很多人的，因此第一個參數是會員uid組成的Array。然後也可以指定要索取哪一些欄位，這些欄位的定義都在GetInfoFieldValues這個類別裡的靜態屬性，一樣是Array的形式，如果你要索取所有的欄位，那就直接帶入GetInfoFieldValues.ALL_VALUES就好，它本身就是一個Array型態。

接下來就是要處理事件回傳的結果：

<br /> //需要import這三個類別<br /> import com.facebook.data.users.GetInfoData;<br /> import com.facebook.data.users.FacebookUserCollection;<br /> import com.facebook.data.users.FacebookUser;<br /> <br /> private function infoCompleteHandler(e:FacebookEvent):void {<br /> //可藉由trace(e)來觀察每個呼叫的回傳資料狀態<br /> trace(e);<br /> //如果e.success且e.data有值的話, 解析資料<br /> if (e.success && e.data != null) {<br /> //因為可以一次取得很多人的資料<br /> //所以資料可能是多筆<br /> //我這邊將它轉成Array<br /> var _userArray:Array = GetInfoData(e.data).userCollection.toArray();<br /> //in this case, 人數一定是1<br /> trace("人數 = " + _userArray.length);<br /> //將自己的資料取出<br /> var _my:FacebookUser = FacebookUser(_userArray[0]);<br /> //打上自己的名字<br /> name_txt.text = "Hello! " + _my.name;<br /> <br /> //把自己的大頭照load進來<br /> var _ldr:Loader = new Loader();<br /> _ldr.load(new URLRequest(_my.pic));<br /> _ldr.x = 5;<br /> _ldr.y = 30;<br /> this.addChild(_ldr);<br /> }<br /> }<br />

開發Facebook application時，一直trace回傳的FacebookEvent會是一個好習慣…。FacebookEvent的形態基本上會是這樣：
[FacebookEvent type="complete" success=true data=[object GetInfoData] error=null]
type就不用講了，要注意的是success及data。
success就只有true或false，通常都是true，除非你跟Facebook之間的connection斷了，那success就會是false然後error會有東西。
data則是主要的資料，data會依照你命令的種類不同而有不同的資料型態，理論上命令的類別都是在com.facebook.command.xxxx的package裡，相對應的資料型態類別則會放在com.facebook.data.xxxx的package裡。
也就是送出命令時是去command裡找，接收到事件時就回來data這邊找。

這次的命令是com.facebook.command.users.GetInfo，收到的資料是com.facebook.data.users.GetInfoData。
但是其實討人厭的就在這邊，光一個GetInfoData還不夠，真的資料是存在GetInfoData類別裡的userCollection屬性 (com.facebook.data.users.FacebookUserCollection類別)，所以只好不斷的轉型別把它轉成陣列，最後陣列裡儲存的是一個一個的com.facebook.data.users.FacebookUser型別的資料…。
因此光解析個人資料就要動用三個型別… 加上發出命令的類別的話一共是五個，老實說，說明文件夠好的話這都還ok，偏偏不是，所以開發Facebook application的話一直trace會是一個好習慣。
當熟悉它的運作方式後，十分建議自己寫一些類別來整合簡化這些步驟。


如果沒意外的話，當登入後就可以看到自己的名字跟照片顯示在畫面上了。

下一篇
Facebook Flash Application開發心得(4) – Iframe的架構下取得Session

Facebook Flash Application開發心得(2) - FB Connect - 接上Flash

使用FB.init初始化Facebook之後，除了要藉由javascript的api來應用Facebook的一些功能以外，其實最重要的就是要取得Facebook的登入session資訊。
由於Facebook的判別登入權限是由很多參數所記錄及驗證的，flash的api也需要這些參數來進行資料的傳遞，因此取得這些參數是很必要的。
這些參數裡有兩個值是最重要的，分別是session_key及secret，前者是此次使用者登入的session值，後者則是facebook動態產生的secret值，這個secret值跟Application設定時所看到的secret不太一樣，基本上Facebook官方建議我們不要將Application設定畫面上的secret值直接寫在程式裡，因為很容易被有心人破解取得，所以Facebook的javascript api在進行驗證時會自己從Server取得一組由Facebook動態產生的secret來使用，但是Flash api就辦不到，必需要將secret寫死在flash或是flashvars裡，這也就是要使用javascript api來進行登入動作的原因之一。
另一個使用javascript api的原因就是session的取得，雖然官方的flash api的文件裡建議我們使用com.facebook.utils.FacebookSessionUtil類別來統一處理session，文件裡說FacebookSessionUtil會自己判斷是該使用DesktopSession、JSSession或是WebSession，但是我發現FacebookSessionUtil是有bug的，即使在網頁上跑flash，它仍然會使用DesktopSession來做為session的處理類別，但是這麼一來一但當頁面被refresh時，flash將會失去session的相關處理能力，需要再次重新登入一次，對使用者來說這會變得非常的不友善。
雖然說FacebookSessionUtil有這種缺點，但是它在iframe架構的application裡卻可以運作正常且很好用，因此關於FacebookSessionUtil的部份就留到iframe的時候再講，目前為止在FB connect的部份我將會直接使用WebSession。

現在要將flash放入到FB connect的application裡，會延用到上一篇的東西，但稍作改寫，由於我假設我們是要開發全Flash的application，因此我也將登入Facebook的按鈕從html裡搬到flash裡。

整個主要程式的運作流程會是：
1. 載入swf。
2. Swf呼叫javascript進行FB.init。
3. Javascript去跟Facebook驗證使用者是否已經登入。
4. 若是已經登入，javascript取得必要的session_key及secret，並將這兩個值傳給swf。
5. Swf依照這兩個參數進行WebSession的初始化。

一、 HTML上javascript的改寫：
<br />< script type="text/javascript" src="Scripts/swfobject.js"> < /script><br />< script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"> < /script><br />< div id="flashContent"> < /div><br />< script type="text/javascript"><br />//Application Key<br />var api_key = "cdxxxxxxxxxxxxxxxxxxxxxxxxx";<br /><br />//將Application Key藉由FlashVars傳給flash<br />var flashVars = new Object();<br />flashVars.api_key = api_key;<br />swfobject.embedSWF("FBStep2.swf","flashContent","550","400","9.0.47","Scripts/expressInstall.swf",flashVars, {}, {id:"fbSwf",name:"fbSwf"});<br /><br />//當Flash被載入後flash會呼叫這個function進行FB.init的初始化<br />function initFB() {<br /> FB.init(api_key, "xd_receiver.htm", {"ifUserConnected":onConnected,"ifUserNotConnected":onNotConnected});<br />}<br /><br />//判斷當User登入後，取得secret及session_key並傳給Flash。<br />//由於WebSession好像無法直接取得登入者的uid，<br />//因此這邊我順便將uid也傳入給flash<br />function onConnected() {<br /> //alert("onConnected");<br /> var apiClient = new FB.ApiClient(api_key);<br /> document.getElementById("fbSwf").fbConnected(apiClient.get_session().uid, apiClient.get_session().secret, apiClient.get_session().session_key);<br />}<br /><br />//如果沒登入，暫時不做任何事情<br />function onNotConnected() {<br /> //alert("not connected");<br />}<br />< /script><br />
應該很直覺，不用再多做解釋。

二、 Flash裡的處理：
因為code不算多，直接全部po出來，加上註解。
<br />package {<br /> import flash.display.MovieClip;<br /> import flash.events.Event;<br /> import flash.events.MouseEvent;<br /> import flash.external.ExternalInterface;<br /> import com.facebook.Facebook;<br /> import com.facebook.session.WebSession;<br /> import com.facebook.events.FacebookEvent;<br /> <br /> public class FBStep2 extends MovieClip {<br /> private var _facebook:Facebook;<br /> private var _websession:WebSession;<br /> private var _uid:String;<br /> public var connect_mc:MovieClip; //這是登入鈕<br /> <br /> public function FBStep2():void {<br /> //呼叫javascript進行FB.ini，<br /> //並且註冊一個讓javascript callback的function<br /> ExternalInterface.call("initFB");<br /> ExternalInterface.addCallback("fbConnected", fbConnected);<br /> <br /> //給予登入鈕Click事件<br /> connect_mc.addEventListener(MouseEvent.CLICK, connectClickHandler);<br /> }<br /> <br /> //當登入後，會被javascript呼叫的function<br /> private function fbConnected(pUid:String, pSecret:String, pSessionKey:String):void {<br /> //隱藏登入鈕<br /> connect_mc.visible = false; <br /> <br /> _uid = pUid; //儲存uid<br /> //取得api_key<br /> var _apiKey:String = loaderInfo.parameters.api_key;<br /> //產生一個WebSession的instance<br /> //並且將api_key、secret及session_key帶入<br /> _websession = new WebSession(_apiKey, pSecret, pSessionKey);<br /> //監聽WebSession連線成功後的事件<br /> _websession.addEventListener(FacebookEvent.CONNECT, connectHandler);<br /> //產生一個Facebook instance並且指定使用的session<br /> _facebook = new Facebook();<br /> _facebook.startSession(_websession);<br /><br /> //與Facebook進行session的驗證<br /> _websession.verifySession();<br /> }<br /> <br /> //登入鈕按下之後，呼叫javascript跳出登入視窗<br /> private function connectClickHandler(e:MouseEvent):void {<br /> ExternalInterface.call("FB.Connect.requireSession",null,true);<br /> }<br /><br /> private function connectHandler(e:FacebookEvent):void {<br /> trace(e);<br /> if (e.success) {<br /> trace(“驗證成功”);<br /> }<br /> }<br /> }<br />}<br />

三、 其它解說：
在Flash裡，我捨棄了使用Flash api裡的login method，而決定呼叫javascript來處理的原因，是因為如果沒有將application secret傳出的話，facebook.login()不知為何一直無法正常運作，但是如果我把application secret寫入，那就又失去了安全性，因此我才又將登入動作交還給javascript處理。
FB.Connect.requireSession有兩個參數，第一個是登入後的callback function，由於我們已經實作了ifUserConnected，因此這個function可帶入null，第二個參數是決定是否要另開一個視窗當登入窗口，通常這個參數可以忽略，在純html的狀況之下呼叫FB.Connect.requireSession一定會另開，不過如果這個動作是由flash所觸發的話，預設值會是直接蓋在頁面上，可是flash的wmode沒有設成transparent的話flash反而會蓋在登入畫面之上，因此我特別將第二個參數設成true來強迫它另開一個視窗出來。
更正：經過實驗，似乎只有在IE才會跳出新視窗，FireFox裡好像不管怎樣都是跳lightbox...

這個程式的整個流程還沒有完全的完整，但是已經有考量到使用者是先登入再到這頁面或是來到這頁面才進行登入動作的兩種狀況，在一般自己的網頁上來處理應該是足夠了，但是還沒處理到使用者半途登出Facebook的情況，這一點可以事後再繼續補足，至少最麻煩的session取得已經解決。

接下來我也許會先介紹幾個從Facebook取得資料的類別，然後就可以再回過頭來介紹iframe的架構，其實iframe與FB connect最多最大的差別就只在於session的取得，其它的都大同小異。

下一篇
Facebook Flash Application開發心得(3) - 由Flash Api從Facebook取得資料

Facebook Flash Application開發心得(1) - FB Connect - how to start

使用Facebook的api來開發的應用程式基本上有很多種，Adobe這邊有大概的說明：
http://www.adobe.com/devnet/facebook/


其實說穿了就大概可以分成四大種，
1. 在Facebook裡的應用程式
2. 在Facebook裡的iframe應用程式
3. 不在Facebook裡的應用程式 (例如你自己的website)
4. 桌面應用程式 (就AIR囉)

為什麼要分種類呢? 因為四種的api寫法都有一點點不同，需要注意的地方也不一樣，不過就我玩了這一段時間，如果是要專心於用Flash當主題來開發的話，也許有些事情會簡單一點(雖然還是很麻煩!)。
Adobe官網也有一些簡單的入門教學，可以大概看一下，不過好像都是針對第1、2種的方式在做入門就是了，但是不無小補。

一、下載Facebook flash api：
OK，首先要做的當然是去下載Facebook flash api。
http://code.google.com/p/facebook-actionscript-api/


二、申請Facebook應用程式：
接著就是到Facebook登記一個自己的應用程式，取得API金鑰及Application Secret code。
http://www.facebook.com/developers/

登記好應用程式後就要先進行一些設定：
1. 基本資料的部份 -> 應用程式名稱 -> 就是填你的應用程式名稱…
2. 驗證、個人檔案、Widgets以及進階的部份先不用管沒關係，不影響開發。
3. 如果是要開發在Facebook裡的應用程式的話，就要去填「畫布(Canvas)」裡的資料，如果是要開發不在Facebook裡的應用程式，那就要去填「Connect」裡的資料。
4. 畫布(Canvas) -> 畫布頁面網址 -> 使用者打這個網址就會連到你的應用程式
5. 畫布(Canvas) -> Canvas Callback URL -> 你的應用程式「實際上」的網址。
6. 畫布(Canvas) -> 呈現方法 -> 選iframe或是FBML (就是最上面第一種跟第二種的差別)
7. Connect -> Connect URL -> 你應用程式「實際上」的網址。
8. 先填選Connect吧，從Connect入手我覺得比較快，而且一但Connect的部份上手了之後，再轉成iframe應該很多部份會很快。

基本上由於目前我只試過用iframe及connect的方法開發，為什麼我不用FBML? 因為我不太會php…，所以我為了怕以後需要用asp或asp.NET整合時會發生的問題，因此我一開始玩Facebook api的時候就是先玩iframe，之後才試著玩connect。
所以我之後會記錄在這裡的一些經驗大多都會是以這iframe及connect為主。
這一篇則會是以Connect做為開始，因為如果開發iframe application話，關於畫布(Canvas)裡的很多設定就要去處理，也要瞭解每個設定為什麼要這麼設(為了try這些設定的不同真的很花時間)，而Connect的大部份api寫法都跟在iframe裡的差別不會很大，所以我才會想說先從Connect application下手應該會是比較好的方法。


三、建立一個crossdomain policy：
由於facebook的api需要許多的認證，因此他們有他們自己的crossdomain檔，不像flash一樣都是用crossdomain.xml。這個facebook的crossdomain檔我通常都沒去改它的名字 - xd_receiver.htm。
把xd_receiver.htm它放在你application「實際存在」的空間裡，當facebook需要時自然會來讀它，例如：如果你的Application是位於http://iamjason.com/demo/，那麼你就可以把它丟在這兒就好。
xd_receiver.htm會長成像這個樣子：
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><body><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script><br /></body><br /></html><br />
你可以自己寫一個，或者是乾脆到這裡下載，裡面什麼東西都不用改。


四、來個Hello World：
請注意，這個Hello World是使用Connect的方式，因此請注意如果在application裡的設定沒有填寫Connect URL的話會有點問題。

1. 建立一個index.htm，使用Connect的話，html的宣告需要依照facebook的標準，如下：
<br /><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"><br />

2. 即使我們要用Flash來開發，但是Facebook的一些限制，我發現很多時候需要借用Facebook的javascript api才能達到一些功能(例如邀請朋友以及獲得某些授權...等等)，所以我們要引用需要的javascript檔進來：
<br /><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><br />
3. 編寫需要的javascript，初始化facebook connect，並判斷登入狀態：
<br /><script type="text/javascript"><br />//Api金鑰<br />var api_key = "cdXXXXXXXXXXXXXXXX";<br /><br />//初始化facebook connect<br />//後面的參數分別是<br />//第一個參數 : Api金鑰<br />//第二個參數 : xd_receiver.htm的位置，如果沒更動就照著填<br />//最後一個物件參數是optional的，我自己覺得實作這一部份會比較有趣，<br />//對於整個user的登入狀態也比較好控制<br />//我選擇實作兩個function :<br />//ifUserConnected : 當登入後要觸發的function<br />//ifUserNotConnect : 如果沒登入的話要觸發的function<br />FB.init(api_key, "xd_receiver.htm", {"ifUserConnected":onConnected,"ifUserNotConnected":onNotConnected}); <br /><br />function onConnected() {<br /> alert("connected");<br />}<br />function onNotConnected() {<br /> alert("not connected");<br />}<br /></script><br />
這邊寫完大概就可以放上去測試一下了，如果你的Connect URL填寫的是
http://iamjason.com/demo/
那麼就把這個htm放到這裡去，然後打開瀏覽器輸入這個網址，理論上你就會得到一個”not connected”的alert。

4. 加入一個登入的鈕：
Facebook允許它的javascript去render一些需要的視覺控制元件，這邊我們使用登入鈕來做測試。
在<body>裡加上一個div，裡面塞入登入鈕：
<br /><div id="loginBtn" style="display:block"><br /><fb:login-button></fb:login-button><br /></div><br />

然後改寫一下剛剛的javascript裡onConnected及onNotConnected的function，讓還沒登入時出現登入鈕，登入後就把登入鈕隱藏起來：
<br />function onConnected() {<br /> //alert("connected");<br /> document.getElementById("loginBtn").style.display = "none";<br />}<br />function onNotConnected() {<br /> //alert("not connected");<br /> document.getElementById("loginBtn").style.display = "block";<br />}<br />
完成了，這樣基本上就可以測試一下了。
會看到一個facebook的制式藍色登入鈕，點了它之後會跳出一個小視窗，登入後就會把登入鈕隱藏起來。
由於Facebook是用session的方式來驗證登入狀態，因此一但登入後，只要這個瀏覽器的session沒有改變，重新整理畫面的話仍然會被視為是登入狀態。不過我遇到一個狀況，如果重新整理畫面，onNotConnected會先被觸發，過一陣子才會觸發onConnected，不過我想這很正常，應該是連到Facebook去驗證的時間差，所以順道提一下，之後在開發時盡量避免被這問題卡到。

另外，要初始化Facebook api的方法其實很多，大部份看到的都是用new一個FB.ApiClient來處理，但是當FB.ApiClient被new出來的時候，Facebook如果判斷使用者的狀況是尚未登入的話就會馬上將使用者導去登入，可是如果我們使用Connect來建立application時，常常的情況是要將Facebook的api用在自己的網站上，又不想使用者一來就馬上就先被要求登入，所以我才會選擇使用FB.init的方式進行初始化，然後在真的需要使用者登入的時候再進行登入的動作。
這兩種作法要採用哪一種方法，我想就是看當時要開發的需求而定了，之後在進行iframe的application開發的時候，將會採用new FB.ApiClient的方式。(因為一定要先登入)

現在我們有了Hello World，下一篇就是準備把Flash給帶進來了。

下一篇
Facebook Flash Application開發心得(2) - FB Connect - 接上Flash

Facebook Flash Application開發心得(前言)

Facebook的API很久以前就有了，嗯。
不過前一段時間，就在Adobe跟Facebook正式宣佈要一起建構什麼新型態的社交平台之後，終於有了CS3版本的swc。(之前都是Flex版的)
基本上我仍然十分習慣在CS3之下工作，還不是很喜歡打開Flex。所以一看到有CS3的版本後就開始把玩了起來。

說真的，目前為止，我個人覺得Facebook的API說明文件寫得真的不是很好，有太多東西需要開發者自己去摸索。其實我可以理解Facebook針對client端語言的一些限制，畢竟權限以及預防API的被濫用是他們很大的一個課題，只是這些東西我都是要google好久才發現原來我必需要繞一條路去跑。

另一個部份是Application的設定問題，倒是也花了我不少時間才搞清楚什麼東西要怎麼設。

接下來應該會花幾篇的功夫記錄我這幾天在Facebook上開發flash application的心得。Adobe官網上的文章在某方面可以一看，但是更進階的部份卻更新十分緩慢，O’Reilly Inside RIA裡Mirza Hatipovic寫的幾篇文章倒是給了我一些方向，有興趣的可以先從他的文章開始。
http://www.oreillynet.com/pub/au/3675
他似乎是預計要寫二十篇來做教學，但是似乎很不巧的在他寫到一半時Facebook for Flash的API有了一些改變，但是我想基本原理不變。


至於我的部份，純粹會是記錄我在實際設定以及執行上遇到的一些問題及解決方法，一來讓我可以自己將來回頭再來翻閱，而來如果有人也需要這些資訊的話希望可以幫上一點忙。

之後新增的有關Facebook開發的文章將會列舉連結在下面：
-----------

Facebook Flash Application開發心得(1) - FB Connect - how to start
Facebook Flash Application開發心得(2) - FB Connect - 接上Flash
Facebook Flash Application開發心得(3) - 由Flash Api從Facebook取得資料
Facebook Flash Application開發心得(4) – Iframe的架構下取得Session
Facebook Flash Application開發心得(5) - 新版的streamPublish