Saturday, December 12, 2009

猴筆記 - Facebook API分類簡介

 

  • 權限API(Permission API)

    管理應用程式的開發者設定

    擷取應用程式的各項評估資訊

    阻擋特定的使用者

    取得應用程式的公開資訊
  • 授權API(Authorization API)

    議程(Session)與登入資訊的管理
  • 批次API(Batching API)

    稍微了解Facebook App運作方式的人都知道,應用程式存放的地方不是在Facebook的Server群之中,而是在開發者自己的遠端Hosting上面,所以App與Facebook API之間的溝通就會透過遠端API Call來進行,當然這也就造成了App運作效能最大瓶頸之所在。所以Facebook提供了批次API讓開發者可以一次最多將20個Facebook API Call打包成一次的HTTP Request,並可設定是要用循序的或是並列式的去發出。
  • Comments API(評論API)

    開發者可以透過此API對Feed Stories的評論進行程式化的取得、建立、刪除。
  • Data Store API

    簡言之,開發者可以透過這個API將資料存放在Facebook的伺服器中(建立資料表格、物件以及其間的關聯),雖然這組API已經躺在Beta區幾乎兩年了,但這卓然是很雲端的概念,個人對此最感興趣。
  • Event API

    允許應用程式以使用者的身分去建立擁有RSVP功能的事件、管理事件專屬的媒體、事件輸出功能。
  • FBML API

    建立客制的FBML標籤、更新被快取的圖片、上載地區化的文字、更新Profile Box的FBML。
  • Feed API

    程式化的建立新聞樣板、程式化的新聞發佈。
  • FQL API

    應用程式可以透過SQL-Like的語法去Facebook擷取想要的資料,許多Facebook API內部也大量的使用FQL,所以直接使用FQL擷取資料可以更有彈性與效率。透過FQL API開發者可以發出單一FQL查詢或是詢序的相依FQL查詢,遺憾的是preload FQL無法透過此API進行。
  • Links API

    發佈連結到使用者的訊息牆之中,功能就如同Facebook網站上無所不在的Share功能鍵。
  • User Management API

    這組API應該就是Facebook最重要的API了,主要功能是用來管理Facebook最重要的使用者社群圖像,包含取得特定使用者的個人資訊、朋友清單、檢查使用者是否授權某些應用程式等等。
  • Notes API

    允許應用程式去發佈、編輯、刪除Facebook上的Notes,Notes就是使用者位於Facebook上的Blog。
  • Messaging API

    發送Facebook通知(Notification)以及email

    更新使用者在Facebook上的狀態

    發送LiveMessages
  • Pages API

    Pages以前就是大家所熟悉的粉絲專區,但是近期Facebook將其重新定位後,Page運作起來就像是一般的使用者Profile,透過Pages API,可以知道目前登入的使用者是否是該Page的管理者,也可以知道該Page加入了哪些應用程式,附帶一提的是,Page的粉絲就如同一般使用者Profile的朋友一般。
  • Photo and Video API

    應用程式透過此API可以建立相簿、上傳相片與影音、取得標籤資訊。
  • Profile API

    應用程式頁籤(Application Tabs)、使用者的應用程式資訊區塊(Application Profile Boxes)、Info Sections
  • Open Stream API

    這一組API大概是目前最Beta的了

    自Wall中讀取出並發佈內容

    管理評論並對個別的Feed Stories下評價

Monday, November 9, 2009

c( ̄ܫ ̄)a 之Facebook行銷手札 – Joost與Facebook的無縫隙整合

1

首先,使用者可以於Joost網站使用Facebook的帳號進行登入,使用者不用為了使用Joost的服務而填寫註冊表單,這是第一個方便處。

2

使用者完成與Facebook之間連結的動作之後,頁面右上角就會出現使用者於Facebook使用者名字。

3

一但使用者允許並完成與Facebook的連結之後,網站開發者就可以使用Facebook Client Libraries輕易的取得使用者的朋友列表。

4

使用者於網站上對影片進行評論時,網站開發者可以詢問使用者是否願意將發表的評論同步發送一份到他位於Facebook上的Wall之中。

5

6

7

8

同樣的,就對影片發表評論,當使用者訂閱某個頻道的時候,使用者也會被詢問是否要同步發送到Facebook的Wall裡面讓他其他的朋友們知道他正在與Joost寄型互動。

9

10

11

