Green: 使用 Javascript Facebook SDK with Graphic API

最近因為專案的需求，小小的研究了一下基礎的 Javascript Facebook SDK。這次的範例是以活動網站的部分進行解說，不多說接下來就直接進入主題。

2010/12/22 17:17 (調整內容)

1.Facebook connect Authentication
建立一個新的Facebook app，這邊建立參考網址，取得api key。接下來再html輸入下列的code

window.fbAsyncInit = function() {
    FB.init({appId: api_key, status: true, cookie: true, xfbml: true});
    // FB.getLoginStatus 可以判斷是否已經有FB的login session 如果以登入 可以跳過登入的步驟進行下一步
    FB.getLoginStatus(function(response) {
        if (response.session) {
            alert(response.session);
        }
    })
};
(function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol + '//connect.facebook.net/zh_TW/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

並且在 html 的 tag 中加入 xmlns:fb="http://www.facebook.com/2008/fbml" 加完大該會長下面這樣

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

有了這些之後，我們就可以開始進行facebook 的connect 動作，也就是登入。登入有兩種方式，第一種是直接使用 fb提供的Social plugins，在perms可以填入要求的permission。

另一種方式是使用 API 提供的 FB.login(callback, perms);

FB.login(function(response){
    // do some after
      
    }, 
    {perms:'read_stream,publish_stream,offline_access'}
);

到這邊，就已經成功的與facebook連結並取得相關登入後相關的資訊。在登入成功後，並不會取得user的資料，如果有需要取得user的相關資料，必須要再另外做處理。

2.基礎的運用

接著來介紹如何運用一些相關的API，在fb graphic api 中，要去呼叫函試的方式要使用 FB.ui() 或是 FB.api()，自己小測了幾個method發現其實都可以互通的，差別的是回傳的東西有些微的不同以及FB.ui會有對話框(Dialogs)。

FB.api 使用的使用方法有分兩種

FB.api(path, methed, params, callback);
FB.api(params, callback);

上述第二種方式主要是用來呼叫 Old REST API

exam1:
取得自己/其他user的資訊

FB.api("/me",function(response)
{
    alert(response.name)//取得 user's name
});

如果是想查其他人，也可以將me改成user的 uid or user's name 來查詢
reference 可以前往查詢傳回來的相關數值

這邊則是用fql.query來查詢user的名字
exam2:

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT name FROM user WHERE uid=5526183'
  },
  function(response) {
    alert('Name is ' + response[0].name);
  }
);

另外特別介紹較常用到 stream.publish 使用的方式：
a.FB.ui 使用的方式與 FB.Connect.streamPublish 差不多：

FB.ui({
 method: 'stream.publish',
 message: '我說{$message}',
 attachment: {
  name: "內文標題{$title}",
  caption: '',
  description: ("測試內文"),
  href: "http://1001.webgene.tw/green/facebook/jssdk/"
 },
 action_links: [ { text: "Green's Practice", href: "http://1001.webgene.tw/green/facebook/jssdk/" } ],
 target_id:userData.uid,
 user_prompt_message: "說",
},
 function(response) {
  if(response && response.post_id)
  {
    //publish is successed.
   alert(response.post_id);
  }
  else
  {
   //public is failured.
   
  }
 }
);

在一般的情況下使用這樣的方式就應用在大多數的地方了，但是如果想要讓他自動發佈，就需要用第二種方式
b. FB.api ：

FB.api('/[target_id]/feed','post', 
 {
  method: 'stream.publish',
  message: 'User 說{$message}',
  picture : 'http://www.takwing.idv.hk/facebook/demoapp_jssdk/img/logo.gif',
  link : 'http://1001.webgene.tw/green/facebook/jssdk/',
  name: 'JS SDK($title)!',
  caption: 'Caption of the Post($subTitle)',
  description: 'It is not fun to write Facebook App!($descript)',
  actions : { name : '變很大的Graphic API', link : 'http://1001.webgene.tw/green/facebook/jssdk/'}
 } , function(response) {
 if (!response || response.error) {
  alert('Error occured');
 } else {
  alert('Post ID: ' + response.id);
 }
});

以上就是小弟我這一天來練習的一些整理，雖然寫的內容不是很滿意(不得不承認，不大會寫這種文章)希望之後可以寫得越來越好。也希望我的下一篇文章能趕快生出來 .... (逃)

如果內容有錯誤的地方寫請大家幫忙指證，感激不盡。

最後感謝p哥幫忙，幫我解決了不少問題<(_ _)>

參考網址：
Graph api & javascript base Facebook Connect tutorial
facebook Developers

Green

2010年12月22日

使用 Javascript Facebook SDK with Graphic API

3 則留言: