funp 開發者俱樂部 十月份聚會
DESCRIPTION
介紹如何開發 facebook applicationTRANSCRIPT
> 33,000 apps
< 10 apps
fbOpenhttp://developers.facebook.com/fbopen/
shindighttp://incubator.apache.org/shindig/
Introduction
Canvas
Your application Here
應用程式頁面
Your application Here
Profile box
Wid
e
Narro
w
個人檔案元件
Wid
e
Narro
w
Mini-feed Newsfeed
最新動態 麻吉快報
事件
最新動態Mini-feed
麻吉快報Newsfeed
Request / Notification
請求
Flow
facebookYourApp
Serveruser
request
request
API / FQLcalls
API / FQLresults
response
FBMLFBJS
http://apps.facebook.com/myapp/page.php?q=abc
http://myappserver.com/page.php?q=abc
Users.getInfo()
<xml> … </xml>
<fbml> … </fbml>
<html> … </html>
Client library
YourApp
Server
Client library
funP麻吉
Modified client library
Development building blocks
API
FBML
FQL
FBJS
Facebook API
API
• Users– getInfo
• Friends– get
• Groups– getMembers
• FQL– query
• Fbml– refreshImgSrc
• Feed– publishUserAction
• Notifications– send
• Profile– setFBML
API Test Consolehttp://developers.facebook.com/tools.php?api
FQL
Facebook Query Language
tables
Frienduid1uid2
Useruidnamepicsex
Groupgidnamepicdesc
Groupmemberuidgidposition
Scenario
• 顯示有使用同一個 application的好友
$ids = friends.getAppUsers();$users = users.getInfo( $ids, array(‘name’, ‘pic’) );
FQL
$query = “
SELECT uid, name, pic FROM user
WHERE uid IN (
SELECT uid2 FROM friend
WHERE uid1 = $user
) AND is_app_user
“;
$users = fql.query($query);
Why FQL?
• reduce the number of requests necessary
• reduces bandwidth and parsing costs
• consistent, unified interface
FBML
Facebook Mark-up Language
顯示複雜的原件<fb:multi-friend-selector/>
一致的外表
<fb:tabs/> <fb:tab-item/>
邏輯判斷• <fb:visible-to-owner/>
• <fb:visible-to-user/>
• <fb:visible-to-friends/>
動作• Visibility
– clicktoshow– clicktohide– clicktotoggle
• Mock AJAX – clickrewriteid– clickrewriteurl– clickrewriteform
FBML Test Consolehttp://developers.facebook.com/tools.php?fbml
FBML
HTML
Preview
FBJS
Facebook Javascript
Security
function foo(bar) {var obj = {prop: bar}; return obj.prop;
}
function a12345_foo(a12345_bar) {
var a12345_obj = {prop: a12345_bar};
return a12345_obj.prop;
}
Security
document.getElementById(‘div’).innerHTML = ‘abc’;
document.getElementById(‘div’).setInnerFBML(‘abc’);
v = document.getElementById(‘input_text’).value;
v = document.getElementById(‘input_text’).getValue();
document.getElementById(‘p').style.display = 'none';
document.getElementById(‘p').setStyle(‘display’,'none‘);
FBJS - libraries
• Ajaxvar ajax = new Ajax();
ajax.ondone = function(data) { …}ajax.post(url);
• Dialogsvar d = new Dialog();
d.showMessage('Dialog', 'Hello World.');
• AnimationAnimation(document.getElementById('container')).
to('height', '0px').to('width', '0px').
to('opacity', 0).blind().hide().go();
Tutorial
Getting started
1. add the “Developer” app
2. create your app
3. download the client lib
4. fill in api key & secret
5. hello facebook
1. add the “Developer” app
• go to http://www.new.facebook.com/developers/
• click “Allow”
2a. create your app
• click “set up new application”
2b. edit app settings
1. fill in application name
2. check to agree terms
3. show optional fields
4. fill in callback url ( real url of your app on your server)
5. fill in canvas page url ( virtual url of your app on facebook ) and make sure it is Available
facebookYourApp
Server
request
Canvas Page URLhttp://funp.com/apps/funpresent/
request
Callback URLhttp://example.com/funpresent/
2c. edit app settings
6. select “yes” for Can your application be added on Facebook?
7. check “users” for Who can add your application to their Facebook account?
8. check Developer Mode
9. submit
3. download the client lib
• # wget http://developers.new.facebook.com/clientlibs/facebook-platform.tar.gz
• # tar xvf facebook-platform.tar.gz
4. copy api key & secret
5. hello facebook
# vim facebook-platform/test.php
<?php
include_once(‘client/facebook.php’);$facebook = new Facebook( ‘<API_KEY>’, ‘<SECRET>’);$facebook->require_frame();$user = $facebook->require_login();echo ‘hello <fb:name uid=“’. $user.’“ useyou="false"/>’;
?>
Conclusion
Conclusion
• opportunities– existing users and connections– viral channels: feeds, requests, notifications
• difficulties– FBML, FBJS
marketplace
photos
feed
profile
group
users
auth
fql
money
pages
event
… …
<fp: ... />
Thank you
http://funp.com/