Facebook Platform for Developers
5 likes3,740 views
The document provides an overview of the Facebook development platform for .NET developers, covering its architecture, core components, and tools such as the Open Graph protocol and FBML applications. It details the methods for enhancing Facebook pages, integrating social plugins, and developing Facebook apps while highlighting user engagement metrics and privacy settings. Additionally, it outlines the requirements for setting up Facebook applications and the use of the Social Graph API for accessing user data.
Facebook Platform for Developers
- 1. Facebook development platform For .net Developers
- 2. Photographing Music Startups Entrepreneurship www.lidans.com About 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 1 Introduction to facebook platform
- 5. 20 Minutes on facebook... FRIEND LINKS EVENT PHOTOS MESSAGES SHARED REQUESTS INVITES UPLOADED SENT ACCEPTED 1,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 freak amount of information? open source
- 9. facebook infrastructure More information at: http://developers.facebook.com/opensource
- 10. facebook platform- why? More than of facebook users engaged 70% with facebook applications every day More than facebook users engaged with 250M facebook on 2.5M websites every month More than facebook users accessing 200M facebook through their mobile devices every day
- 11. Platform Core Components Social Graph API Facebook Insights Social Plugins Open Graph Protocol
- 12. Part 2 Enhancing facebook pages with 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 CSS 6 Tabs maximum file instead of Use FBJS <style> tag
- 16. Demo Adding FBML Tab to facebook 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/fbml Remember that FBML is deprecated
- 20. Part 3 Facebook for Websites
- 21. Platform Core Components Open Graph Protocol
- 22. A Webpage...
- 23. Is a real-world facebook object! Lidan Like Comment Check-in Picture Recommend
- 24. What do you LIKE in the real-world? (Except your smartphone)
- 25. Movies
- 26. Food
- 27. Government
- 28. Bar Government
- 29. Public Figure
- 30. Actor
- 31. What user likes in the real-world Based off of the most popular categories for Facebook Pages Activities Businesses company, restaurant Groups sports_team, cause Organizations band, government People musician, actor Places city, country Products and Entertainment book, movie, tv_show Websites 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-Tags fb:admins og:street-address og:latitude og:longitude og:audio og:email og:video og:phone_number
- 35. Open Graph Meta-Tags More information at: fb:admins og:street-address og:latitude og:longitude http://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 website Let user see what his friends have liked, commented on or shared across the web
- 39. Social Plugins Like Button Login Activity Feed Facepile Recommendations Comments Like Box Live Stream
- 40. Like Box Enable users to like your facebook page and view its stream directly from your website
- 41. Like Box IFrame <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2 Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&a mp;show_faces=true&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px;height:427px;" allowTransparency="true"></iframe> XFBML <script src="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>
- 42. Demo Generate code for all of the social plugins at: Like Box http://developers.facebook.com/docs/plugins
- 43. Like Button Lets users share pages from your site back to their facebook profile with one click
- 44. Demo Like Button
- 45. Recommendations Gives users personalized suggestions for pages on your site they might like
- 46. Advanced plugins Setup a new application at: Create a new facebook http://developers.facebook.com/setup application
- 47. Comments Lets users comment on any piece of content on your site
- 48. Demo Comments
- 49. Live Stream Lets users share activity and comments in real time, best for real-time events
- 50. Demo Live Stream
- 51. Login & Registration Allows users to easily sign up for your website with their facebook account
- 54. A Short Break Good time to update your status
- 55. Part 4 facebook apps development
- 56. TOP Facebook apps (January 2011) 98,607,517 53,508,022 37,187,222 346,300
- 57. What motivates users to use facebook apps? too much free time
- 58. What makes facebook apps so successful? Social Competitiveness Simple Viral Real time Anytime
- 59. Platform Core Components Social Graph API
- 60. The Social Graph “Privacy no longer a social norm” - Mark Zuckerberg
- 62. The Social Graph https://graph.facebook.com/ me/ albums/ comment Profile Pictures notes My Pictures Picture Picture Picture comment
- 63. Objects Unique 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: "Be'Er Sheva`, Hadarom, Israel" }, gender: "male“ }
- 64. 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 }
- 65. 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
- 66. Authentication OAuth 2.0-based authentication https://graph.facebook.com/me?access_token=2227470867|2.v UgGGAgEL6yF_LEYygniXA__.3600.1296417600698752998|rlW FrcgmkEVVKd7aYi3bKjNZ1gU Permissions You must request specific permissions from the user read_stream, publish_stream, user_photos, user_checkins, user_location, offline_access
- 67. Authentication OAuth 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 FrcgmkEVVKd7aYi3bKjNZ1gU Permissions You must request specific permissions from the user read_stream, publish_stream, user_photos, user_checkins, user_location, offline_access
- 68. Publishing HTTP POST https://graph.facebook.com/18754916/attending HTTP 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’ }
- 70. Deleting HTTP DELETE https://graph.facebook.com/5174466698 More info about Facebook Social Graph: http://graph.facebook.com
- 71. How facebook app works 5 Response For application 6 HTML Response user Application server 3 API Call 4 API 1 User Response Request 2 Request For application
- 72. What’s needed? Web Server Facebook Application Valid domain or IP (NO localhost) SDK Application Id API Key AppSecret
- 73. Facebook applications Setup a new application at: Setup a new facebook http://www.facebook.com/developers application
- 74. Application Settings APP_NAME
- 76. facebook Official SDKs FBJS
- 77. facebook C#.NET SDKs Facesharp http://facesharp.codeplex.com Facebook C# SDK http://facebooksdk.codeplex.com
- 78. Demo Create facebook application with ASP.NET MVC
- 79. Review Facebook platform Facebook pages & Static FBML Facebook for Websites Facebook Applications
- 80. More Topics Advanced APIs Performance Facebook Credits Promote your application
- 81. Related links