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會長成像這個樣子：
你可以自己寫一個，或者是乾脆到這裡下載，裡面什麼東西都不用改。
四、來個Hello World：
請注意，這個Hello World是使用Connect的方式，因此請注意如果在application裡的設定沒有填寫Connect URL的話會有點問題。
1. 建立一個index.htm，使用Connect的話，html的宣告需要依照facebook的標準，如下：
2. 即使我們要用Flash來開發，但是Facebook的一些限制，我發現很多時候需要借用Facebook的javascript api才能達到一些功能(例如邀請朋友以及獲得某些授權...等等)，所以我們要引用需要的javascript檔進來：
3. 編寫需要的javascript，初始化facebook connect，並判斷登入狀態：
這邊寫完大概就可以放上去測試一下了，如果你的Connect URL填寫的是
http://iamjason.com/demo/
那麼就把這個htm放到這裡去，然後打開瀏覽器輸入這個網址，理論上你就會得到一個”not connected”的alert。
4. 加入一個登入的鈕：
Facebook允許它的javascript去render一些需要的視覺控制元件，這邊我們使用登入鈕來做測試。
在<body>裡加上一個div，裡面塞入登入鈕：
然後改寫一下剛剛的javascript裡onConnected及onNotConnected的function，讓還沒登入時出現登入鈕，登入後就把登入鈕隱藏起來：
完成了，這樣基本上就可以測試一下了。
會看到一個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的API
回覆刪除實在太感謝了! ^^
為什麼FB.init 加上你說的{"ifUserConnected":onConnected,"ifUserNotConnected":onNotConnected}
回覆刪除可是這兩個函數都沒有觸發是？
不過我還是可正常的取得使用者的 session 資訊
請問你是使用FB Connect的架構嗎?
回覆刪除這些code我前兩個星期自己有測試過, 是正常運作的.
可以請你描述多一點的狀況嗎?
你好~我也是在研究這個技術的
回覆刪除,我練習把你的程式碼試做一遍
結果火狐有出現icon按鈕,但是ie卻是空白的
想問看看,這個錯誤
謝謝你的教學分享
回覆刪除@自我: 我本身的開發習慣也是用FF, 沒發現這個問題, 最近因為太忙又出國, 我有空再測試看看, 謝謝你提供這個資訊~
回覆刪除@奶綠: 哈,你也找到這裡了
Jason大大也太低調了吧！？ 拜讀拜讀......
回覆刪除從google搜尋到此篇文章, 慢慢細閱全部, 先感謝分享
回覆刪除你好想請教一些問題…
回覆刪除因為我完全不懂程式，所以有點算是自討沒趣…
不過我有幫朋友做一個Flash的音樂播放器
http://www.wretch.cc/blog/gazhua/8919001
我想要讓這個音樂播放器可以跟
http://apps.facebook.com/uniqlock_widget/
這個應用程式一樣，可以放到個人檔案頁面就好了
目前我的應用程式頁面是這樣…
http://apps.facebook.com/koumis_music_player/
要怎樣才會出現允許程式的頁面...
還有要怎樣可以讓播放器可以加到個人檔案裡面
不用核取什麼資料都沒關係
只是很單純的想要讓這個播放器可以放到FB的個人首頁就好了...
Gazhua:
回覆刪除我並沒有去摸個人頁面那一塊@@, 所以不是很清楚要怎麼把東西放到個人頁面,不過理論上應該還是走iframe.
Jason:
回覆刪除那請問一下，單純的html檔上面放個swf的撥放器可以做成應用程式嗎@@? (因為我不懂程式，我只會用dw做網頁)
Gazhua:
回覆刪除只要沒有要用到facebook的api的話(ex:讀取個人資料等等...)
純粹只是放個swf的音樂播放器的話是沒問題的.
想請問一下URL到底該填進甚麼
回覆刪除我對這個很沒有概念
似乎是要申請一個空間
但這個空間是需要去建立的嗎?
還是說這個網址空間正是將FB建立於其上?
建立應用程式的設定上
又分為Site URL和Canvas Callback URL
這兩個有所差別嗎?
還想請問下載下來API之後
是如何去使用這個套件?
有要安裝或是如何嗎?
感謝!!!!!
因為作業需要最近才在研究
但是對程式部分並不是這麼的熟悉
所以疑問很多可能有些很蠢
草兒,
回覆刪除首先先跟你說一下, 目前Facebook已經改用OpenGraph, 所以這一篇所說的Facebook Connect已經不再適用了喔.
1. 空間是要放在自己這邊的,不是在FB上.
2. SiteURL通常是指你空間的domain, Canvas Callback URL則是你要放在Facebook app canvas裡的進入點頁面.
3. swc的安裝很簡單, 你可以Google一下.
Jason, 你好, 想問一問你有沒有興趣freelance 做一些facebook apps 呢? 我們是一間慈善機構，想藉facebook 推廣正向心理學，幫助青少年提升開心指數和生活滿意指數。 如有興趣，可email 我洽談!謝!
回覆刪除Regards,
Daisy Wu
Project Officer
Hong Kong Eating Disorders Association
Tel:2144 5757 Fax: 2144 5179
URL: www.heda-hk.org
請問這種寫法，現在還可以用嗎?
回覆刪除載點也掛掉了，不能下載。