阿猴小結一下,個人覺得Joost運用Facebook客戶端Javascript函式庫將使用者與網站間互動的訊息發送到Facebook去其實是一個被用到濫掉的技倆了,而且技術門坎實在很低,不是說這技倆沒用,只是看到有點疲乏了,阿猴會繼續努力搜尋並思考有趣的行銷應用,歡迎大家一起討論,相信能創造更多的可能性。

c( ̄ܫ ̄)a 之Facebook行銷手札 – 來看看Prototype(原型兵器)如何將你Facebook的相片整合進遊戲的預告片中

前一陣子我同事Moby玩一個遊戲玩得很勤,遊戲中文名稱叫做原型兵器(Prototype),男主角是一個被某種不知名病毒感染的實驗品,身體的四支可以變化成各類型具有殺傷力的武器,並可透過吸食敵方士兵的方式去取得生存的能量。

之前看Moby在玩的時候只覺得這遊戲畫面很絢爛,而且遊戲裡面廝殺敵人的血腥爆頭撕裂的場景看起來很爽,但是直到今天,為了查遊戲的故事背景我才逛到了她們的官方網站,發現原來他的官方網站上竟然有一個"Facebook Connect"的Button。這可真有趣,當即點了下去。

1

如下圖,我們所熟悉的"Connect with Facebook"對話視窗又浮現了。

2

3

完成了對Prototype應用程式的Allow之後,就會播放遊戲的過場動畫,大家請仔細看,動畫的背景中是不是出現了許多你熟悉的身影?

4

5

6

哈哈,沒錯!為了呈現這個因受到病毒感染所崩滅的城市,影片用Flashback的方式去呈現這個城市的過往的記憶,但是有趣的是影片是將觀看者在Facebook上的照片勘入整個影片的情境之中(如上圖中Firebug顯示影片發送了POST Request到Facebook去讀取我在Facebook中的相簿),讓觀看者覺得跟這個影片不是兩個Isolation的個體,而會有種自己也涉入整個事件之中的錯置感。

Saturday, November 7, 2009

c( ̄ܫ ̄)a 之Facebook行銷手札 - DEXTER

 

DEXTER,一個由美國付費頻道Showtime所製作的影集,該公司為了這一個影集看來是砸了不少的行銷預算在網路上,因為就我目前看到的,除了Youtube上的一個頗有創意的在影片中尋人的遊戲之外,該公司還在Facebook上進行了一個有趣的行銷案,以下我們就先來看看Facebook上她們怎麼玩。

首先連結到該影集針對Facebook建立的官方網站進行Facebook Connect的動作,一但完成對APP的授權(Allow)之後,如同先前文章中說過的,應用程式將會取得使用者所有朋友的UIDs。

dexterize-001

取得所有朋友的UIDs之後,當然也就可以取得朋友的頭圖與姓名等資料了。

dexterize-002

以下紅線標註起來的部分就是該網站進行Facebook Connect所載入的程式。

未命名-3

當使用者點擊了畫面上的"Facebook Connect"按鍵之後。

dfsdfsdfsdfsdfsdfsdfsdf

Firebug中顯示載入了一些組成填跳式視窗所需的圖檔,接下來點擊Lightbox中的"Connect"。

1

到目前為止應該已經完成了與網站與Facebook之間的Connect了,畫面應該會出現一個列有朋友清單的對話視窗。

未命名-2

Firebug Concole中可以看見一些對Facebook所發出的POST請求。

3

我們可以觀察到對Facebook API的Request是發送到,http://api.facebook.com/restserver.php,然後利用參數method代表對哪一個API發出請求。

http://api.facebook.com/restserver.php?method=users.getInfo

5

如上圖所示,POST變數中包含了所有朋友的UID資訊,透過UID就可以取得朋友的頭圖以及許多個人資訊。

接下來我在選單中選擇要接收到我這一則廣告訊息的朋友,收到我這個Request的朋友會出現如下圖的Request List通知中

11

點擊Sight of blood之後,會出現如下的警告畫面,而不是要求使用者對應用程式進行Allow的提示畫面,說真的我還是第一次見到這畫面。

16

使用者點選"Continue"之後就會被導到一個類似Facebook個人Profile的頁面上,然後呈現出一個大血痕在頁面上,接著滲出恐怖的血液

14

重點來了,為什麼要說這是一個類似Facebook個人Profile頁的頁面呢?

