Facebook Platform for Developers
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Facebook Platform for Developers

Uploaded on

Facebook platform for .net Developers

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 527

http://blogs.microsoft.co.il 514
http://translate.googleusercontent.com 7
http://beta.blogs.microsoft.co.il 2
http://www.linkedin.com 2
http://web.archive.org 1
http://unprolific28.rssing.com 1

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:http://developers.facebook.com/opensource
  • 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="http://www.youtube.com/v/CfMGFHiTKLY” imgsrc="http://i4.ytimg.com/vi/CfMGFHiTKLY/default.jpg” width="480” height="390” />
  • 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. 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="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. 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:longitudehttp://ogp.me 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="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. DemoGenerate code for all of the social plugins at: Like Boxhttp://developers.facebook.com/docs/plugins
  • 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 facebookhttp://developers.facebook.com/setup 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:http://developers.facebook.com/docs/plugins/registration
  • 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 Graphhttps://graph.facebook.com/ me/ albums/ comment Profile Pictures notes My Pictures Picture Picture Picture comment
  • 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. 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. 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. 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. 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. 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. DeletingHTTP DELETE https://graph.facebook.com/5174466698
  • 67. Deleting HTTP DELETE https://graph.facebook.com/5174466698More info about Facebook Social Graph:http://graph.facebook.com
  • 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 facebookhttp://www.facebook.com/developers application
  • 71. Application Settings APP_NAME
  • 72. Application Pages
  • 73. facebook Official SDKs FBJS
  • 74. facebook C#.NET SDKs Facesharp http://facesharp.codeplex.com Facebook C# SDK http://facebooksdk.codeplex.com
  • 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?