Facebook Platform for 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

http://www.facebook.com/castro.il?v=app_10339498918

http://www.facebook.com/cocacola

http://www.facebook.com/aliciakeys?v=app_178091127385

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

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


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

Food

Government

Government

Bar

Public Figure

Actor

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


http://ogp.me


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

<iframe src="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>

Like Box IFrame

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

XFBML

Demo

Like Box Generate code for all of the social plugins at:

http://developers.facebook.com/docs/plugins

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


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


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

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

Related links

Thanks! Questions?

Documents

Facebook Platform for Developers