View
4.945
Download
2
Category
Preview:
DESCRIPTION
Facebook platform for .net Developers@ Web Development Community, Israel, 06.02.2011for more information: http://www.lidans.com
Citation preview
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
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
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
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
<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
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
Related links
Thanks! Questions?
Recommended