Facebook Platform For .net Developers

Facebook development platform For .net Developers

About me Interests Contact Photographing Music Startups Entrepreneurship www.lidans.com

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 1 Introduction to facebook platform

20 Minutes on facebook... 1,000,000 1,484,000 1,972,000 2,716,000 2,716,000 1,323,000
1,851,000 1,587,000 10,208,000 LINKS SHARED TAGGED PHOTOS EVENT INVITES STATUS UPDATES WALL POSTS COMMENTS MADE FRIEND REQUESTS ACCEPTED PHOTOS UPLOADED MESSAGES SENT

20 Minutes on facebook... 500 GB of data every 20
minutes! ~36 TB/day ~13 PB/year

How to handle such a freak amount of information? open
source

facebook infrastructure

facebook infrastructure More information at: http://developers.facebook.com/opensource

facebook platform- why? of facebook users engaged with facebook applications
every day More than 70% facebook users engaged with facebook on 2.5M websites every month More than 250M facebook users accessing facebook through their mobile devices every day More than 200M

Facebook Insights Platform Core Components Social Graph API Open Graph
Protocol Social Plugins

Part 2 Enhancing facebook pages with 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... Max width is 520px You cannot auto
run JavaScript in FBML tab Use FBJS Use external CSS file instead of <style> tag 6 Tabs maximum facebook pages only

Demo Adding FBML Tab to facebook page

FBML >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”
/> >fb:user-agent includes="ie 6, ie 7”> <link rel="stylesheet” href="ie.css” /> </fb:user-agent>

FBML >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”
/> >fb:user-agent includes="ie 6, ie 7”> <link rel="stylesheet” href="ie.css” /> </fb:user-agent> FBML Documentation is available at: http://developers.facebook.com/docs/reference/fbml Remember that FBML is deprecated

Part 3 Facebook for Websites

Platform Core Components Open Graph Protocol

A Webpage...

Is a real-world facebook object! Picture Check-in Comment Like Recommend
Lidan

What do you LIKE in the real-world? (Except your smartphone)

Movies

Government

Government Bar

Public Figure

What user likes in the real-world Based off of the
most popular categories for Facebook Pages Activities Businesses Groups Organizations People Places Products and Entertainment Websites company, restaurant sports_team, cause band, government musician, actor city, country book, movie, tv_show website, blog, article

Implementing the Open Graph

Implementing the Open Graph >html xmlns="http://www.w3.org/1999/xhtml”> <head> <title> The Social
Network (2010) </title> </head> >html xmlns="http://www.w3.org/1999/xhtml” xmlns:og=“http://ogp.me/ns#” xmlns:fb="http://www.facebook.com/2008/fbml”> <head> <title> The Social Network (2010) </title> </head> >html xmlns="http://www.w3.org/1999/xhtml” xmlns:og=“http://ogp.me/ns#” xmlns:fb="http://www.facebook.com/2008/fbml”> <head> <title> The Social Network (2010) </title> <meta property="og:title” content="The Social Network” /> <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-Tags og:email og:phone_number fb:admins og:street-address og:latitude og:longitude og:audio
og:video

Open Graph Meta-Tags og:email og:phone_number fb:admins og:street-address og:latitude og:longitude og:audio
og:video More information at: http://ogp.me

Platform Core Components Social Plugins

Social Plugins Let user see what his friends have liked,
commented on or shared across the web Provides integration between facebook platform and your website

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

Like Box Enable users to like your facebook page and
view its stream directly from your website

Demo Like Box Generate code for all of the social
plugins at: http://developers.facebook.com/docs/plugins

Like Button Lets users share pages from your site back
to their facebook profile with one click

Demo Like Button

Recommendations Gives users personalized suggestions for pages on your site
they might like

Advanced plugins Create a new facebook application Setup a new
application at: http://developers.facebook.com/setup

Comments Lets users comment on any piece of content on
your site

Demo Comments

Live Stream Lets users share activity and comments in real
time, best for real-time events

Demo Live 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 Break Good time to update your status

Part 4 facebook apps development

TOP Facebook apps (January 2011) 98,607,517 53,508,022 37,187,222 346,300

What motivates users to use facebook apps? too much free
time

What makes facebook apps so successful? Social Viral Competitiveness Real
time Anytime Simple

Platform Core Components Social Graph API

The Social Graph “Privacy no longer a social norm” -
Mark Zuckerberg

https://graph.facebook.com/ me/ albums/ Profile Pictures My Pictures Picture Picture Picture
comment comment notes The Social Graph

698752998 Objects https://graph.facebook.com/ lidan { 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“ } Unique ID

698752998 Relationships https://graph.facebook.com/ {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 } /feed

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

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

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 https://www.facebook.com/dialog/oauth?client_id=114587458 &redirect_uri=http://www.lidans.com https://www.facebook.com/dialog/oauth?client_id=114587458 &redirect_uri=http://www.lidans.com https://www.facebook.com/dialog/oauth?client_id=114587458 &redirect_uri=http://www.lidans.com

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

Deleting HTTP DELETE https://graph.facebook.com/5174466698

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

How facebook app works user Application server User Request HTML
Response API Call API Response Request For application Response For application 1 2 3 4 5 6

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

Facebook applications Setup a new facebook application Setup a new
application at: http://www.facebook.com/developers

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

Demo Create facebook application with ASP.NET MVC

Review Facebook platform Facebook pages & Static FBML Facebook for
Websites Facebook Applications

More Topics Advanced APIs Facebook Credits Promote your application Performance

Facebook Platform For .net Developers

Facebook Platform For .net Developers

More Decks by Lidan

Other Decks in Programming

Featured

Transcript