Transcript Facebook API

Facebook API
r02922054 黃信輔
r02922053 鍾友文
r02922003 劉璟萱
Outline
•
•
•
•
•
•
Facebook API 簡介
開發環境
常用 API 介紹與程式範例
DEMO
結論、展望與感想
參考資料
2
Facebook API 簡介
• API(Application Programming Interface)
– 讓程式開發者只需根據API定義的方式呼叫相對應的
功能，不用瞭解該功能底層的原始碼或理解其內部
運作機制的細節。
• Facebook API
– Facebook所推出的應用程式介面，透過Facebook API
可以存取Facebook中使用者、群組、個人檔案、相
片等資料。
• Facebook根據不同平台提供了不同的
SDK(Software Development Kit)給開發者使用，包
含網站上使用的JavaScript SDK、PHP SDK，以及
行動裝置上的iOS SDK、Android SDK等。
3
Facebook Graph API
• 存取物件(ex:人、照片、事件、網頁等)本
身的資訊以及物件間彼此的鏈結關係
(social graph)的主要方法。
• 例子
– http://graph.facebook.com/10202975950311400
– http://graph.facebook.com/10202975950311400/picture?type=la
rge
4
開發環境
•
•
•
•
Server side : PHP + MySQL
Client side: Javascript (jQuery)
Facebook JavaScript SDK
Facebook Graph API
5
常用 API 介紹與程式範例
6
Facebook Social Plugins
• Login Button
<div class="fb-login-button" data-scope="public_profile,
publish_actions" onlogin="checkLoginState();"></div>
• Likes and Share
<div class="fb-like" data-href="http://.../blog.php" datalayout="standard" data-action="like" data-show-faces="true" datashare="true"></div>
• Comments
<div class="fb-comments" data-href="http://.../blog.php" dataorder-by="reverse-time" data-numposts="5" datacolorscheme="light"></div>
7
Core Methods of JavaScript
SDK
• .init(params) : 初始及設定SDK
FB.init({
appId
cookie
xfbml
version
: '379801332089467',
: true, //enable cookies to allow
//the server to access the session
: true, //parse social plugins on this page
: 'v2.0' // use version 2.0
});
– xfbml: 決定是否要解析social plugins的XFBML
tags
– version:用.api(), .ui()呼叫的Graph API, API dialogs,
plugins的版本
8
Core Methods of JavaScript
SDK
• . api(path, method, params, callback) : 讓
API呼叫Graph API
–
–
–
–
path: 要呼叫的Graph API path
method: API request用的HTTP method
params: 要傳給Graph API的參數們
callback: API returns後執行的function
9
Core Methods of JavaScript
SDK
• . api(path, method, params, callback)
– 例子1: 取得自己的facebook資訊
FB.api('/me', function(response) {
$(".authorID_input").attr("value", response.id);
$(".authorName_p").html(response.name);
$(".selfPhoto_img").attr("src", 'http://graph.facebook.com/'
+ response.id + '/picture?type=large');
$(".FBlogin_button").hide();
});
– 例子2: 上傳照片及訊息到facebook
FB.api('/me/photos', 'post',
{ message: "<?php echo $title ?>",
url: "<?php echo $imagePath ?>" },
function(response) {
if (!response || response.error) console.log('failed');
else console.log('success');
10
}
});
DEMO
• http://www.cmlab.csie.ntu.edu.tw/~hsinfu
/webFinalProject/blog.php
11
結論、展望與感想
• 我們的Blog是一個簡易的雛形，目前可以
從Blog單向對FB post文章，吸引大家到網
站瀏覽，未來想做成雙向的
synchronization，然後包成plugin或簡單
的framework，讓大家可以直接使用。
• Facebook將其API做的很簡便，讓大家可
以很容易上手，進而迅速擴張他的領
土，是一個很聰明的作法。
12
參考資料
• Facebook Developers
– https://developers.facebook.com/
• Facebook API簡介
– http://www.cc.ntu.edu.tw/chinese/epaper/00
16/20110320_1605.html
• Facebook API & SDK 概論
– http://sls.weco.net/node/10773
13