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