Your SlideShare is downloading. ×
Facebook Platform for Developers
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

Facebook Platform for Developers


Published on

Facebook platform for .net Developers …

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

for more information:

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Facebook development platformFor .net Developers
  • 2. Photographing Music Startups Entrepreneurship www.lidans.comAbout me Interests Contact
  • 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. Part 1Introduction tofacebook platform
  • 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. 20 Minutes on facebook... 500 GB of data every 20 minutes! ~36 TB/day ~13 PB/year
  • 7. How to handle such a freakamount of information?open source
  • 8. facebook infrastructure
  • 9. facebook infrastructureMore information at:
  • 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. Platform Core Components Social Graph API Facebook Insights Social Plugins Open Graph Protocol
  • 12. Part 2Enhancing facebook pageswith FBML
  • 13. Static FBML Application Provides HTML, CSS and JavaScript functionality on facebook pages
  • 14. What’s needed? Be admin of your facebook page Install Static FBML Application Add FBML Tabs with static content
  • 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. DemoAdding FBML Tab tofacebook page
  • 17. FBML
  • 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="” imgsrc="” width="480” height="390” />
  • 19. FBML>fb:swf imgstyle="border-width: 3px; border-color: white;”>fb:user-agent includes="ie 6, ie 7”> swfsrc="” <link rel="stylesheet” href="ie.css” /> imgsrc="”FBML Documentation is available at: width="480”</fb:user-agent> height="390” /> that FBML is deprecated
  • 20. Part 3Facebook for Websites
  • 21. Platform Core Components Open Graph Protocol
  • 22. A Webpage...
  • 23. Is a real-world facebook object! Lidan Like Comment Check-in PictureRecommend
  • 24. What do you LIKE in thereal-world?(Except your smartphone)
  • 25. Movies
  • 26. Food
  • 27. Government
  • 28. BarGovernment
  • 29. Public Figure
  • 30. Actor
  • 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. Implementing the Open Graph
  • 33. Implementing the Open Graph>html xmlns="”> xmlns="” <head> xmlns:og=“” <title> The Social Network (2010) </title> xmlns:fb="”> </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="” /> <meta property="og:image” content="” /></head>
  • 34. Open Graph Meta-Tagsfb:admins og:street-address og:latitude og:longitudeog:audio og:emailog:video og:phone_number
  • 35. Open Graph Meta-TagsMore information at: fb:admins og:street-address og:latitude og:longitude og:audio og:email og:video og:phone_number
  • 36. Platform Core Components Social Plugins
  • 37. Social Plugins Provides integration between facebook platform and your websiteLet user see what his friends haveliked, commented on or sharedacross the web
  • 38. Social Plugins Like Button Login Activity Feed Facepile Recommendations Comments Like Box Live Stream
  • 39. Like Box Enable users to like your facebook page and view its stream directly from your website
  • 40. Like BoxIFrame<iframesrc=";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=""></script><fb:like-box href="" width="292"show_faces="true" stream="true" header="true"></fb:like-box>
  • 41. DemoGenerate code for all of the social plugins at: Like Box
  • 42. Like Button Lets users share pages fromyour site back to their facebook profile with one click
  • 43. DemoLike Button
  • 44. Recommendations Gives users personalizedsuggestions for pages on your site they might like
  • 45. Advanced pluginsSetup a new application at: Create a new facebook application
  • 46. Comments Lets users comment on any piece of content on your site
  • 47. DemoComments
  • 48. Live Stream Lets users share activity andcomments in real time, best for real-time events
  • 49. DemoLive Stream
  • 50. Login & Registration Allows users to easily sign up for your website with their facebook account
  • 51. More information at:
  • 52. A Short BreakGood time to update your status
  • 53. Part 4facebook apps development
  • 54. TOP Facebook apps (January 2011)98,607,51753,508,02237,187,222346,300
  • 55. What motivates users to usefacebook apps?too much free time
  • 56. What makes facebook apps so successful? Social Competitiveness Simple Viral Real time Anytime
  • 57. Platform Core Components Social Graph API
  • 58. The Social Graph“Privacy no longer a social norm” - Mark Zuckerberg
  • 59. The Social Graph me/ albums/ comment Profile Pictures notes My Pictures Picture Picture Picture comment
  • 60. ObjectsUnique ID lidan 698752998{ id: "698752998“, name: "Lidan Hifi“, first_name: "Lidan“, last_name: "Hifi“, link: "", birthday: "04/27/1988“, location: { id: "113187025363265“, name: "BeEr Sheva`, Hadarom, Israel" }, gender: "male“}
  • 61. Relationships 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. Relationships
  • 63. AuthenticationOAuth 2.0-based authentication|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. AuthenticationOAuth 2.0-based authentication|2.v &redirect_uri= UgGGAgEL6yF_LEYygniXA__.3600.1296417600698752998|rlW &redirect_uri= FrcgmkEVVKd7aYi3bKjNZ1gUPermissionsYou must request specific permissions from the userread_stream, publish_stream, user_photos,user_checkins, user_location, offline_access
  • 65. PublishingHTTP POST POST { message: ‘Hi, Do you like the graph API?’ }HTTP POST { coordinates: { 32.175876, 34.889177 }, place: 149111711803941, message: ‘playing with the graph API at Microsoft Israel’ }
  • 66. DeletingHTTP DELETE
  • 67. Deleting HTTP DELETE info about Facebook Social Graph:
  • 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. What’s needed?Web Server Facebook ApplicationValid domain or IP (NO localhost) SDK  Application Id  API Key  AppSecret
  • 70. Facebook applicationsSetup a new application at: Setup a new facebook application
  • 71. Application Settings APP_NAME
  • 72. Application Pages
  • 73. facebook Official SDKs FBJS
  • 74. facebook C#.NET SDKs Facesharp Facebook C# SDK
  • 75. DemoCreate facebook applicationwith ASP.NET MVC
  • 76. Review Facebook platform Facebook pages & Static FBML Facebook for Websites Facebook Applications
  • 77. More TopicsAdvanced APIsPerformanceFacebook CreditsPromote your application
  • 78. Related links
  • 79. Thanks! Questions?