17

因為一開始我有被嚇到,想說Facebook什麼時候開始允許廣告商發佈一個全版面的廣告在官網上面,後來仔細看了一下,請各位注意一下URL的部分,你會發現其實使用者已經被導離開Facebook官方網站了,整個頁面被一個超大的Flash蓋住,造成一種是在Facebook個人Profile頁面上呈現出全螢幕廣告的錯覺,儘管如此我還是被嚇到,想說這個廣告商是在什麼時候用了什麼樣的技巧將使用者在Facebook上的Profile頁面做了張即時的截圖並傳回到廣告商的行銷網站,接下來仔細用Firebug看一下,阿猴又被嚇到,被蓋在Flash下的並不是一張圖片而已,而是使用者在Facebook上的完整Profile頁面。

18

這真是有趣,可以在使用者沒有察覺的情況下勘入一個全版的廣告,然後還讓使用者以為自己仍然在自己位於Facebook上的Profile頁面中。

DEXTERIZE最後將使用者停在下圖這張畫面中,使用者不論是點選"BECOME A FAN"或是"Connect with Facebook"都會將使用者除新導向回Facebook中,這真是有些奸巧。

19

Friday, November 6, 2009

c( ̄ܫ ̄)a 之Facebook開發手札 – fb:bookmark使用教學

近日Facebook推出了一個新功能,以後開發者可以在應用程式頁面上(FBML、Iframe、Facebook Connect開發的模式皆可)加上一個"Add Bookmark"的按鈕,使用者只要按了該按鈕,你的應用程式就會被加入使用者位於Facebook頁面最下方的工具列之中,下圖中橘色加註線的部分就是應用程式書籤。

Facebook - Home_1257500468277

我們先來看看在沒有這個Add Bookmark功能的狀況下,使用者要如何將應用程式加入Bookmark呢

首先,使用者第一次進入App的頁面時,APP通常都會要求User進行應用程式的授權(Allow),如下圖所示

Facebook - Log in to 六葉摩卡 -臉書版官方網站_1257500736765

一但使用者Allow應用程式之後,就會進入應用程式的Canvas Page,如下圖

六葉摩卡 -臉書版官方網站 on Facebook_1257500759343

我們可以看到位於頁面最下方的工具列中多了一個Bookmark "應用程式名稱"的選項,當使用者點選該按鈕之後,你的應用程式就會被加入該使用者工具列的書籤裡了。但是我覺得有一點非常的不方便,那就是當我進入了另一個應用程式的Canvas Page時,如果我再將他進行Bookmark的動作時,新的APP會把我工具列上的APP替換掉,也就是說,似乎目前只有屬於官方的APP允許多個APP同時被加入工具列的書籤中,其他非官方的只能一次加入一個於應用程式書籤中。

加入"Add Bookmark"的方法非常簡單,但是有一個步驟極為重要,那就是開發者必須在Application Setting中將Bookmark URL設定成你應用程式的Canvas Page URL,以這個範例而言,我就得將Bookmark URL設定值設成http://apps.facebook.com/sixyeah/。接下來,如果是以FBML模式開發的話,只要在頁面顯眼處加上<fb:bookmark />,頁面上這個標籤就會被替換成如下的HTML,並呈現出一個"Add Bookmark"的Button。

<a href="/fbml/ajax/bookmark.php?app_id={應用程式ID}&amp;user_id={使用者ID}" class="UIButton UIButton_Gray UIButton_CustomIcon UIActionButton" rel="dialog">
<span class="UIButton_Text">
<img alt="" src="http://b.static.ak.fbcdn.net/rsrc.php/zC6EC/hash/c841l4ig.gif" class="UIButton_Icon"/>Add Bookmark
</span>
</a>


未命名-1



點擊"Add Bookmark"按鍵之後會出現如上圖所示的Lightbox對話框, 點選對話框中的"Add Bookmark"之後,應用程式就成功加入工具列中的應用程式書籤了。



除了使用FBML Tag的方式之外,開發者還能夠以FBJS的方式去啟動"Add Bookmark"對話視窗



只需要在FBML開發模式的頁面中加入



<div style="float:left;margin:5px;padding:5px;">
<input type="button" value="用onclick事件去觸發Add Bookmark" onclick="Facebook.showBookmarkDialog(function(){});" />
</div>


