Wednesday, October 28, 2009

Facebook App開發手札 - 使用Facebook JavaScript Client Library取得朋友的頭圖列表


  • What

    Facebook Javascript Client Library是一組可以依功能需求而進行動態載入的Javascript函式庫, 開發者透過這些函 式庫來與Facebook API進行互動(ex:進行Facebook API的呼叫). 

  • Why

    開發者可以在任何主機上以前端技術進行需要取得Facebook Social Content的應用程式開發, 也就是說Facebook App的開發模式並不一定要採用被框限在Facebook Chrome內的FBML或是Iframe.

  • How



    • 建立"跨網域溝通頻道(cross domain communication channel)" 建立一個空白的文字檔案名稱為"xd_receiver.htm" 將以下的內容寫入該檔案中並執行儲存 



      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2" type="text/javascript"></script>
</body>
</html>

      該檔案最主要是要在使用FB.init的時候當成參數傳入, 一個網域只需要一個xd_receiver.htm, 而且檔案的路 徑要使用相對路徑的方式來指定.相對於使用到Facebook Javascript客戶端函式庫的檔案時 ex : 假設你的應用程式放置在 http://{Domain Name}/fb_apps/js_demo/ 之下, 而xd_receiver.htm放置於
      http://{Domain Name}/fb_apps/js_demo/channel/       之下.

      <script type="text/javascript">
      FB.init("{應用程式的API Key}", "channel/xd_receiver.htm");
      </script>

      相對於根目錄(Root)時

      ex : 假設你的應用程式放置在       http://{Domain Name}/fb_apps/js_demo/ 之下, 而xd_receiver.htm放置於 http://{Domain Name}/channel/ 之下.

      <script type="text/javascript">
      FB.init("{應用程式的API Key}", "/channel/xd_receiver.htm");
      </script>

      注意事項:



        當使用你的應用程式屬於Iframe Canvas模式時, 引入的js為 <script src="http://static.ak.facebook.com/js/api_libv0.4/FeatureLoader.js.php" type="text/javascript"></script> 當你開發的是Facebook Connect類型的網站應用程式時, 請載入 <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>


       

      接下來進行程式碼的大部分解


引入jQuery


<script type="text/javascript" src="./js/jquery-ui-1.7.2/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script>



載入Facebook Javascript Client Libraries


<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>



千萬記住, 這一段引入外部js的code必須寫在<body>之內, 而不是像一般網頁寫法將其寫在<head>之間.




接下來建立我的頁面主體



<div style="margin:5px;">
<div id="listBox" style="width:600px;height:450px;overflow-x:hidden;overflow-y:auto;border:solid 1px gray;"></div>
</div>

<div style="margin:5px;">
<input style="margin:5px;" type="button" id="getFriendsListBtn" value="取得朋友列表" />
<input style="margin:5px;" type="button" id="getEmailPermissionBtn" value="取得發送郵件的權限" />
</div>


<script type="text/javascript">


function get(){

    var api = FB.Facebook.apiClient;


    //apiClient物件中存放著Facebook API的各個Methods


    api.requireLogin(function(exception){


        //requireLogin會檢查使用者是否已經登入且允許了權限給App,在任何其他的Facebook被呼叫之前都必須先執行這一個API


        //API 格式為requireLogin(CallbackWithException callback)


        //當User被確認為登入狀態之後會接著執行callback函數去進行後續的API呼叫


        api.friends_get(null, function(result, exception){

            //取得目前登入使用者的朋友清單,第一個參數傳入null,代表要取得所有的朋友清單


            //也可以代入朋友清單id去取得該清單下的所有朋友


            //回傳值result為一個存放著朋友uid的陣列


            /*var tmp = new Array();


            for( i = 0, j = result.length; i < j; i++ ){


            tmp.push(result[i]);


            }*/


            var fields = new Array('profile_url','pic_square_with_logo');


            api.users_getInfo(result,fields,function(r,e){


                //users_getInfo第一個參數代入剛剛透過friends_get所取得的朋友uid陣列


                //第二個參數fields是一個陣列,用來指定要取得哪些與使用者相關的資料


                //第三個參數是執行完API Call之後的Callback function,其中參數r為API Call的回傳結果,資料型態為物件


                var target = $('#listBox');


                target.html('');


                //取得要顯示API回傳資料的區塊               
                for( i = 0, j = r.length; i < j; i++ ){


                    if( r[i].pic_square_with_logo === null || r[i].pic_square_with_logo === '' ){


                        r[i].pic_square_with_logo = 'http://static.ak.fbcdn.net/pics/q_silhouette.gif';


                    }

                    var html = '';


                    html = '<div style="margin:5px;float:left;"><a href="'+r[i].profile_url+'" target="_blank"><img src="'+r[i].pic_square_with_logo+'" /></a></div>';


                    $(html).appendTo(target);


                }


            });


            //FB.FBDebug.logLevel=1;


            //FB.FBDebug.writeLine(result);


        });


    });


}


$('#getFriendsListBtn').bind('click',function(){

    //將id為getFriendsListBtn的Button設定一個onclick的監聽事件


    get();


    //用來發出取得使用者頭圖列表的API Call


});


$('#getEmailPermissionBtn').bind('click',function(){


    FB.Connect.showPermissionDialog("email");


});


$(function(){

    FB_RequireFeatures(['Common'], function(){


        FB.init('{輸入API Key}','/xd_receiver.htm');


        //第一個參數代入你的API Key


        //第二個參數指定你的跨網域存取頻道檔案的位置,以本範例而言,該檔案是相對於根目錄下


    });


});


</script>


範例網址
Posted by Impossible is Nothing at 10:15 AM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)