Facebook Platform for Developers

Facebook development platformFor .net Developers

Photographing Music Startups Entrepreneurship www.lidans.comAbout me Interests Contact

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

Part 1Introduction tofacebook platform

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

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 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

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 auto run JavaScript in FBML tab Use external CSS6 Tabs maximum file instead of Use FBJS <style> tag

DemoAdding FBML Tab tofacebook page

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” />

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

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

Government

BarGovernment

Public Figure

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

Implementing the Open Graph

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>

Open Graph Meta-Tagsfb:admins og:street-address og:latitude og:longitudeog:audio og:emailog:video og:phone_number

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

Platform Core Components Social Plugins

Social Plugins Provides integration between facebook platform and your websiteLet user see what his friends haveliked, commented on or sharedacross the web

Social Plugins Like Button Login Activity Feed Facepile Recommendations Comments Like Box Live Stream

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&width=292&colorscheme=light&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<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>

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 Real time Anytime

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 Profile Pictures notes My Pictures Picture Picture Picture comment

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“}

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}

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

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

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

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’ }

DeletingHTTP DELETE https://graph.facebook.com/5174466698

Deleting HTTP DELETE https://graph.facebook.com/5174466698More info about Facebook Social Graph:http://graph.facebook.com

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

What’s needed?Web Server Facebook ApplicationValid domain or IP (NO localhost) SDK  Application Id  API Key  AppSecret

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

http://blogs.microsoft.co.il	341
http://translate.googleusercontent.com	7
http://beta.blogs.microsoft.co.il	2

Facebook Platform for Developers

by Lidan Hifi on Feb 13, 2011

Accessibility

Tags

Upload Details

Usage Rights

3 Embeds 350

Statistics

Facebook Platform for Developers — Presentation Transcript