必須注意的是,Facebook.showBookmarkDialog(如果是採用Facebook Connect或是Iframe開發的APP要改用FB.Connect.showBookmarkDialog)必須由使用者點擊觸發才有用,也就是說這段FBJS只能透過onclick事件去引發。附帶一提的是,如果使用者在已經將應用程式加入應用程式書籤中的狀態下再次點擊按鍵嘗試去重複觸發FBJS Facebook.showBookmarkDialog(),此時彈跳出的對話視窗會顯示如下圖的訊息



六葉摩卡 -臉書版官方網站 on Facebook_1257509631643



To be Continue…

Wednesday, November 4, 2009

c( ̄ܫ ̄)a 之Facebook開發手札 – 繼續探討FeatureLoader.js.php


稍微複習一下, 這是幹啥用的
  • 如果要在Facebook以外的網頁透過Facebook Connect與Facebook進行互動, 這是一個一定要引入的js
  • 引入這個檔案的js必須寫在<body>標籤之內.
  • 每一個Web頁面只能也只需要引用FeatureLoader.js.php一次, 如果你有引入Facebook所提供的Social Widget像是Fan BoxFb:comments (XFBML)等等, 你不用再重新引入FeatureLoader.js.php.
以下就是引入該檔案的語法, 也可以透過變更語系參數去.
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>

//我們可以透過變更語系參數去載入不同語系的FeatureLoader.js.php
//http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/{語系碼}



Tuesday, November 3, 2009

c( ̄ܫ ̄)a 之Facebook開發手札 – Iframe與XFBML綜合測試


有稍稍讀過Facebook文件的人都知道, Facebook的應用程式開發模式主要可以分成三大類, 那就是FBML, Iframe以及Facebook Connect. 以往很多原文書都建議採用FBML的開發模式, 也許是因為透過FBML可以輕易的讀取許多Facebook上的Social Content或是書上那些簡單的範例只需要套用FBML即可. 但是自從Facebook開放可以在Iframe中使用XFBML之後, Iframe也可以輕易的利用一些fb命名空間下的特殊Tag去取用Facebook上的Social Content, 我們接下來就做個實驗吧.

 

Monday, November 2, 2009

c( ̄ܫ ̄)a 之Facebook開發手札 – 如何利用Facebook Open Stream API的FB.Connect.streamPublish發送Stories到使用者Wall的訊息流中

 

官方文件中關於FB.Connect.streamPublish API的說明
public static string streamPublish (user_message string, attachment, action_links, target_id, user_message_prompt, callback, auto_publish, actor_id)

Open Stream API – FB.Connect.streamPublish() 展示頁面

參數名稱 參數型態 參數說明 備註
user_message 字串 這是一個選用的參數, App開發者可以利用這個參數設定要發送到使用者Wall的訊息. 如果只是要透過此API讓User去更新Wall上面的個人狀態時, 這個參數以及attachment就可以傳入空白值, 將訊息留給使用者自行輸入

FB.Connect.streamPublish(); 這是此API最單純的狀態
 
attachment 物件 A dictionary object(字典物件, wiki我也查不到很好的解釋, 有查到在補充)
這個參數講簡單一些就是讓開發者可以附加一些多媒體素材在要發送到使用者All上的訊息裡, 如下圖所示, 可發送的多媒體形式包含圖片,影音,MP3,FLAS還有超連結.

詳細資料參考Attachment (Streams)

Facebook - Sean Liu_1257156813651
 
action_links 物件 也是一個字典物件, 主要是讓開發者可以隨著附加一個最長25字元的超連結到要發送到使用者Wall中的訊息裡. 詳細文件可以參考Action Links, 程式範例請往下繼續閱讀吧.  
target_id 字串 這個設定值可以是某個使用者的UID,某個Page的Page ID, 某個群組的Group ID也可以是某個Event的Event ID. 如果有指定的話, 使用者發送出去的訊息將不會出現在目前登入使用者的Wall裡面, 而是會出現在所指定target_id的目標頁面之中.  
user_message_prompt 字串 於發送訊息的彈出式視窗中最上方寫入一個給使用者的提示訊息  
callback 回呼函數

當Open Stream API發送完訊息後會回傳三個參數給這個回呼函數.

post_id, 也就是發送到使用者Wall中的訊息流水號, 如果使用者"Skip"了對話視窗, post_id將會是null值

