[教學] Facebook 應用 (基礎編)

Facebook 提供的API, 對於需要用戶系統(Membership System) 的遊戲來說, 帶來一個簡單方案. 開發者不需建立大量資料儲存, 亦不用提供介面處理登入, 申請和忘記密碼等煩鎖事情.

Adobe 為我們提供一個開發套件 (SDK), 在Action Script 層面與Facebook 進行連結. 不少Facebook 遊戲使用這個SDK (例如: FIFA Superstars).

現在為大家介紹一些常用功能, 並於Mobile App 中應用: (可於iOS 及Android 系統正常運作)


登入Facebook:

登入功能	登入Facebook (使用StageWebView)

1. 在登入Facebook 前, 首要起始FacebookMobile 這個類別.

   FacebookMobile.init(APP_ID, facebookInitHandler);
   

2. 當用戶按下"Login" 按鈕, 產生一個StageWebView, 作為Facebook 登入版畫之用.

   var myWebView:StageWebView = new StageWebView();
   myWebView.stage = this.stage;
   myWebView.viewPort=new Rectangle(0,0,stage.stageWidth,stage.stageHeight)
   

3. 然後呼叫FacebookMobile.login() 登入功能.

   FacebookMobile.login(loginHandler,this.stage,PERMISSION_ARR,myWebView);
   

4. 回傳登入是否成功.

   private function loginHandler(success:Object, fail:Object):void{
     if(success!=null){
       // <----- success
     }else{
       // <----- fail
     }
   }
   

載入用戶資料:

用戶資料

1. 登入Facebook 後, 我們可以呼叫FacebookMobile.getSession(), 這個FacebookSession 物件包含一些用戶基本資料.

   var session:FacebookSession = FacebookMobile.getSession();
   if(session!=null && session.user!=null){
     // <----- 用戶名稱
     nameTxt.text = session.user.name;
     // <----- 用戶性別
     genderTxt.text = session.user.gender;
     // <----- 用戶時區
     timezoneTxt.text = session.user.timezone;
     // <----- 用戶的Facebook 連結
     homeBtn.enabled = session.user.link!=null;
   }
   

2. 載入用戶照片, 我們使用FacebookMobile.getImageUrl().

     // <----- 用戶照片
     userImg.source = FacebookMobile.getImageUrl(session.uid);
   

載入用戶的朋友名單 (Friends List):

朋友名單 (Friends List)

1. 使用FacebookMobile.api() 來獲取朋友名單中的用戶號碼.

   FacebookMobile.api('/me/friends', friendsHandler);
   

2. 把回傳的用戶號碼, 結合成FQL, 然後向FacebookMobile.fqlQuery() 查詢用戶的資訊.
   (name 和username)

   private function friendsHandler(response:Object, fail:Object):void{
     // <----- combine friend ids
     var friends:Array = response as Array;
     var friendsIds:Array = new Array();
     var l:uint=friends.length;
     for (var i:int=0; i>friends.length; i++)
       friendsIds.push(friends[i].id);
     
     // <----- get friend info.
     var fql:String = "SELECT uid, name, username FROM user WHERE uid IN (" + friendsIds.join(",") + ")";
     FacebookMobile.fqlQuery(fql, fqlHandler);
   }
   

3. 把回傳的所有用戶名稱和照片, 利用Image 及Label 物件顯示至介面.

   private function fqlHandler(response:Object, fail:Object):void{
     if(fail){
       // <----- set UI
       loadingLab.text = "Fail.";
     }else{
       var friendDetails:Array = response as Array;
       var str:String = "";
       for (var i:int=0; i<friendDetails.length; i++) {
         var hGroup:HGroup = new HGroup();
         var pic:Image = new Image();
         var name:Label = new Label();
         
         // <----- set friend property
         pic.source = FacebookMobile.getImageUrl(friendDetails[i].uid);
         name.text = friendDetails[i].name;
         
         // <----- add to UI
         hGroup.addElement(pic);
         hGroup.addElement(name);
         vGroup.addElement(hGroup);
       }
       
       // <----- set UI
       loadingLab.text = "Done - "+friendDetails.length+" friend(s)";
     }
   }
   

發佈訊息至Facebook 的Wall Messages:

發佈訊息功能

訊息於Wall Messages 中顯示

1. 發佈簡單訊息:

   FacebookMobile.postData("/me/feed/", postHandler, {"message":"你的文字"});
   

拍攝照片和上載至Facebook 的相簿 (Album):

上載照片功能

照片於相簿(Album) 中顯示

1. 啟動照相機, 取得一個BitmapData. (請參考Adobe AIR 啟用預設拍攝模式)
2. 當用戶按"Submit"按鈕時, 把BitmapData 調整大小, 然後和文字一起傳送至Facebook 相簿.

   // <----- define bitmap
   var MAX_IMAGE_SIZE:int = 300;
   var rate:Number = _bitmapData.width>_bitmapData.height?_bitmapData.width/MAX_IMAGE_SIZE:_bitmapData.height/MAX_IMAGE_SIZE;
   var wdith:int = Math.floor(_bitmapData.width/rate);
   var height:int = Math.floor(_bitmapData.height/rate);
   var bitmapData:BitmapData = new BitmapData(wdith, height);
   var bitmap:Bitmap = new Bitmap(bitmapData);
   var matrix:Matrix = new Matrix();
   matrix.scale(1/rate, 1/rate);
   bitmapData.draw(_bitmapData, matrix);
   
   // <----- post a news feed
   FacebookMobile.postData("me/photos", postHandler, {"image":bitmap,"message":msgTxt.text, "fileName":"IMG_"+(new Date()).valueOf()});
   

大家可以 [下載] 範例試試看.

參考資料: http://www.adobe.com/devnet/facebook/samples.html
API 參考: http://facebook-actionscript-api.googlecode.com/svn/release/current/docs/index.html

注意事項: 由於使用Facebook API, 需要有一個APP ID, 所以大家請到Facebook 申請.

申請位置

複製你的APP ID