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

Facebook Platform For .net Developers

Lidan
February 06, 2011
Programming
0
120

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.1k
Dev-Centric Culture at Wix - The Developer's Perspective
lidanh
0
530
React Native - Bringing modern web technologies to mobile
lidanh
5
520
How Did Nature Inspire Me To Solve The Ciphertext-only Attack
lidanh
0
140
Object Relational Mapping in Scala
lidanh
0
370
Behavioral Design Patterns
lidanh
2
160

Other Decks in Programming

See All in Programming
Fragment Composition of GraphQL
quramy
7
1k
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
雑に思考を整理する技術と効能
konifar
60
29k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
440
新宿ダンジョンを可視化してみた
satoshi7190
2
270
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.2k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
120
禅の心を手に入れよ
eltociear
1
130
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
960
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k

Featured

See All Featured
Statistics for Hackers
jakevdp
789
220k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
The Language of Interfaces
destraynor
151
23k
Code Review Best Practice
trishagee
55
15k
Facilitating Awesome Meetings
lara
42
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
What's new in Ruby 2.0
geeforr
337
31k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Writing Fast Ruby
sferik
621
60k
A better future with KSS
kneath
231
16k

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?