exception, 如果Open Stream API發送訊息的過程中有發生任何錯誤, 這個回傳的物件中就會有相關錯誤的描述.

data, 這是一個只有包含user_message這一個屬性的物件, 簡言之, data.user_message的內容就是使用者於對話框中所輸入要發送到Wall裡的文字.

 
auto_publish 布林值 預設值為false, 但是如果設定為true的話, 訊息將會自動發送到使用者的Wall裡面而不會提醒使用者, 但是這是在使用者已經授權了應用程式擁有stream_publish擴展權限的情況下才會成立, 否則應用程式仍然會跳出對話視窗請使用者輸入訊息.

不過很奇怪的, 儘管我把這參數auto_publish設定成true了卻看不出有啥自動發送訊息的效果, 這留待後續進一步的研究吧.
 
actor_id 字串 如果目前登入的使用者是某個Page的管理者的話, 將actor_id設定成Page ID將會把使用者輸入的訊息發送到Page的Wall裡面, 就如同Page發送訊息一樣.  

 

var OpenStreamAPI = {
simpleUserStatusPublish : function(){
FB.Connect.streamPublish();
return false;
}
}


<div style="margin:5px;float:left;clear:both;">
<input style="margin:5px;" type="button" id="streamPublishBtn" value="單純的更新使用者狀態" />
</div>


 



$(function(){

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


$('#streamPublishBtn').bind('click',function(){
OpenStreamAPI.simpleUserStatusPublish();
return false;
});
});


如果只用這樣的Javascript將只會在頁面上出現一個彈出式視窗讓使用者輸入要更新的個人狀態, 如下圖所示



六葉摩卡 - Facebook Javascript Client Librsries Demo_1257156024357



 



如何附加Action Links到發送給使用者的訊息裡



var OpenStreamAPI = {
simpleUserStatusPublish : function(){
FB.Connect.streamPublish();
return false;
},
actionLinksPublishDemo : function(){
var actionLinks = [{ "text": "哇哈哈!這是阿猴用來測試用的Action Links",
"href": "http://www.6yeah.com/"
}];
FB.Connect.streamPublish('','',actionLinks);
return false;
}
}


 



$(function(){

FB.Bootstrap.init('{輸入應用程式APP Key}','/xd_receiver.htm');

/*FB_RequireFeatures(['Common'], function(){
});*/

FB.Bootstrap.ensureInit(function(){
My_FB.friends_getLists();
});

$('#friend_group').bind('change',function(){
var s = $(this)[0];
var flid = s.options[s.selectedIndex].value;
My_FB.friends_get(flid);
});

$('#streamPublishBtn').bind('click',function(){
OpenStreamAPI.simpleUserStatusPublish();
return false;
});
$('#actionLinksPublishDemoBtn').bind('click',function(){
OpenStreamAPI.actionLinksPublishDemo();
return false;
});
});


於展示網頁中點選"Action Links發送測試"的Button, 會出現如下圖所示的彈出式對話框



六葉摩卡 - Facebook Javascript Client Librsries Demo_1257157998948



輸入訊息然後點選"Publish"之後, 訊息框的內容就會發送到目前登入使用者的Wall裡面去了, 如下圖所示, 但是不同的是在訊息下方出現了一個"哇哈哈!這是阿猴用來測試用的Action Links"的超連結, 而連結內容是到http://www.6yeah.com/



Facebook - Sean Liu_1257158227845



user_message_prompt參數的使用範例



<script type="text/javascript">
var OpenStreamAPI = {
simpleUserStatusPublish : function(){
FB.Connect.streamPublish();
return false;
},
actionLinksPublishDemo : function(){
var actionLinks = [{ "text": "哇哈哈!這是阿猴用來測試用的Action Links",
"href": "http://www.6yeah.com/"
}];
FB.Connect.streamPublish('','',actionLinks);
return false;
},
userMessagePromptDemo : function(){
var user_message_prompt = "這是阿猴用來進行user_message_prompt參數測試的訊息!";
FB.Connect.streamPublish('','','','',user_message_prompt);
return false;
}
}
</script>


