funP 開發者俱樂部 十月份聚會
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 5,014 views
Uploaded on

介紹如何開發 facebook application

介紹如何開發 facebook application

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,014
On Slideshare
5,011
From Embeds
3
Number of Embeds
1

Actions

Shares
Downloads
18
Comments
0
Likes
0

Embeds 3

http://www.slideshare.net 3

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