Your SlideShare is downloading. ×
0
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
funP 麻吉 開發者俱樂部十月份聚會
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,330

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,330
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×