Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
funP  開發者俱樂部 十月份聚會 [email_address]
> 33,000 apps
< 10 apps
fbOpen http://developers.facebook.com/fbopen/ shindig http://incubator.apache.org/shindig/
Introduction
Canvas Your application Here
應用程式頁面 Your application Here
Profile box Wide Narrow
個人檔案元件 Wide Narrow
Mini-feed Newsfeed
最新動態 麻吉快報
事件 最新動態 Mini-feed 麻吉快報 Newsfeed
Request / Notification
請求
Flow facebook Your App Server user request request API / FQL calls API / FQL results response FBML FBJS http://apps.facebo...
facebook Your App Server Client library funP 麻吉 Modified client library
Development building blocks API FBML FQL FBJS
Facebook API
API <ul><li>Users </li></ul><ul><ul><li>getInfo </li></ul></ul><ul><li>Friends </li></ul><ul><ul><li>get </li></ul></ul><u...
API Test Console http://developers.facebook.com/tools.php?api
FQL Facebook Query Language
tables Friend uid1 uid2 User uid name pic sex Group gid name pic desc Group member uid gid position
Scenario <ul><li>顯示有使用同一個 application 的好友 </li></ul><ul><li>$ids = friends.getAppUsers(); </li></ul><ul><li>$users = users...
FQL  <ul><li>$query = “ </li></ul><ul><li>SELECT uid, name, pic FROM user  </li></ul><ul><li>WHERE uid IN ( </li></ul><ul>...
Why FQL? <ul><li>reduce the number of requests necessary </li></ul><ul><li>reduces bandwidth and parsing costs  </li></ul>...
FBML Facebook Mark-up Language
顯示複雜的原件 <fb:multi-friend-selector/>
一致的外表 <fb:tabs/> <fb:tab-item/>
邏輯判斷 <ul><li><fb:visible-to-owner/> </li></ul><ul><li><fb:visible-to-user/> </li></ul><ul><li><fb:visible-to-friends/> </l...
動作 <ul><li>Visibility </li></ul><ul><ul><li>clicktoshow </li></ul></ul><ul><ul><li>clicktohide </li></ul></ul><ul><ul><li>...
FBML Test Console http://developers.facebook.com/tools.php?fbml FBML HTML Preview
FBJS Facebook Javascript
Security <ul><li>function foo(bar) { </li></ul><ul><li>var obj = {prop: bar};  </li></ul><ul><li>return obj.prop;  </li></...
Security <ul><li>document.getElementById(‘div’).innerHTML = ‘abc’; </li></ul><ul><li>document.getElementById(‘div’).setInn...
FBJS - libraries <ul><li>Ajax </li></ul><ul><ul><li>var ajax = new Ajax();  </li></ul></ul><ul><ul><li>ajax.ondone = funct...
Tutorial
Getting started <ul><li>add the “Developer” app </li></ul><ul><li>create your app </li></ul><ul><li>download the client li...
1. add the “Developer” app <ul><li>go to  http://www.new.facebook.com/developers/ </li></ul><ul><li>click “Allow” </li></ul>
2a. create your app <ul><li>click “set up new application” </li></ul>
2b. edit app settings <ul><li>fill in  application name </li></ul><ul><li>check to agree terms </li></ul><ul><li>show  opt...
facebook Your App Server request Canvas Page URL http://funp.com/apps/ funpresent / request Callback URL http://example.co...
2c. edit app settings <ul><li>select “yes” for  Can your application be added on Facebook? </li></ul><ul><li>check “users”...
3. download the client lib <ul><li># wget  http://developers.new.facebook.com/clientlibs/facebook-platform.tar.gz </li></u...
4. copy api key & secret
5. hello facebook <ul><li># vim facebook-platform/test.php </li></ul><ul><li><?php </li></ul><ul><li>include_once(‘client/...
Conclusion
Conclusion <ul><li>opportunities </li></ul><ul><ul><li>existing users and connections </li></ul></ul><ul><ul><li>viral cha...
marketplace photos feed profile group users auth fql money pages event … …
<fp: ... />
 
Thank you http://funp.com/
Upcoming SlideShare
Loading in …5
×

funP 開發者俱樂部 十月份聚會

4,079 views

Published on

介紹如何開發 facebook application

Published in: Technology
  • Be the first to comment

funP 開發者俱樂部 十月份聚會

  1. 1. funP 開發者俱樂部 十月份聚會 [email_address]
  2. 2. > 33,000 apps
  3. 3. < 10 apps
  4. 4. fbOpen http://developers.facebook.com/fbopen/ shindig http://incubator.apache.org/shindig/
  5. 5. Introduction
  6. 6. Canvas Your application Here
  7. 7. 應用程式頁面 Your application Here
  8. 8. Profile box Wide Narrow
  9. 9. 個人檔案元件 Wide Narrow
  10. 10. Mini-feed Newsfeed
  11. 11. 最新動態 麻吉快報
  12. 12. 事件 最新動態 Mini-feed 麻吉快報 Newsfeed
  13. 13. Request / Notification
  14. 14. 請求
  15. 15. Flow facebook Your App Server user request request API / FQL calls API / FQL results response FBML FBJS 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
  16. 16. facebook Your App Server Client library funP 麻吉 Modified client library
  17. 17. Development building blocks API FBML FQL FBJS
  18. 18. Facebook API
  19. 19. API <ul><li>Users </li></ul><ul><ul><li>getInfo </li></ul></ul><ul><li>Friends </li></ul><ul><ul><li>get </li></ul></ul><ul><li>Groups </li></ul><ul><ul><li>getMembers </li></ul></ul><ul><li>FQL </li></ul><ul><ul><li>query </li></ul></ul><ul><li>Fbml </li></ul><ul><ul><li>refreshImgSrc </li></ul></ul><ul><li>Feed </li></ul><ul><ul><li>publishUserAction </li></ul></ul><ul><li>Notifications </li></ul><ul><ul><li>send </li></ul></ul><ul><li>Profile </li></ul><ul><ul><li>setFBML </li></ul></ul>
  20. 20. API Test Console http://developers.facebook.com/tools.php?api
  21. 21. FQL Facebook Query Language
  22. 22. tables Friend uid1 uid2 User uid name pic sex Group gid name pic desc Group member uid gid position
  23. 23. Scenario <ul><li>顯示有使用同一個 application 的好友 </li></ul><ul><li>$ids = friends.getAppUsers(); </li></ul><ul><li>$users = users.getInfo( </li></ul><ul><li>$ids, </li></ul><ul><li>array(‘name’, ‘pic’) </li></ul><ul><li>); </li></ul>
  24. 24. FQL <ul><li>$query = “ </li></ul><ul><li>SELECT uid, name, pic FROM user </li></ul><ul><li>WHERE uid IN ( </li></ul><ul><ul><li>SELECT uid2 FROM friend </li></ul></ul><ul><ul><li>WHERE uid1 = $user </li></ul></ul><ul><li>) AND is_app_user </li></ul><ul><li>“ ; </li></ul><ul><li>$users = fql.query($query); </li></ul>
  25. 25. Why FQL? <ul><li>reduce the number of requests necessary </li></ul><ul><li>reduces bandwidth and parsing costs </li></ul><ul><li>consistent, unified interface </li></ul>
  26. 26. FBML Facebook Mark-up Language
  27. 27. 顯示複雜的原件 <fb:multi-friend-selector/>
  28. 28. 一致的外表 <fb:tabs/> <fb:tab-item/>
  29. 29. 邏輯判斷 <ul><li><fb:visible-to-owner/> </li></ul><ul><li><fb:visible-to-user/> </li></ul><ul><li><fb:visible-to-friends/> </li></ul>
  30. 30. 動作 <ul><li>Visibility </li></ul><ul><ul><li>clicktoshow </li></ul></ul><ul><ul><li>clicktohide </li></ul></ul><ul><ul><li>clicktotoggle </li></ul></ul><ul><li>Mock AJAX </li></ul><ul><ul><li>clickrewriteid </li></ul></ul><ul><ul><li>clickrewriteurl </li></ul></ul><ul><ul><li>clickrewriteform </li></ul></ul>
  31. 31. FBML Test Console http://developers.facebook.com/tools.php?fbml FBML HTML Preview
  32. 32. FBJS Facebook Javascript
  33. 33. Security <ul><li>function foo(bar) { </li></ul><ul><li>var obj = {prop: bar}; </li></ul><ul><li>return obj.prop; </li></ul><ul><li>} </li></ul>function a12345_ foo( a12345_ bar) { var a12345_ obj = {prop: a12345_ bar}; return a12345_ obj.prop; }
  34. 34. Security <ul><li>document.getElementById(‘div’).innerHTML = ‘abc’; </li></ul><ul><li>document.getElementById(‘div’).setInnerFBML(‘abc’); </li></ul><ul><li>v = document.getElementById(‘input_text’).value; </li></ul><ul><li>v = document.getElementById(‘input_text’).getValue(); </li></ul><ul><li>document.getElementById(‘p').style.display = 'none'; </li></ul><ul><li>document.getElementById(‘p').setStyle(‘display’,'none‘); </li></ul>
  35. 35. FBJS - libraries <ul><li>Ajax </li></ul><ul><ul><li>var ajax = new Ajax(); </li></ul></ul><ul><ul><li>ajax.ondone = function(data) { …} </li></ul></ul><ul><ul><li>ajax.post(url); </li></ul></ul><ul><li>Dialogs </li></ul><ul><ul><li>var d = new Dialog(); </li></ul></ul><ul><ul><li>d.showMessage('Dialog', 'Hello World.'); </li></ul></ul><ul><li>Animation </li></ul><ul><ul><li>Animation(document.getElementById('container')). </li></ul></ul><ul><ul><li>to('height', '0px').to('width', '0px'). </li></ul></ul><ul><ul><li>to('opacity', 0).blind().hide().go(); </li></ul></ul>
  36. 36. Tutorial
  37. 37. Getting started <ul><li>add the “Developer” app </li></ul><ul><li>create your app </li></ul><ul><li>download the client lib </li></ul><ul><li>fill in api key & secret </li></ul><ul><li>hello facebook </li></ul>
  38. 38. 1. add the “Developer” app <ul><li>go to http://www.new.facebook.com/developers/ </li></ul><ul><li>click “Allow” </li></ul>
  39. 39. 2a. create your app <ul><li>click “set up new application” </li></ul>
  40. 40. 2b. edit app settings <ul><li>fill in application name </li></ul><ul><li>check to agree terms </li></ul><ul><li>show optional fields </li></ul><ul><li>fill in callback url ( real url of your app on your server) </li></ul><ul><li>fill in canvas page url ( virtual url of your app on facebook ) and make sure it is Available </li></ul>
  41. 41. facebook Your App Server request Canvas Page URL http://funp.com/apps/ funpresent / request Callback URL http://example.com/funpresent/
  42. 42. 2c. edit app settings <ul><li>select “yes” for Can your application be added on Facebook? </li></ul><ul><li>check “users” for Who can add your application to their Facebook account? </li></ul><ul><li>check Developer Mode </li></ul><ul><li>submit </li></ul>
  43. 43. 3. download the client lib <ul><li># wget http://developers.new.facebook.com/clientlibs/facebook-platform.tar.gz </li></ul><ul><li># tar xvf facebook-platform.tar.gz </li></ul>
  44. 44. 4. copy api key & secret
  45. 45. 5. hello facebook <ul><li># vim facebook-platform/test.php </li></ul><ul><li><?php </li></ul><ul><li>include_once(‘client/facebook.php’); </li></ul><ul><li>$facebook = new Facebook( </li></ul><ul><li>‘ <API_KEY>’, ‘<SECRET>’); </li></ul><ul><li>$facebook->require_frame(); </li></ul><ul><li>$user = $facebook->require_login(); </li></ul><ul><li>echo ‘hello <fb:name uid=“’. </li></ul><ul><li>$user.’“ useyou=&quot;false&quot;/>’; </li></ul><ul><li>?> </li></ul>
  46. 46. Conclusion
  47. 47. Conclusion <ul><li>opportunities </li></ul><ul><ul><li>existing users and connections </li></ul></ul><ul><ul><li>viral channels: feeds, requests, notifications </li></ul></ul><ul><li>difficulties </li></ul><ul><ul><li>FBML, FBJS </li></ul></ul>
  48. 48. marketplace photos feed profile group users auth fql money pages event … …
  49. 49. <fp: ... />
  50. 51. Thank you http://funp.com/

×