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.
Building Applications on  Facebook Platform David Zhuang Entrepreneur’s Playfield
Overview <ul><li>Open Distribution to Millions of Users </li></ul><ul><li>Capabilities / Integration Points </li></ul><ul>...
Open Distribution <ul><li>Build It, And They Are Already There  </li></ul><ul><ul><li>Developers: Equal Footing with Organ...
Capabilities / Integration Points <ul><li>Product Directory </li></ul><ul><li>About </li></ul><ul><li>Left Nav </li></ul><...
Canvas: Embedded Application Left  Nav Canvas
Home Page: Viral Distribution Left  Nav News  Feed
Profile: Viral Distribution Left  Nav News  Feed Profile Box
Architecture: Traditional Web App Web/App Server Database 1. HTTP Request 2. HTML Response SQL  Query Data Your Server
Architecture: Facebook App - Canvas Web/App  Server Database 1. HTTP 6. HTML SQL  Query Data Your Server Facebook  Server ...
Architecture: Facebook App - Profile 0.  API / FBML (Pushed  Separately) Web/App  Server Database 1. HTTP 2. HTML SQL  Que...
Components <ul><li>API </li></ul><ul><ul><li>Web Service API </li></ul></ul><ul><ul><li>Client Library:  </li></ul></ul><u...
API <ul><li>Web Service API: Well Documented </li></ul><ul><li>API Client Library </li></ul><ul><ul><li>Mostly Covered by ...
API Client Lib Function Examples <ul><li>$facebook->redirect($url) </li></ul><ul><li>$facebook->require_login() / $faceboo...
FQL <ul><li>Very Similar to SQL </li></ul><ul><ul><li>Select From One Table At a Time, No Join </li></ul></ul><ul><ul><li>...
FBML <ul><li>A Subset of HTML </li></ul><ul><ul><li>Excluded: <script> </li></ul></ul><ul><ul><li>Limited: <style> (intern...
FBML Tags Example: Markup Tags Code: <fb:dashboard>   < fb:action  href=&quot;new.php&quot;>Create a new photo album </fb:...
FBML Tags Example: Procedural Tags Code: < fb:if-can-see  uid=&quot;12345&quot; what=&quot;profile&quot;>       You're all...
Resources <ul><li>Facebook Platform Documentation </li></ul><ul><ul><li>Anatomy of a Facebook Application </li></ul></ul><...
Success Factors <ul><li>Product Definition </li></ul><ul><ul><li>Social in Nature </li></ul></ul><ul><ul><li>Unsatisfied N...
Contact Info David Zhuang [email_address]
Upcoming SlideShare
Loading in …5
×

Facebook Platform - Tech

20,888 views

Published on

Facebook Platform technology overview - from an entrepreneur/developer's perspective

Published in: Technology, Business

Facebook Platform - Tech

  1. 1. Building Applications on Facebook Platform David Zhuang Entrepreneur’s Playfield
  2. 2. Overview <ul><li>Open Distribution to Millions of Users </li></ul><ul><li>Capabilities / Integration Points </li></ul><ul><li>Architecture </li></ul><ul><li>Components </li></ul><ul><li>Resources </li></ul>
  3. 3. Open Distribution <ul><li>Build It, And They Are Already There </li></ul><ul><ul><li>Developers: Equal Footing with Organizations </li></ul></ul><ul><li>Platform Is Completely Open </li></ul><ul><li>Automated Viral Distribution Engine: News Feed </li></ul><ul><li>New Model for Entrepreneurs </li></ul><ul><ul><li>Experiment: Low Investment (Time/Money) </li></ul></ul><ul><ul><li>If It Works, Ramp up </li></ul></ul>
  4. 4. Capabilities / Integration Points <ul><li>Product Directory </li></ul><ul><li>About </li></ul><ul><li>Left Nav </li></ul><ul><li>Facebook Canvas Pages </li></ul><ul><ul><li>Home </li></ul></ul><ul><ul><li>User Dashboard </li></ul></ul><ul><ul><li>Settings </li></ul></ul><ul><li>Profile </li></ul><ul><ul><li>Profile Box </li></ul></ul><ul><ul><li>Profile Action Links </li></ul></ul><ul><li>Privacy Settings </li></ul><ul><li>News Feed </li></ul><ul><li>Alerts </li></ul><ul><li>Message Attachments </li></ul><ul><li>Requests </li></ul>
  5. 5. Canvas: Embedded Application Left Nav Canvas
  6. 6. Home Page: Viral Distribution Left Nav News Feed
  7. 7. Profile: Viral Distribution Left Nav News Feed Profile Box
  8. 8. Architecture: Traditional Web App Web/App Server Database 1. HTTP Request 2. HTML Response SQL Query Data Your Server
  9. 9. Architecture: Facebook App - Canvas Web/App Server Database 1. HTTP 6. HTML SQL Query Data Your Server Facebook Server 2. HTTP / REST 3. API / FQL 4. API Rsp 5. FBML
  10. 10. Architecture: Facebook App - Profile 0. API / FBML (Pushed Separately) Web/App Server Database 1. HTTP 2. HTML SQL Query Data Your Server Facebook Server
  11. 11. Components <ul><li>API </li></ul><ul><ul><li>Web Service API </li></ul></ul><ul><ul><li>Client Library: </li></ul></ul><ul><ul><ul><li>Official: PHP, Java </li></ul></ul></ul><ul><ul><ul><li>Unofficial: Perl, Python, Ruby, VB.NET, and others </li></ul></ul></ul><ul><li>FQL </li></ul><ul><ul><li>Similar to SQL </li></ul></ul><ul><ul><li>Access to user profile, friend, group, event, and photo </li></ul></ul><ul><li>FBML </li></ul><ul><ul><li>Similar to HTML </li></ul></ul><ul><ul><li>Subset of HTML + Proprietary Extensions </li></ul></ul>
  12. 12. API <ul><li>Web Service API: Well Documented </li></ul><ul><li>API Client Library </li></ul><ul><ul><li>Mostly Covered by Web Service API Documentation </li></ul></ul><ul><ul><li>For the Rest, Read Code (Only 2 Files) </li></ul></ul><ul><ul><ul><li>facebook.php </li></ul></ul></ul><ul><ul><ul><li>facebookapi_php5_restlib.php </li></ul></ul></ul><ul><li>Access Facebook User Data </li></ul><ul><ul><li>Profile, Friends, Group, Event, Photo, etc. </li></ul></ul><ul><li>Update User Views </li></ul><ul><ul><li>Profile, Feed, etc. </li></ul></ul>
  13. 13. API Client Lib Function Examples <ul><li>$facebook->redirect($url) </li></ul><ul><li>$facebook->require_login() / $facebook->require_add() </li></ul><ul><li>$facebook->get_login_url() / $facebook->get_add_url() </li></ul><ul><li>$facebook->api_client->feed_publishStoryToUser($title, $body, ...) </li></ul><ul><li>$facebook->api_client->friends_get() </li></ul><ul><li>$facebook->api_client->friends_getAppUsers() </li></ul><ul><li>$facebook->api_client->groups_get ($uid=null, $gids=null) </li></ul><ul><li>$facebook->api_client->profile_setFBML($markup, $uid=null) </li></ul>
  14. 14. FQL <ul><li>Very Similar to SQL </li></ul><ul><ul><li>Select From One Table At a Time, No Join </li></ul></ul><ul><ul><li>Query Must Be Indexable </li></ul></ul><ul><li>Access Facebook Database Tables </li></ul><ul><ul><li>user, friend, group, group_member, event, event_member, photo, album, photo_tag </li></ul></ul>
  15. 15. FBML <ul><li>A Subset of HTML </li></ul><ul><ul><li>Excluded: <script> </li></ul></ul><ul><ul><li>Limited: <style> (internal CSS only) </li></ul></ul><ul><ul><li>Cached: <img> </li></ul></ul><ul><ul><li>Hidden Fields Added (For Security): <form> </li></ul></ul><ul><li>Proprietary Extensions </li></ul><ul><ul><li>Markup Tags: UI Elements </li></ul></ul><ul><ul><li>Procedural Tags: Control Program Flow </li></ul></ul><ul><li>Mock Ajax </li></ul>
  16. 16. FBML Tags Example: Markup Tags Code: <fb:dashboard> < fb:action href=&quot;new.php&quot;>Create a new photo album </fb:action> < fb:action href=&quot;you.php&quot;>Photos of You </fb:action> </fb:dashboard> Preview:
  17. 17. FBML Tags Example: Procedural Tags Code: < fb:if-can-see uid=&quot;12345&quot; what=&quot;profile&quot;>     You're allowed to see 12345's profile, chum!         <fb:else>         No profile for you!     </fb:else> </fb:if-can-see>
  18. 18. Resources <ul><li>Facebook Platform Documentation </li></ul><ul><ul><li>Anatomy of a Facebook Application </li></ul></ul><ul><ul><li>Step-to-Step Guide to Creating an Application </li></ul></ul><ul><li>Facebook Platform Wiki </li></ul><ul><ul><li>Getting Started Guide </li></ul></ul><ul><ul><li>Basic Application Architecture </li></ul></ul><ul><li>Facebook Developer Forum </li></ul><ul><ul><li>Get Your Questions Answered </li></ul></ul>
  19. 19. Success Factors <ul><li>Product Definition </li></ul><ul><ul><li>Social in Nature </li></ul></ul><ul><ul><li>Unsatisfied Needs </li></ul></ul><ul><li>Product Design/Development </li></ul><ul><ul><li>Need a Hacker in Your Team: Non-Trivial Project </li></ul></ul><ul><li>Scalability Plan </li></ul><ul><ul><li>Much Shorter Ramp-up Time </li></ul></ul><ul><li>Monetization Strategy </li></ul><ul><li>You Need a Team! </li></ul>
  20. 20. Contact Info David Zhuang [email_address]

×