Facebook development platformFor .net Developers
Photographing           Music           Startups           Entrepreneurship   www.lidans.comAbout me   Interests          ...
Agenda    Introduction to facebook platform    Facebook architecture, Platform components    Enhancing facebook pages with...
Part 1Introduction tofacebook platform
20 Minutes on facebook...                                    FRIEND  LINKS             EVENT                              ...
20 Minutes on facebook...        500 GB         of data every 20 minutes!               ~36 TB/day               ~13 PB/year
How to handle such a freakamount of information?open source
facebook infrastructure
facebook infrastructureMore information at:http://developers.facebook.com/opensource
facebook platform- why?More than            of facebook users engaged70%         with facebook applications            eve...
Platform Core Components  Social Graph API     Facebook Insights Social Plugins      Open Graph Protocol
Part 2Enhancing facebook pageswith FBML
Static FBML Application   Provides HTML, CSS and  JavaScript functionality on       facebook pages
What’s needed?   Be admin of your facebook page   Install Static FBML Application   Add FBML Tabs with static content
Before getting started...facebook pages      Max width is     only             520px                     You cannot       ...
DemoAdding FBML Tab tofacebook page
FBML
FBML>fb:user-agent includes="ie 6, ie 7”>     <link rel="stylesheet” href="ie.css” /></fb:user-agent>>fb:swf   imgstyle="b...
FBML>fb:swf  imgstyle="border-width: 3px; border-color: white;”>fb:user-agent includes="ie 6, ie 7”>         swfsrc="http:...
Part 3Facebook for Websites
Platform Core Components              Open Graph Protocol
A Webpage...
Is a real-world facebook object!                                 Lidan   Like     Comment   Check-in    PictureRecommend
What do you LIKE in thereal-world?(Except your smartphone)
Movies
Food
Government
BarGovernment
Public Figure
Actor
What user likes in the real-worldBased off of the most popular categories for Facebook PagesActivitiesBusinesses          ...
Implementing the Open Graph
Implementing the Open Graph>html xmlns="http://www.w3.org/1999/xhtml”>      xmlns="http://www.w3.org/1999/xhtml”  <head>  ...
Open Graph Meta-Tagsfb:admins           og:street-address               og:latitude og:longitudeog:audio              og:e...
Open Graph Meta-TagsMore information at:     fb:admins              og:street-address                       og:latitude og...
Platform Core Components        Social Plugins
Social Plugins               Provides integration between               facebook platform and your               websiteLe...
Social Plugins   Like Button       Login   Activity Feed     Facepile   Recommendations   Comments   Like Box          Liv...
Like Box    Enable users to like your  facebook page and view its   stream directly from your            website
Like BoxIFrame<iframesrc="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;wi...
DemoGenerate code for all of the social plugins at:   Like Boxhttp://developers.facebook.com/docs/plugins
Like Button  Lets users share pages fromyour site back to their facebook     profile with one click
DemoLike Button
Recommendations  Gives users personalizedsuggestions for pages on your     site they might like
Advanced pluginsSetup a new application at:   Create a new facebookhttp://developers.facebook.com/setup   application
Comments Lets users comment on any piece of content on your site
DemoComments
Live Stream Lets users share activity andcomments in real time, best for       real-time events
DemoLive Stream
Login & Registration Allows users to easily sign up  for your website with their       facebook account
More information at:http://developers.facebook.com/docs/plugins/registration
A Short BreakGood time to update your status
Part 4facebook apps development
TOP Facebook apps (January 2011)98,607,51753,508,02237,187,222346,300
What motivates users to usefacebook apps?too much free time
What makes facebook apps so successful?   Social                 Competitiveness               Simple  Viral              ...
Platform Core Components         Social Graph API
The Social Graph“Privacy no longer a social norm”                             - Mark Zuckerberg
The Social Graphhttps://graph.facebook.com/ me/ albums/                                                            comment...
ObjectsUnique ID       https://graph.facebook.com/ lidan                                            698752998{     id: "69...
Relationships               https://graph.facebook.com/ 698752998 /feed{id: "698752998_187701601241105“,from: {       name...
Relationships          https://graph.facebook.com/lidan/friends          https://graph.facebook.com/lidan/photos          ...
AuthenticationOAuth 2.0-based authentication        https://graph.facebook.com/me?access_token=2227470867|2.v        UgGGA...
AuthenticationOAuth 2.0-based authentication        https://www.facebook.com/dialog/oauth?client_id=114587458        https...
PublishingHTTP POST https://graph.facebook.com/18754916/attendingHTTP POST https://graph.facebook.com/lidan/feed          ...
DeletingHTTP DELETE https://graph.facebook.com/5174466698
Deleting     HTTP DELETE https://graph.facebook.com/5174466698More info about Facebook Social Graph:http://graph.facebook....
How facebook app works                      5 Response                     For application   6 HTML                       ...
What’s needed?Web Server           Facebook    ApplicationValid domain or IP  (NO localhost)                       SDK    ...
Facebook applicationsSetup a new application at:   Setup a new facebookhttp://www.facebook.com/developers   application
Application Settings           APP_NAME
Application Pages
facebook Official SDKs             FBJS
facebook C#.NET SDKs     Facesharp     http://facesharp.codeplex.com     Facebook C# SDK     http://facebooksdk.codeplex.com
DemoCreate facebook applicationwith ASP.NET MVC
Review   Facebook platform   Facebook pages & Static FBML   Facebook for Websites   Facebook Applications
More TopicsAdvanced APIsPerformanceFacebook CreditsPromote your application
Related links
Thanks! Questions?
Facebook Platform for Developers
Facebook Platform for Developers
Facebook Platform for Developers
Upcoming SlideShare
Loading in...5
×

