Showing posts with label Facebook API. Show all posts
Showing posts with label Facebook API. Show all posts

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下評價

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…

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

Friday, October 23, 2009

Facebook API - 簡易Facebook App 朋友牆

先來實做一個簡單的範例, 一個極為簡單的Facebook App, 其唯一的功能只有列出User所有朋友的頭圖, 當然前提是User已經完成對App的授權(Allow)之後.

  • Step1 建立一個新的應用程式

    Facebook - Developers_1256290709899 

    輸入應用程式的名稱, 並且要將"Agree"點選起來

    Facebook - Create Application_1256290985380 

    點選"Create Application"之後, 你會被導向如下圖所示的頁面

    Facebook - Edit Demo App - 6yeah_001_1256291102156

    本頁面有三個非常重要的資訊, 其中API Key與Secret都是要用在API中的重要資訊

    Facebook - Edit 6yeah Friends List App Demo_1256291516650 

    接下來點選"Canvas"頁籤, 在這裡有三個設定非常重要

    • Canvas Page URL


      這裡設定的就是以後User連結到你的App的URL, 以本範例而言, 我們在輸入框中填入sixyeah_demo_a, 一但送出之後, 以後User只要輸入http://apps.facebook.com/sixyeah_demo_a就會連結到你App的Canvas Page了.

    • Canvas Callback URL


      這裡所設定的URL就是指向放置該App的應用程式主機, 以本範例來說, App是Hosting在www.6yeah.com 這台主機上面, 設定值為"http://www.6yeah.com/fb_apps/friends_list/my_friends_list.php"

    • Render Method


      我們選用FBML

      如此一來我們已經完成了一個App所有必要的設定了

  • 下載PHP Client Libraries
  • PHP與FBML程式碼

    <?php
    require_once('./facebook-platform/php/facebook.php');
    require_once('./facebook-platform/php/facebookapi_php5_restlib.php');

    $appapikey = '{API Ley}';
    $appsecret = '{APP Secret}';
    $facebook = new Facebook($appapikey, $appsecret);

    $user = $facebook->require_login();

    $friend_uids = explode(',',$_POST['fb_sig_friends']);
    ?>
    <div style="border:solid 2px gray;padding:5px;float:left;clear:both;">

    <?php
    foreach ( $friend_uids as $uid ){
    ?>
    <div style="float:left;margin:5px;">
    <fb:profile-pic uid="<?php echo $uid; ?>" linked="true" size="square"/>
    </div>
    <?php
    }
    ?>
    </div>

    結果會如下圖所示 進入Demo頁面

    6yeah Friends List App Demo on Facebook_1256292431891