funp 麻吉 開發者俱樂部十月份聚會
TRANSCRIPT
funP com
今日議程
• 6:30~7:30 晚餐與自由交流時間• 7:30~8:30 介紹 Facebook F8 平台開發環境• 8:30~9:00 funP F8 Application 合作方案介紹
funP com
> 33,000 apps
funP com
< 10 apps
funP com
fbOpenhttp://developers.facebook.com/fbopen/
shindighttp://incubator.apache.org/shindig/
funP com
Introduction
funP com
Canvas
Your application Here
funP com
應用程式頁面
Your application Here
funP com
Profile box
Wide
Narrow
funP com
個人檔案元件
Wide
Narrow
funP com
Mini-feed Newsfeed
funP com
新動態 麻吉快報
funP com
事件
新動態Mini-feed
麻吉快報Newsfeed
funP com
Request / Notification
funP com
請求
funP com
Flow
facebookYourApp
Serveruser
request
request
API / FQLcalls
API / FQLresults
response
FBMLFBJS
http://apps.facebook.com/myapp/page.php?q=abchttp://myappserver.com/page.php?q=abcUsers.getInfo()<xml> … </xml><fbml> … </fbml><html> … </html>
Client library
funP com
YourApp
Server
Client library
funP麻吉
Modified client library
funP com
Development building blocks
API
FBML
FQL
FBJS
funP com
Facebook API
API
• Users– getInfo
• Friends– get
• Groups– getMembers
• FQL– query
• Fbml– refreshImgSrc
• Feed– publishUserAction
• Notifications– send
• Profile– setFBML
funP com
API Test Consolehttp://developers.facebook.com/tools.php?api
funP com
FQLFacebook Query Language
funP com
tables
Frienduid1uid2
Useruidnamepicsex
Groupgidnamepicdesc
Groupmemberuidgidposition
funP com
Scenario• 顯示有使用同一個application的好友
$ids = friends.getAppUsers();$users = users.getInfo(
$ids, array(‘name’, ‘pic’)
);
funP com
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);
funP com
Why FQL?
• reduce the number of requests necessary• reduces bandwidth and parsing costs • consistent, unified interface
funP com
FBMLFacebook Mark-up Language
funP com
顯示複雜的原件<fb:multi-friend-selector/>
funP com
一致的外表
<fb:tabs/> <fb:tab-item/>
funP com
邏輯判斷
• <fb:visible-to-owner/>• <fb:visible-to-user/>• <fb:visible-to-friends/>
動作• Visibility
– clicktoshow– clicktohide– clicktotoggle
• Mock AJAX – clickrewriteid– clickrewriteurl– clickrewriteform
funP com
FBML Test Consolehttp://developers.facebook.com/tools.php?fbml
FBML
HTML
Preview
funP com
FBJSFacebook Javascript
funP com
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;
}
funP com
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‘);
funP com
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();
funP com
Tutorial
funP com
Getting started
1. add the “Developer” app2. create your app3. download the client lib4. fill in api key & secret5. hello facebook
funP com
1. add the “Developer” app
• go to http://www.new.facebook.com/developers/
• click “Allow”
funP com
2a. create your app
• click “set up new application”
funP com
2b. edit app settings
1. fill in application name2. check to agree terms3. show optional fields4. 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
funP com
facebookYourApp
Server
request
Canvas Page URLhttp://funp.com/apps/funpresent/
request
Callback URLhttp://example.com/funpresent/
funP com
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 Mode9. submit
funP com
3. download the client lib
• # wget http://developers.new.facebook.com/clientlibs/facebook-platform.tar.gz
• # tar xvf facebook-platform.tar.gz
funP com
4. copy api key & secret
funP com
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"/>’;
?>
funP com
Conclusion
funP com
Conclusion
• opportunities– existing users and connections– viral channels: feeds, requests, notifications
• difficulties– FBML, FBJS
funP com
marketplace
photos
feedprofile
group
users
authfql
money
pages
event… …
funP com
<fp: ... />
funP com
funP com
大綱
• funPlugin & funPlatform• 成功案例• funPartner 合作方案
funP com
funPlugin & funPlatform
funP com
funPlatform SocialApps 標準
• Facebook F8 Platform– 應用服務頁、個人檔案元件、個人檔案頁籤
• OpenSocial (測試中，近期推出)– 應用服務頁、個人檔案元件、個人檔案頁籤
• funPlugin– 自有的程式開發標準– 可提供白金級應用服務開發商使用
funP com
funPlugin 特殊應用
• 紅利點數應用
funP com
funPlugin 特殊應用
• 社群網路、群組與活動應用服務
funP com
funP 競爭優勢
• 整合 代替 對抗– 跨網站相簿、部落格、影音、與微網誌支援
• 專注在本地市場– 應用服務開發商、應用服務、社群與行銷
• 開放平台– F8、OpenSocial與OpenID
funP com
成功案例
funP com
香港的 Facebook - 6Waves
• 香港公司，專心至力於中文Facebook應用服務，現今一天有數百萬PageViews。
• 對很多香港人而言，Facebook 就等於 6Waves.• 香港Facebook為香港地區第一的網站.
funP com
Slide.com
funP com
iLike.com
funP com
Elven Blood
funP com
funPartner 合作方案
funP com
開發SocialApps 大的困難
• 技術與整合遇到瓶頸• 網路廣告利潤不足• 經營成本不易掌握
funP com
加入 funPartner 合作方案
• 提供應用服務經營所需頻寬與設備• 協助廣告代理• 技術協助• 行銷資源協助• 委外合作應用服務開發
• 詳細合作方案請與我們連絡:– [email protected]
funP com
Thank you
http://funp.com/