[宅] facebook開發筆記 - javascript SDK(中)

FB(object)

FB是javascript SDK主要提供服務的物件，在載入函式庫時就會被建立在window底下(FB等於window.FB)。
FB提供很多功能，其中最核心的function有三種：

FB.api
FB.init
FB.ui

前面其實已經使用過FB.init()這個funtion，我們知道它主要是用來初始化SDK環境。為了更了解FB這個object還有些什麼attribute和function，我把它給parse一遍，印出來讓大家能一目了然：

_callbacks: object
api: function
getLoginStatus: function
getAuthResponse: function
getAccessToken: function
getUserID: function
login: function
logout: function
Auth: object
-->getLoginStatus: function
-->fetchLoginStatus: function
-->setAuthResponse: function
-->getAuthResponse: function
-->parseSignedRequest: function
-->xdResponseWrapper: function
Canvas: object
-->isTabIframe: function
-->setSize: function
-->setAutoGrow: function
-->getPageInfo: function
-->scrollTo: function
-->setDoneLoading: function
-->startTimer: function
-->stopTimer: function
-->hideFlashElement: function
-->showFlashElement: function
-->getHash: function
-->setHash: function
-->setUrlHandler: function
-->Prefetcher: object
CanvasInsights: object
-->setDoneLoading: function
share: function
publish: function
addFriend: function
Data: object
-->query: function
-->waitOn: function
-->process: function
Event: object
-->subscribers: function
-->subscribe: function
-->unsubscribe: function
-->monitor: function
-->clear: function
-->fire: function
EventProvider: object
-->subscribers: function
-->subscribe: function
-->unsubscribe: function
-->monitor: function
-->clear: function
-->fire: function
Frictionless: object
-->init: function
-->isAllowed: function
init: function
JSON: object
-->stringify: function
-->parse: function
UA: object
-->nativeApp: function
ui: function
XFBML: object
-->parse: function
-->RecommendationsBar: object

接著我們要介紹幾個重要的function

FB.api

在上一篇提到的API，除了以網址的方式來query資料，我們也能用FB.api()來執行facebook API。(主要是FQL及graph API，login的部分有FB.login()來處理，而REST API已經被捨棄了)
FB.api最多需要四個參數，分別是url、method、提供給API的參數(object)、callback函式：

姓名	類型	簡介
path	String	the url path
method	String	the http method (default `"GET"`)
params	Object	the parameters for the query
cb	Function	the callback function to handle the response

這邊就以FQL來舉個例子，先來看FQL中friends表單的欄位：

可索引	姓名	類型	簡介
*	uid1	int	The `user` ID of the first `user` in a particular friendship link.
*	uid2	int	The `user` ID of the second `user` in a particular friendship link.

今天我們想從FQL中的friends表單中找出使用者的好友，寫成FQL語句就會是這樣：

SELECT uid2 FROM friend WHERE uid1=me()

如果要使用FB.api的話就要寫成這樣：

FB.api(
    "/fql", //path
    {q:"SELECT uid2 FROM friend WHERE uid1=me()"}, //parameter
    function(d) {window.d = d;} //callback function
 );

你可能會發現上面是沒有傳入method的，那是因為如果沒有傳值進去method會預設為GET，所以還是可以正常運作。所以在GET的方法下我們當然也可以寫成：

FB.api(
    "/fql?q=SELECT+uid2+FROM+friend+WHERE+uid1=me()", //path
    function(d) {window.d = d;} //callback function
 );

到了這邊大家可能會發現我一直都沒使用到access_token，這可不是筆誤。使用SDK時，它會自動幫你傳acess_token(我猜的)，所以不用特別把它傳過去。但如果你是使用http來query的話就一定要了，所以上面的功能就要寫成這樣：

https://graph.facebook.com/fql?q=SELECT uid2 FROM friend WHERE uid1=me()&access_token=...

FB.ui

主要是用來產生dialog與使用者做互動，例如"發佈到塗鴉牆"、"邀請好友"、"分享連結"、"取得應用程式授權"等等都可以用FB.ui來與使用者溝通，也是個比較禮貌的做法。
那什麼是不禮貌的做法勒?例如說在取得一次使用者的發布塗鴉牆授權後，使用FB.api來直接發布：
FB.api('/me/feed', 'post', { message: body }, function(response){});
也因為FB.ui在動作時都會以彈出視窗讓你知道，所以照理來說應該是不用事先取得這些動作的授權，讓我們來看看要怎樣發布資訊到使用者牆上：

FB.ui(
  {
    method: 'feed',
    name: 'Facebook Dialogs',
    link: 'http://developers.facebook.com/docs/reference/dialogs/',
    picture: 'http://fbrell.com/f8.jpg',
    caption: 'Reference Documentation',
    description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
  },
  function(response) {
    if (response && response.post_id) {
      alert('Post was published.');
    } else {
      alert('Post was not published.');
    }
  }
);

2012年11月5日星期一