$(function(){

FB.Bootstrap.init('{應用程式的APP Key}','/xd_receiver.htm');

/*FB_RequireFeatures(['Common'], function(){
});*/

FB.Bootstrap.ensureInit(function(){
My_FB.friends_getLists();
});

$('#friend_group').bind('change',function(){
var s = $(this)[0];
var flid = s.options[s.selectedIndex].value;
My_FB.friends_get(flid);
});

$('#streamPublishBtn').bind('click',function(){
OpenStreamAPI.simpleUserStatusPublish();
return false;
});
$('#actionLinksPublishDemoBtn').bind('click',function(){
OpenStreamAPI.actionLinksPublishDemo();
return false;
});
$('#userMessagePromptDemoBtn').bind('click',function(){
OpenStreamAPI.userMessagePromptDemo();
return false;
});
});


回呼函數參數接收的範例



<script type="text/javascript">
var OpenStreamAPI = {
simpleUserStatusPublish : function(){
FB.Connect.streamPublish();
return false;
},
actionLinksPublishDemo : function(){
var actionLinks = [{ "text": "哇哈哈!這是阿猴用來測試用的Action Links",
"href": "http://www.6yeah.com/"
}];
FB.Connect.streamPublish('','',actionLinks);
return false;
},
userMessagePromptDemo : function(){
var user_message_prompt = "這是阿猴用來進行user_message_prompt參數測試的訊息!";
FB.Connect.streamPublish('','','','',user_message_prompt);
return false;
},
callbackDemo : function(){
var user_message_prompt = "這是阿猴用來進行user_message_prompt參數測試的訊息!";
FB.Connect.streamPublish('','','','',user_message_prompt,OpenStreamAPI.doSomethingAfterPublished );
return false;
},
doSomethingAfterPublished : function( post_id, exception, data ){
alert('post_id =>' + post_id + '\r\n' + 'exception => ' + exception + '\r\n' + 'data.user_message => ' + data.user_message );
}
}
</script>


$(function(){

FB.Bootstrap.init('{應用程式的APP Key}','/xd_receiver.htm');

/*FB_RequireFeatures(['Common'], function(){
});*/

FB.Bootstrap.ensureInit(function(){
My_FB.friends_getLists();
});

$('#friend_group').bind('change',function(){
var s = $(this)[0];
var flid = s.options[s.selectedIndex].value;
My_FB.friends_get(flid);
});

$('#streamPublishBtn').bind('click',function(){
OpenStreamAPI.simpleUserStatusPublish();
return false;
});
$('#actionLinksPublishDemoBtn').bind('click',function(){
OpenStreamAPI.actionLinksPublishDemo();
return false;
});
$('#userMessagePromptDemoBtn').bind('click',function(){
OpenStreamAPI.userMessagePromptDemo();
return false;
});
$('#callbackDemoBtn').bind('click',function(){
OpenStreamAPI.callbackDemo();
return false;
});
});


展示結果會如下圖所示



未命名-2



Open Stream API – FB.Connect.streamPublish() 展示頁面

Sunday, November 1, 2009

c( ̄ܫ ̄)a 之Facebook開發手札 – 透過Facebook Client Libraries的FB.Connect.showPermissionDialog去向使用者請求"擴展權限(Extended Permissions)"


阿猴於上一篇文章中概略的說明了Facebook Open Stream API的作用, 對開發者而言, 透過Open Stream API可以於自家網站取得使用者在Facebook Wall裡的訊息流(Stream)進行混搭, 對使用者而言, 就是能夠有更多的選擇來管理自己在Facebook上的訊息流, 當然前提是有開發者能夠做出更有創意的應用去創造更有趣的UX(User Experience). 但是這一切都要在使用者允許的前提之下才會發生, 也就是說, 使用者必須對讀寫他自己位於Facebook上Streams的應用程式進行授權, 說白了就是使用者必須給予應用程式有"publish_stream"以及"read_stream"的權限(詳細資訊請看擴展權限)

接下來我就稍稍說明如何向使用者請求這些權限.

如果使用的是Facebook Client Javascript Libraries的話, 發送權限請求的API就是FB.Connect.showPermissionDialog
 
參數
描述
備註
permission

為一個格式"權限1,權限2,權限3 ...."的字串

例如 : 要向使用者同使請求發送Stream, 讀取Stream, 寄送email三項擴展權限. permission參數的格式就為publish_stream,read_stream,email
必要的參數
callback

回呼函數, 當整個權限請求流程結束之後就會呼叫這一個Callback, 回傳的參數為一個字串, 字串內容為使用者允許(Allow)的權限, 如果發生失敗或是使用者否決所有應用程式對其請求的權限, 回傳值就null

