funP 開發者俱樂部
十月份聚會
 tippy@funp.com
今日議程



• 6:30~7:30 晚餐與自由交流時間
• 7:30~8:30 介紹 Facebook F8 平台開發環境
• 8:30~9:00 funP F8 Application 合作方案介紹
> 33,000 apps
< 10 apps
shindig                                fbOpen
http://incubator.apache.org/shindig/   http://developers.facebook.com/fbopen/
Introduction
Canvas




Your application Here
應用程式頁面




         Your application Here
Profile box

       Narrow
Wide
個人檔案元件

          Wide
         Narrow
Mini-feed   Newsfeed
最新動態   麻吉快報
最新動態
Mini-feed
            麻吉快報
事件          Newsfeed
Request / Notification
請求
Flow
          http://apps.facebook.com/myapp/page.php?q=abc
                    http://myappserver.com/page.php?q=abc
   ...
Server
            Your
            App




 Modified client library
    Client library
                     funP麻吉
facebo...
Development building blocks



   API        FQL




  FBML        FBJS
Facebook API
API

• Users          • Fbml
  – getInfo        – refreshImgSrc
• Friends        • Feed
  – get            – publishUserAc...
API Test Console
http://developers.facebook.com/tools.php?api
FQL
Facebook Query Language
tables

                  Group
Friend            member
uid1              uid
uid2              gid
           User   pos...
Scenario
• 顯示有使用同一個application的好友

$ids = friends.getAppUsers();
$users = users.getInfo(
            $ids,
            arr...
FQL

$query = “
SELECT uid, name, pic FROM user
WHERE uid IN (
  SELECT uid2 FROM friend
  WHERE uid1 = $user
) AND is_app...
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         • Mock AJAX
   – clicktoshow       – clickrewriteid
   – clicktohide       – clickrewriteurl
   – ...
FBML Test Console
http://developers.facebook.com/tools.php
?fbml

                    Preview

FBML



                   ...
FBJS
Facebook Javascript
Security

function foo(bar) {
  var obj = {prop: bar};
  return obj.prop;
}
function a12345_foo(a12345_bar) {
  var a12345...
Security

document.getElementById(‘div’).innerHTML = ‘abc’;
document.getElementById(‘div’).setInnerFBML(‘abc’);

v = docum...
FBJS - libraries

• Ajax
  var ajax = new Ajax();
  ajax.ondone = function(data) { …}
  ajax.post(url);

• Dialogs
  var d...
Tutorial
Getting started
1.   add the “Developer” app
2.   create your app
3.   download the client lib
4.   fill in api key & secr...
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 ...
Canvas Page URL                    Callback URL
http://funp.com/apps/funpresent/   http://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 y...
3. download the client lib
• # wget
  http://developers.new.facebook.com/cl
  ientlibs/facebook-platform.tar.gz
• # tar xv...
4. copy api key & secret
5. hello facebook
# vim facebook-platform/test.php

<?php

include_once(‘client/facebook.php’);
$facebook = new Facebook(
...
Conclusion
Conclusion
• opportunities
   – existing users and connections
   – viral channels: feeds, requests, notifications
• diffi...
feed    fql
         auth    profile
money                         marketplace
          group event
 … …           users ...
<fp: ... />
SocialApps in funP
      Nathan Chiu
   nathan@funP.com
大綱
• funPlugin & funPlatform
• 成功案例
• funPartner 合作方案
funPlugin & funPlatform
funPlatform SocialApps 標準
• Facebook F8 Platform
  – 應用服務頁、個人檔案元件、個人檔案頁籤
• OpenSocial (測試中,近期推出)
  – 應用服務頁、個人檔案元件、個人檔案頁籤
•...
funPlugin 特殊應用
• 紅利點數應用
funPlugin 特殊應用
• 社群網路、群組與活動應用服務
funP 競爭優勢
• 整合 代替 對抗
 – 跨網站相簿、部落格、影音、與微網誌支援
• 專注在本地市場
 – 應用服務開發商、應用服務、社群與行銷
• 開放平台
 – F8、OpenSocial與OpenID
成功案例
香港的 Facebook - 6Waves
• 香港公司,專心至力於中文Facebook應用服務,
  現今一天有數百萬PageViews。
• 對很多香港人而言,Facebook 就等於 6Waves.
• 香港Facebook為香港地區第一...
Slide.com
iLike.com
Elven Blood
funPartner 合作方案
開發SocialApps 最大的困難
• 技術與整合遇到瓶頸
• 網路廣告利潤不足
• 經營成本不易掌握
加入 funPartner 合作方案
•   提供應用服務經營所需頻寬與設備
•   協助廣告代理
•   技術協助
•   行銷資源協助
•   委外合作應用服務開發

• 詳細合作方案請與我們連絡:
    – singlelog@funP...
Q&A
nathan@funP.com
Thank you




  http://funp.com/
funP 麻吉 開發者俱樂部十月份聚會
Upcoming SlideShare
Loading in …5
×

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

2,495 views

Published on

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

No Downloads
Views
Total views
2,495
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

×