Facebook Platform for Developers

5,036

Published on

Facebook platform for .net Developers
@ Web Development Community, Israel, 06.02.2011

for more information: http://www.lidans.com

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,036
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
113
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Facebook Platform for Developers

  1. 1. Facebook development platformFor .net Developers
  2. 2. Photographing Music Startups Entrepreneurship www.lidans.comAbout me Interests Contact
  3. 3. Agenda Introduction to facebook platform Facebook architecture, Platform components Enhancing facebook pages with FBML Using Static FBML Application Facebook for Websites Open Graph Protocol, Social Plugins Facebook apps development With ASP.NET MVC & Social Graph API
  4. 4. Part 1Introduction tofacebook platform
  5. 5. 20 Minutes on facebook... FRIEND LINKS EVENT PHOTOS MESSAGES SHARED REQUESTS INVITES UPLOADED SENT ACCEPTED1,000,000 1,484,000 1,972,000 2,716,000 2,716,000 TAGGED STATUS WALL COMMENTS PHOTOS UPDATES POSTS MADE 1,323,000 1,851,000 1,587,000 10,208,000
  6. 6. 20 Minutes on facebook... 500 GB of data every 20 minutes! ~36 TB/day ~13 PB/year
  7. 7. How to handle such a freakamount of information?open source
  8. 8. facebook infrastructure
  9. 9. facebook infrastructureMore information at:http://developers.facebook.com/opensource
  10. 10. facebook platform- why?More than of facebook users engaged70% with facebook applications every dayMore than facebook users engaged with250M facebook on 2.5M websites every monthMore than facebook users accessing200M facebook through their mobile devices every day
  11. 11. Platform Core Components Social Graph API Facebook Insights Social Plugins Open Graph Protocol
  12. 12. Part 2Enhancing facebook pageswith FBML
  13. 13. Static FBML Application Provides HTML, CSS and JavaScript functionality on facebook pages
  14. 14. What’s needed? Be admin of your facebook page Install Static FBML Application Add FBML Tabs with static content
  15. 15. Before getting started...facebook pages Max width is only 520px You cannot auto run JavaScript in FBML tab Use external CSS6 Tabs maximum file instead of Use FBJS <style> tag
  16. 16. DemoAdding FBML Tab tofacebook page
  17. 17. FBML
  18. 18. FBML>fb:user-agent includes="ie 6, ie 7”> <link rel="stylesheet” href="ie.css” /></fb:user-agent>>fb:swf imgstyle="border-width: 3px; border-color: white;” swfsrc="http://www.youtube.com/v/CfMGFHiTKLY” imgsrc="http://i4.ytimg.com/vi/CfMGFHiTKLY/default.jpg” width="480” height="390” />
  19. 19. FBML>fb:swf imgstyle="border-width: 3px; border-color: white;”>fb:user-agent includes="ie 6, ie 7”> swfsrc="http://www.youtube.com/v/CfMGFHiTKLY” <link rel="stylesheet” href="ie.css” /> imgsrc="http://i4.ytimg.com/vi/CfMGFHiTKLY/default.jpg”FBML Documentation is available at: width="480”</fb:user-agent> height="390” />http://developers.facebook.com/docs/reference/fbmlRemember that FBML is deprecated
  20. 20. Part 3Facebook for Websites
  21. 21. Platform Core Components Open Graph Protocol
  22. 22. A Webpage...
  23. 23. Is a real-world facebook object! Lidan Like Comment Check-in PictureRecommend
  24. 24. What do you LIKE in thereal-world?(Except your smartphone)
  25. 25. Movies
  26. 26. Food
  27. 27. Government
  28. 28. BarGovernment
  29. 29. Public Figure
  30. 30. Actor
  31. 31. What user likes in the real-worldBased off of the most popular categories for Facebook PagesActivitiesBusinesses company, restaurantGroups sports_team, causeOrganizations band, governmentPeople musician, actorPlaces city, countryProducts and Entertainment book, movie, tv_showWebsites website, blog, article
  32. 32. Implementing the Open Graph
  33. 33. Implementing the Open Graph>html xmlns="http://www.w3.org/1999/xhtml”> xmlns="http://www.w3.org/1999/xhtml” <head> xmlns:og=“http://ogp.me/ns#” <title> The Social Network (2010) </title> xmlns:fb="http://www.facebook.com/2008/fbml”> </head> <head> <title> The Social Network (2010) </title> </head> property="og:title” content="The Social Network” /> <meta <meta property="og:type” content="Movie” /> <meta property="og:url” content="http://www.imdb.com/897” /> <meta property="og:image” content="http://www.imdb.com/897/theSocialNetwork.jpg” /></head>
  34. 34. Open Graph Meta-Tagsfb:admins og:street-address og:latitude og:longitudeog:audio og:emailog:video og:phone_number
  35. 35. Open Graph Meta-TagsMore information at: fb:admins og:street-address og:latitude og:longitudehttp://ogp.me og:audio og:email og:video og:phone_number
  36. 36. Platform Core Components Social Plugins
  37. 37. Social Plugins Provides integration between facebook platform and your websiteLet user see what his friends haveliked, commented on or sharedacross the web
  38. 38. Social Plugins Like Button Login Activity Feed Facepile Recommendations Comments Like Box Live Stream
  39. 39. Like Box Enable users to like your facebook page and view its stream directly from your website
  40. 40. Like BoxIFrame<iframesrc="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height=427"scrolling="no"frameborder="0"style="border:none; overflow:hidden; width:292px;height:427px;"allowTransparency="true"></iframe>XFBML<scriptsrc="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/platform" width="292"show_faces="true" stream="true" header="true"></fb:like-box>
  41. 41. DemoGenerate code for all of the social plugins at: Like Boxhttp://developers.facebook.com/docs/plugins
  42. 42. Like Button Lets users share pages fromyour site back to their facebook profile with one click
  43. 43. DemoLike Button
  44. 44. Recommendations Gives users personalizedsuggestions for pages on your site they might like
  45. 45. Advanced pluginsSetup a new application at: Create a new facebookhttp://developers.facebook.com/setup application
  46. 46. Comments Lets users comment on any piece of content on your site
  47. 47. DemoComments
  48. 48. Live Stream Lets users share activity andcomments in real time, best for real-time events
  49. 49. DemoLive Stream
  50. 50. Login & Registration Allows users to easily sign up for your website with their facebook account
  51. 51. More information at:http://developers.facebook.com/docs/plugins/registration
  52. 52. A Short BreakGood time to update your status
  53. 53. Part 4facebook apps development
  54. 54. TOP Facebook apps (January 2011)98,607,51753,508,02237,187,222346,300
  55. 55. What motivates users to usefacebook apps?too much free time
  56. 56. What makes facebook apps so successful? Social Competitiveness Simple Viral Real time Anytime
  57. 57. Platform Core Components Social Graph API
  58. 58. The Social Graph“Privacy no longer a social norm” - Mark Zuckerberg
  59. 59. The Social Graphhttps://graph.facebook.com/ me/ albums/ comment Profile Pictures notes My Pictures Picture Picture Picture comment
  60. 60. ObjectsUnique ID https://graph.facebook.com/ lidan 698752998{ id: "698752998“, name: "Lidan Hifi“, first_name: "Lidan“, last_name: "Hifi“, link: "http://www.facebook.com/lidan", birthday: "04/27/1988“, location: { id: "113187025363265“, name: "BeEr Sheva`, Hadarom, Israel" }, gender: "male“}
  61. 61. Relationships https://graph.facebook.com/ 698752998 /feed{id: "698752998_187701601241105“,from: { name: "Lidan Hifi“, id: "698752998"}message: " ‫רק הטלפון שלי עם התיקון שגיאות שלו יכול לאחל לאנשים שנה מלאה‬"...‫-,בלוויות במקום שנה מלאה בחוויות‬privacy: { description: "Friends Only; “, value: "CUSTOM“, friends: "ALL_FRIENDS"},type: "status“,created_time: "2011-01-02T13:05:10+0000“,likes: 5}
  62. 62. Relationships https://graph.facebook.com/lidan/friends https://graph.facebook.com/lidan/photos https://graph.facebook.com/lidan/videos https://graph.facebook.com/lidan/likes https://graph.facebook.com/lidan/notes https://graph.facebook.com/lidan/links https://graph.facebook.com/lidan/events https://graph.facebook.com/lidan/groups
  63. 63. AuthenticationOAuth 2.0-based authentication https://graph.facebook.com/me?access_token=2227470867|2.v UgGGAgEL6yF_LEYygniXA__.3600.1296417600698752998|rlW FrcgmkEVVKd7aYi3bKjNZ1gUPermissionsYou must request specific permissions from the userread_stream, publish_stream, user_photos,user_checkins, user_location, offline_access
  64. 64. AuthenticationOAuth 2.0-based authentication https://www.facebook.com/dialog/oauth?client_id=114587458 https://www.facebook.com/dialog/oauth?client_id=114587458 https://graph.facebook.com/me?access_token=2227470867|2.v &redirect_uri=http://www.lidans.com UgGGAgEL6yF_LEYygniXA__.3600.1296417600698752998|rlW &redirect_uri=http://www.lidans.com FrcgmkEVVKd7aYi3bKjNZ1gUPermissionsYou must request specific permissions from the userread_stream, publish_stream, user_photos,user_checkins, user_location, offline_access
  65. 65. PublishingHTTP POST https://graph.facebook.com/18754916/attendingHTTP POST https://graph.facebook.com/lidan/feed { message: ‘Hi, Do you like the graph API?’ }HTTP POST https://graph.facebook.com/lidan/checkins { coordinates: { 32.175876, 34.889177 }, place: 149111711803941, message: ‘playing with the graph API at Microsoft Israel’ }
  66. 66. DeletingHTTP DELETE https://graph.facebook.com/5174466698
  67. 67. Deleting HTTP DELETE https://graph.facebook.com/5174466698More info about Facebook Social Graph:http://graph.facebook.com
  68. 68. How facebook app works 5 Response For application 6 HTML Response userApplication server 3 API Call 4 API 1 User Response Request 2 Request For application
  69. 69. What’s needed?Web Server Facebook ApplicationValid domain or IP (NO localhost) SDK  Application Id  API Key  AppSecret
  70. 70. Facebook applicationsSetup a new application at: Setup a new facebookhttp://www.facebook.com/developers application
  71. 71. Application Settings APP_NAME
  72. 72. Application Pages
  73. 73. facebook Official SDKs FBJS
  74. 74. facebook C#.NET SDKs Facesharp http://facesharp.codeplex.com Facebook C# SDK http://facebooksdk.codeplex.com
  75. 75. DemoCreate facebook applicationwith ASP.NET MVC
  76. 76. Review Facebook platform Facebook pages & Static FBML Facebook for Websites Facebook Applications
  77. 77. More TopicsAdvanced APIsPerformanceFacebook CreditsPromote your application
  78. 78. Related links
  79. 79. Thanks! Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×