注意 :

如果使用者Cancel了應用程式的權限請求對話框, 那Callback函數收到的回傳值會是一個空字串而不是null.

如果應用程式同時向使用者申請了多個擴展權限, 而其中某些權限使用者已經於之前允許過了, 那對話視窗中就不會出現該權限的申請畫面, 而Callback函數所接收到的回傳值中也不會包含有該權限的文字.

最後, 如果應用程式向使用者申請的權限全部都已經被使用者Allow了, 那權限申請的對話視窗將不會彈出, 而Callback函數接收到的回傳值將會是一個空字串.

選擇性參數
enableProfileSelector
這是一個Boolean值, 如果設定為true, 當應用程式請求的權限包含publish_stream的時候, 彈出式視窗中會出現一個可複選的下拉式選單, 清單中是該使用者所管理的Pages列表, 使用者可以選擇允許應用程式發送到哪些他所管理的Pages. 反之如果使用者沒有任何Pages, 該下拉是選單就不會出現.
選擇性參數
預設值為false
profileSelectorIds
資料型態為Array, 可以指定某些特定的Pages ID或是使用者的UIDs, 一旦設定了enableProfileSelector為true, 下拉式選單中就只會出現陣列中所設定的Pages或是Users

選擇性參數
預設值為null





 範例網址

$('#getExtendedPermissionBtn').bind('click',function(){
var permission = '';
$('.permissions').each(function(){
if( $(this).attr('checked') === true ){
permission += $(this).attr('value')+',';
}
});

if( !permission ){
alert('請至少勾選一項"延伸權限"');return false;
}
permission.substring(0,permission.strlen-1);

FB.Connect.showPermissionDialog(permission, function( granted_permission ){
if( !granted_permission ){
alert('您不允許這些"延伸權限"');
} else {
alert( granted_permission );
}
return false;
},true);
});


上面例出的程式碼向使用者提出了三個擴展權限的申請, 讀取Stream, 發佈Stream, 以及發送email. 在使用者完全沒有Allow過的狀況下, 畫面應該會出下如下的對話視窗



六葉摩卡 - Facebook Javascript Client Librsries Demo_1257073723174



申請發佈Stream到使用者Wall上的權限



六葉摩卡 - Facebook Javascript Client Librsries Demo_1257073894221



申請自使用者Wall上取得Streams的權限



六葉摩卡 - Facebook Javascript Client Librsries Demo_1257074022120



向使用者申請取得發送email的擴展權限



未命名-2











Callback函數所接收到的回傳值, 為一個用逗號分隔的字串, 內容為使用者授權予應用程式的所有擴展權限



如果使用者直接按了權限申請對話框中右上角的"X", 那Callback接收到的將會是一個空字串, 反之如果使用者在權限申請的對話視窗全部都用"Don't Allow", 那麼Callback函數接受的回傳值不會是空字串, 而會是一個null值.



最後要注意的地方是, 如果設定了enableProfileSelector為true, 那麼申請發佈Stream的對話視窗中將會出現如下圖所示的一個可複選的下拉式選單



六葉摩卡 - Facebook Javascript Client Librsries Demo_1257073723174



但是! 我還是有些很納悶的地方, 當我在我的Application Settings中將我這Demo用的App移除掉之後, 回到我範例網站去.



Facebook - Application Settings_1257076934684



我原本預期我在我範例網站上的App應該無法再利用Open Stream API去發送Stories到我的Wall裡面, 但是Facebook似乎並沒有阻擋我做這件事!?還是說… Open Stream API儘管在我沒有安裝App( or Allow )的狀況下一樣式可以進行發送Storie到我的Wall裡? 有些搞不懂.



反之, 當我按下"取得權限"按鈕的時候, Facebook就有顯示如下圖所示的提醒我與Facebook App進行Connect的動作, 這才是我預期應該要發生的狀態, 中間哪個環節發生了問題, 我還得一步一步重新釐清一次.



未命名-1



明明就如下圖所示, 我將Stream Publish的權限否決掉了.



Facebook - Application Settings_1257077833845

Saturday, October 31, 2009

c( ̄ܫ ̄)a 之Facebook開發手札 – Open Stream API操作筆記

