Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Facebook Platform For .net Developers

Lidan
February 06, 2011
Programming
0
140

Facebook Platform For .net Developers

Lidan

February 06, 2011
Tweet

More Decks by Lidan

See All by Lidan
Building Event-Driven Microservices with Event Sourcing and CQRS
lidanh
8
3.2k
Dev-Centric Culture at Wix - The Developer's Perspective
lidanh
0
540
React Native - Bringing modern web technologies to mobile
lidanh
5
530
How Did Nature Inspire Me To Solve The Ciphertext-only Attack
lidanh
0
150
Object Relational Mapping in Scala
lidanh
0
390
Behavioral Design Patterns
lidanh
2
170

Other Decks in Programming

See All in Programming
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
820
Identifying User Idenity
moro
6
9.8k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
470
JavaでLチカしたい！ / JJUG CCC 2024 Fall LT
nhayato
0
130
Tuning GraphQL on Rails
pyama86
2
1.2k
subpath importsで始めるモック生活
10tera
0
240
C++でシェーダを書く
fadis
6
4.1k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.2k
AI時代におけるSRE、
あるいはエンジニアの生存戦略
pyama86
4
1.1k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
210
イベント駆動で成長して委員会
happymana
1
300
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150

Featured

See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
We Have a Design System, Now What?
morganepeng
50
7.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
Designing for Performance
lara
604
68k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
A Tale of Four Properties
chriscoyier
156
23k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k

Transcript

  1. Facebook development platform For .net Developers

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

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

  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

  8. facebook infrastructure

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

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

  11. Facebook Insights Platform Core Components Social Graph API Open Graph

    Protocol Social Plugins

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

  16. Demo Adding FBML Tab to facebook page

  17. FBML

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

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

  20. Part 3 Facebook for Websites

  21. Platform Core Components Open Graph Protocol

  22. A Webpage...

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

    Lidan

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

  25. Movies

  26. Food

  27. Government

  28. Government Bar

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

  32. Implementing the Open Graph

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

  34. Open Graph Meta-Tags og:email og:phone_number fb:admins og:street-address og:latitude og:longitude og:audio

    og:video

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

  36. Platform Core Components Social Plugins

  37. 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
  38. None

  39. Like Button Activity Feed Recommendations Like Box Login Facepile Comments

    Live Stream Social Plugins

  40. Like Box Enable users to like your facebook page and

    view its stream directly from your website

  41. <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2 Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&a mp;show_faces=true&amp;stream=true&amp;header=true&amp;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

  42. Demo Like Box Generate code for all of the social

    plugins at: 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 Create a new facebook application Setup a new

    application at: http://developers.facebook.com/setup

  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
  52. None

  53. More information at: http://developers.facebook.com/docs/plugins/registration

  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 Viral Competitiveness Real

    time Anytime Simple

  59. Platform Core Components Social Graph API

  60. The Social Graph “Privacy no longer a social norm” -

    Mark Zuckerberg
  61. None

  62. https://graph.facebook.com/ me/ albums/ Profile Pictures My Pictures Picture Picture Picture

    comment comment notes The Social Graph

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

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

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

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

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

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

    http://graph.facebook.com

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

  72. Web Server Valid domain or IP (NO localhost) Facebook SDK

    Application  Application Id  API Key  AppSecret What’s needed?

  73. Facebook applications Setup a new facebook application Setup a new

    application at: http://www.facebook.com/developers

  74. Application Settings APP_NAME

  75. Application Pages

  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 Facebook Credits Promote your application Performance

  81. Related links

  82. Thanks! Questions?