個人覺得Facebook Platform稍微有點困難的地方在於起步的時候, 因為要先理解整個App平台的架構包含一些名詞與App的各種驗證機制, 一但跨過了這些階段之後, API的操作其實就相當的直覺了, 畢竟我認定API的定義就是應該我代參數給你, 你就乖乖的回我該有的資料(Facebook API回傳資料是JSON), API有問題就發信去轟炸Facebook的龐大工程師群們.
Open Stream API是Facebook近期釋放出的API, 主要功能就是讓應用程式開發者可以在任何地方包含第三方網站, 行動裝置, 桌面環境去讀取已登入使用者Wall上的訊息流(Stream)去進行混搭的應用.


Friday, October 30, 2009

c( ̄ܫ ̄)a 之Facebook開發手札 – Facebook Javascript Client Libraries的初始化


在使用Facebook所提供的前端Javascript Libraries之前, 必須先載入








千萬記得不要寫在<head></head>之間, 要寫在<body>之內. 當完成了FeatureLoader.js.php的載入之後, 其實只有最小化的Facebook API被載入, 也就是說, 目前為止, 開發者只能使用FB.Bootstrap(經過測試, FB等同於FB.Bootstrap)命名空間下的方法而已.



接下來就是要利用載入FB.Bootstrap去繼續進行接下來的初始化步驟, 那就是指定API Key與"跨網域存取頻道"的相對路徑, 如下行程式所示, 如果有搭配jQuery的話, 可以將他寫在



$.ready(function(){


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

});


FB.Bootstrap.init會動態載入下列的內容到<head></head> Tag裡面


<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US/js/Api/CanvasUtil/Connect/XFBML"></script>

<link rel="stylesheet" type="text/css" href="http://static.ak.connect.facebook.com/connect.php/en_US/css/connect-button-css/share-button-css/FB.Connect-css/connect-css">

根據文件說明, XFBML (dependencies" => "CanvasUtil", "Api", "Connect")  XFBML相依於上述三個javascript函式庫, 而該三個函式庫又相依於其他的函式庫. 簡言之, 透過FB.Bootstrap.init會將所有的Javascript客戶端函式庫都進行載入, 用Firebug觀察發現大小為59KB

未命名-1



文件中還提到如果效能是第一考量的話, 可以嘗試改用FB.Bootstrap.requireFeatures去動態載入必要的Javascript, 像是XdComm, Connect, Common, CanvasUtil, Base, Base, Api等等.


FB.Bootstrap.requireFeatures(["Connect"], function() {
    FB.Facebook.init("{API Key}","{跨網域通道檔的URL}");   


API Call Here … 


});


雖然我發現儘管採用這樣個別載入的方式, FB.Bootstrap仍然會將所有的Javascript進行載入, 因為用Firebux觀察載入的Javascript仍然為59KB


另外要注意的是, FB.Bootstrap.requireFeatures可以執行任意多次, 當被指定載入的Javascript已經於前方的程式進行載入過的話, FB.Bootstrap.requireFeatures會立即執行Callback函數的內容, 而不會發生重複載入的問題.


除此之外, 仔細看了一下<body>的內容, 我們還可以發現多了以下被動態載入的內容, 姑且先跳過這些詭異的東西, 我先講完整個初始化過程在回頭來剖析這一個部分


<div id="FB_HiddenContainer" style="position: absolute; top: -10000px; width: 0px; height: 0px;"> <div>
<iframe class="FB_SERVER_IFRAME" scrolling="no" frameborder="0" src="http://api.connect.facebook.com/static/v0.4/client_restserver.php?r=163033" name="fb_api_server"></iframe>
</div>
<div>
<iframe class="FB_SERVER_IFRAME" scrolling="no" frameborder="0" src="http://www.facebook.com/extern/login_status.php?api_key=75b90556f1c53bb965bf83a9cf4acfac&extern=2&channel=http%3A%2F%2Fwww.6yeah.com%2Fxd_receiver.htm&locale=en_US" name="loginStatus"></iframe> 

</div>
</div>



特別要注意的是, FB.Bootstrap.init是採用非同步的方式去載入外部javascript, 所以為了確保在程式完全載入客戶端瀏覽器之後才允許程式進行後續的Facebook API操作, 開發者必須將API Call的程式放在FB.Bootstrap.ensureInit之內, 透過將API呼叫放置在Callback function內的方式, 可以確保發出Facebook API操作的請求之前就已經完成必要Javascript的載入.


FB.Bootstrap.ensureInit(function(){

        My_FB.friends_getLists();


    });