Facebook Login & Open Graph                                                           by Timon Hartung @ Social Media Econ...
Timon Hartung                • CTO bei der 121WATT.de                • Diplom Wirtschaft-Informatiker                • 9 J...
Ich bin kein Social Media         Experte                            3
Ich möchte zeigen was mit Facebook möglich ist!                                                  4
Identity   Login   after Login                                 5
Identity im Websource: http://youthadvisoryboard.wordpress.com/2012/05/14/social-networking-the-digital-identity/   6
Offline - Identität                     7
Offline - Identität - Was macht uns aus?                                          8
Online - Identität                     9
Online - Identität                        PsyGnamStyle2000          Echter Name   Pseudonym                               ...
Online - Identität                     Pseudonym                                 11
Online - Identität                                    &               &                                                Psy...
Der Internetgigant Google will das Ende der Anonymitäteinläuten. Sein neues Soziales Netzwerk Google+ verlangt von allenMi...
Würde es das Netz nicht zivilisieren, wenn sich alleMenschen mit ihrem echten Namen zu erkennengäben, so wie im echten Leb...
Digital Identity Vorherrschaft                                 15
google                                       vs.                 facebook                                  vs.            ...
google                                                    vs.                                 facebook    Source: http://b...
Wer macht das Rennen?                        18
Über 1 Milliarde aktive User auf Facebook                          Source: http://www.statista.com/topics/751/facebook/cha...
Über 1 Milliarde aktive User auf Facebook                                             20
Facebook die Consumer Identity im Web                                        21
facebook die „Consumer Identity“ im Web           Profil Bilder            Freunde   Sachen die sie Mögen „Liken“          ...
facebook die „Consumer Identity“ im Web                                           23
Kurz: Social Pluginssource: http://www.ecreativeim.com/blog/2011/05/facebooks-like-icon-drives-traffic-to-your-website/   24
fb: Facepile               25
fb: Like box               26
fb: Like button                  27
Beispiel Lieferheld.de                         28
fb: log in             29
Ist facebook Log in spannend?                                30
facebook Loginsource: http://www.4thmedia.org/2012/06/06/facebook-targeting-pre-teens/facebook-login/   31
Live Beispiel: AirBnB www.airbnb.com                                       32
Facebook Login Schritt 1                           33
Facebook Login Schritt 2                           34
Facebook Login Schritt 3                           35
Facebook Login Schritt 4                           36
Warum ist der Login Button so cool für die User?                                                   37
Warum ist der Login Button so cool für die User•2 Klicks und man ist angemeldet•Super schnell•Immer eingeloggt•Weniger Pas...
Warum ist der Login Button cool für Firmen?                                              39
Warum ist der Login Button cool für Firmen?• Mögliche höhere Conversion bei Registrierungen• Zugriff auf Daten des Users• ...
Okay! Die User können sich super einfach          anmelden und jetzt?                                           41
Facebook Login normal!                         42
tripadvisor Beispiel                       43
tripadvisor Beispiel                       44
Was wäre wenn wir die fb Daten schon hätten?                                               45
Facebook Login on Crack :)source: http://www.fanpop.com/clubs/animal-humor/images/29016374/title/funny-animals-photo   46
tripadvisor Beispiel                       47
tripadvisor Beispiel                       48
tripadvisor Beispiel                       49
tripadvisor Beispiel                       50
tripadvisor Beispiel                       51
tripadvisor Beispiel                       52
tripadvisor Beispiel                       53
tripadvisor Beispiel                       54
tripadvisor Beispiel                       55
tripadvisor Beispiel                       56
Wie cool wäre das?!                      57
Leider ist es nicht so einfach!•Die Instant Personalisation gibt es momentan nur für 8 ausgesuchte facebook Partner in den...
Instant Personalisationsource: http://www.mrcapetown.co.za/brands-marketing/sneakers-3-0-who-is-your-favourite-brand-and-w...
Instant Personalization: Rotten Tomatoes                                           60
Instant Personalization: Scribd                                  61
Instant Personalization: Bing                                62
Instant Personalization: Yelp                                63
Facebook Instant Personalization•https://www.facebook.com/instantpersonalization/                                         ...
Deswegen müsst ihr die User nur noch zurAnmeldung bewegen, aber dann gehts los!                                           65
Hinter dem facebook Loginsource: http://www.scenicrefl ections.com/download/208106/THE_OPEN_DOOR_IN_HEAVEN_Wallpaper/   66
Zugriff auf die Freunde eines Users (Airbnb)                                               67
Zugriff auf die Freunde eines Users (Pinterest)                                                  68
Zugriff auf Daten des Users im Open Graph                                            69
Was ist der Open Graph?                          70
Was ist der Open Graph?•Facebook ist auf dem Social Graph aufgebaut•Der Social Graph sind alle Personen, Objekte und Verbi...
Das ist der Social Graph!                            72
Was ist der Open Graph?•Der Open Graph ist eine Erweiterung des Social Graph                                              ...
Was ist der Open Graph?•Zuerst in 2010 wurde das Open Graph Protocol (OGP) eingeführt um third-party Webseiten „liken“ zu ...
Open Graph Protocol•Mit den OGP Tags werden normale Webseiten zu angereicherten Objekten im facebook Social Graph      <ht...
Open Graph Protocol•Durch OGP Tags im HTML Head kann facebook die Seite bei einem share oder like wie gewollt darstellen. ...
Beispiel: OGP Tags gut und schlecht                                      77
OGP Tags gut               78
OGP Tags schlecht                    79
Was ist der Open Graph?•Danach wurde der Open Graph um Actions und Objects erweitert um third-party apps so tief wie mögli...
Actions und Objects•Jetzt können fb apps ihr eigenes Vokabular und angepasstes Verhalten bei facebook integrieren•Eine Koc...
Actions & Objects                    82
Actions & Objects•Somit sind alle Social Objects im Social Graph mit einander über Actions verbunden.•Genau diese Daten un...
Alle Social Objects im Social Graph sind miteinander über Actions verbunden                                               84
Das schauen wir uns jetzt mal an!                                    85
Der Open Graph Explorer                          86
Zugriff auf Daten des Users im Open Graph mitdem Open Graph Explorer                                                87
Beispiel:Open Graph Explorer:https://developers.facebook.com/tools/explorer/Graph API:https://developers.facebook.com/docs...
Datenschutz!               89
Datenschutz & Dialoge•Mit der Open Graph API können viele Daten der User ausgelesen werden.•ABER NUR wenn die User diese i...
Datenschutz & Dialoge•Gibt der User die Daten über den Dialog frei, gibt es auch kein Datenschutz Problem.                ...
Datenschutz & Dialoge                        92
Datenschutz & Dialoge: Share Public                                      93
Datenschutz & Dialoge: Share Friends                                       94
Sharing & Actions aus fb Apps                                95
Manuelle Actions & Passive Actions•Active / manual actions:  • Like, Eat, Buy, ....•Passive actions:  • Read, Listen, ... ...
Passive Actions                  97
Active / manual Actions                          98
Passive Actions                  99
Active / manual Actions von foursquare                                         100
Sharing•Apps können:•In den News Feed posten•Werden bei Benutzung im Ticker angezeigt•und erscheinen aggregiert in der Tim...
source: http://developer.facebook.com   102
Takeways•Der Facebook Login ist eine einfache Möglichkeit für die User sich sicher und schnell anzumelden.•Firmen können n...
Wenn wir noch zeit haben!                            104
Live Beispiel: Custom Landing Page•Vorher Nike oder Zimtstern auf Facebook liken•dann:•http://socialsignals.de/facebook/so...
Thank you!      get in touch:• facebook.timonhartung.com• @timondeluxe• linkedin.timonhartung.com• googleplus.timonhartung...
Nächste SlideShare
Wird geladen in …5
×

Facebook Login und Open Graph

6.156 Aufrufe

Veröffentlicht am

Die Präsentation von Timon Hartung auf den Social Media Economy Days 2012 in Hamburg zum Thema Facebook Login und Open Graph. http://www.timonhartung.com

Veröffentlicht in: Technologie
0 Kommentare
22 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
6.156
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
544
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
22
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Facebook Login und Open Graph

  1. 1. Facebook Login & Open Graph by Timon Hartung @ Social Media Economy Days 2012source: http://www.digitaltrends.com/opinion/opinion-where-should-you-stand-on-kony-2012-just-ask-your-social-network/ 1
  2. 2. Timon Hartung • CTO bei der 121WATT.de • Diplom Wirtschaft-Informatiker • 9 Jahre SEO & Online Marketing Erfahrung • Vorher Head of Online Marketing bei amiando.com • Consulting für nationale und internationale Firmen • 13 Jahre Developer Erfahrung Java, PHP, MySQL • Gesprochen auf SMX München, SMX Stockholm, Social Media Economy Days 2
  3. 3. Ich bin kein Social Media Experte 3
  4. 4. Ich möchte zeigen was mit Facebook möglich ist! 4
  5. 5. Identity Login after Login 5
  6. 6. Identity im Websource: http://youthadvisoryboard.wordpress.com/2012/05/14/social-networking-the-digital-identity/ 6
  7. 7. Offline - Identität 7
  8. 8. Offline - Identität - Was macht uns aus? 8
  9. 9. Online - Identität 9
  10. 10. Online - Identität PsyGnamStyle2000 Echter Name Pseudonym 10
  11. 11. Online - Identität Pseudonym 11
  12. 12. Online - Identität & & PsyGnamStyle2000 Echter Name Pseudonym Google+ & Facebook & weitere OAuth Anwendungen wollen die Pseudonyme mit den echten Real World Identitäten verbinden 12
  13. 13. Der Internetgigant Google will das Ende der Anonymitäteinläuten. Sein neues Soziales Netzwerk Google+ verlangt von allenMitgliedern, dass sie sich mit ihrem offiziellen Namen anmelden.Wer das nicht tut, wird erst verwarnt und dann ausgeschlossen. Source: http://www.zeit.de/2011/32/P-op-ed-Anonymitaet 13
  14. 14. Würde es das Netz nicht zivilisieren, wenn sich alleMenschen mit ihrem echten Namen zu erkennengäben, so wie im echten Leben auch? Source: http://www.zeit.de/2011/32/P-op-ed-Anonymitaet 14
  15. 15. Digital Identity Vorherrschaft 15
  16. 16. google vs. facebook vs. Microsoft Source: http://blogs.canada.com/2012/01/20/fortune-names-google-best-place-to-work/ Source: http://www.theepochtimes.com/n2/business/how-valuable-is-a-like-on-your-facebook-fan-page-200796.html Source: http://es.wikipedia.org/wiki/Archivo:Microsoft_Sign_on_German_campus.jpgKonkurrenten um eine Identity im Web und one login Lösung. Googlemit Google Apps und Facebook mit seinem Login 16
  17. 17. google vs. facebook Source: http://blogs.canada.com/2012/01/20/fortune-names-google-best-place-to-work/ Source: http://www.theepochtimes.com/n2/business/how-valuable-is-a-like-on-your-facebook-fan-page-200796.htmlKonkurrenten um eine Identity im Web und one login Lösung. Googlemit Google Apps und Facebook mit seinem Login 17
  18. 18. Wer macht das Rennen? 18
  19. 19. Über 1 Milliarde aktive User auf Facebook Source: http://www.statista.com/topics/751/facebook/chart/639/monthly-active-users-of-facebook/ 19
  20. 20. Über 1 Milliarde aktive User auf Facebook 20
  21. 21. Facebook die Consumer Identity im Web 21
  22. 22. facebook die „Consumer Identity“ im Web Profil Bilder Freunde Sachen die sie Mögen „Liken“ 22
  23. 23. facebook die „Consumer Identity“ im Web 23
  24. 24. Kurz: Social Pluginssource: http://www.ecreativeim.com/blog/2011/05/facebooks-like-icon-drives-traffic-to-your-website/ 24
  25. 25. fb: Facepile 25
  26. 26. fb: Like box 26
  27. 27. fb: Like button 27
  28. 28. Beispiel Lieferheld.de 28
  29. 29. fb: log in 29
  30. 30. Ist facebook Log in spannend? 30
  31. 31. facebook Loginsource: http://www.4thmedia.org/2012/06/06/facebook-targeting-pre-teens/facebook-login/ 31
  32. 32. Live Beispiel: AirBnB www.airbnb.com 32
  33. 33. Facebook Login Schritt 1 33
  34. 34. Facebook Login Schritt 2 34
  35. 35. Facebook Login Schritt 3 35
  36. 36. Facebook Login Schritt 4 36
  37. 37. Warum ist der Login Button so cool für die User? 37
  38. 38. Warum ist der Login Button so cool für die User•2 Klicks und man ist angemeldet•Super schnell•Immer eingeloggt•Weniger Passwörter•Einfacher mit Freunden zu interagieren•Relativ Sicher 38
  39. 39. Warum ist der Login Button cool für Firmen? 39
  40. 40. Warum ist der Login Button cool für Firmen?• Mögliche höhere Conversion bei Registrierungen• Zugriff auf Daten des Users• Zugriff auf die Freunde des Users• Möglicherweise virale Verbreitung durch Actions die der User macht• Custom user expierence, custom landing pages• Weniger Fake Anmeldungen 40
  41. 41. Okay! Die User können sich super einfach anmelden und jetzt? 41
  42. 42. Facebook Login normal! 42
  43. 43. tripadvisor Beispiel 43
  44. 44. tripadvisor Beispiel 44
  45. 45. Was wäre wenn wir die fb Daten schon hätten? 45
  46. 46. Facebook Login on Crack :)source: http://www.fanpop.com/clubs/animal-humor/images/29016374/title/funny-animals-photo 46
  47. 47. tripadvisor Beispiel 47
  48. 48. tripadvisor Beispiel 48
  49. 49. tripadvisor Beispiel 49
  50. 50. tripadvisor Beispiel 50
  51. 51. tripadvisor Beispiel 51
  52. 52. tripadvisor Beispiel 52
  53. 53. tripadvisor Beispiel 53
  54. 54. tripadvisor Beispiel 54
  55. 55. tripadvisor Beispiel 55
  56. 56. tripadvisor Beispiel 56
  57. 57. Wie cool wäre das?! 57
  58. 58. Leider ist es nicht so einfach!•Die Instant Personalisation gibt es momentan nur für 8 ausgesuchte facebook Partner in den USA 58
  59. 59. Instant Personalisationsource: http://www.mrcapetown.co.za/brands-marketing/sneakers-3-0-who-is-your-favourite-brand-and-why/ 59
  60. 60. Instant Personalization: Rotten Tomatoes 60
  61. 61. Instant Personalization: Scribd 61
  62. 62. Instant Personalization: Bing 62
  63. 63. Instant Personalization: Yelp 63
  64. 64. Facebook Instant Personalization•https://www.facebook.com/instantpersonalization/ 64
  65. 65. Deswegen müsst ihr die User nur noch zurAnmeldung bewegen, aber dann gehts los! 65
  66. 66. Hinter dem facebook Loginsource: http://www.scenicrefl ections.com/download/208106/THE_OPEN_DOOR_IN_HEAVEN_Wallpaper/ 66
  67. 67. Zugriff auf die Freunde eines Users (Airbnb) 67
  68. 68. Zugriff auf die Freunde eines Users (Pinterest) 68
  69. 69. Zugriff auf Daten des Users im Open Graph 69
  70. 70. Was ist der Open Graph? 70
  71. 71. Was ist der Open Graph?•Facebook ist auf dem Social Graph aufgebaut•Der Social Graph sind alle Personen, Objekte und Verbindungen auf facebook•Der Social Graph wurde immer wieder erweitert z.B. Bilder, Orte, Likes, ... 71
  72. 72. Das ist der Social Graph! 72
  73. 73. Was ist der Open Graph?•Der Open Graph ist eine Erweiterung des Social Graph 73
  74. 74. Was ist der Open Graph?•Zuerst in 2010 wurde das Open Graph Protocol (OGP) eingeführt um third-party Webseiten „liken“ zu können. (OGP META Tags) 74
  75. 75. Open Graph Protocol•Mit den OGP Tags werden normale Webseiten zu angereicherten Objekten im facebook Social Graph <html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html> 75
  76. 76. Open Graph Protocol•Durch OGP Tags im HTML Head kann facebook die Seite bei einem share oder like wie gewollt darstellen. 76
  77. 77. Beispiel: OGP Tags gut und schlecht 77
  78. 78. OGP Tags gut 78
  79. 79. OGP Tags schlecht 79
  80. 80. Was ist der Open Graph?•Danach wurde der Open Graph um Actions und Objects erweitert um third-party apps so tief wie möglich mit facebook zu integrieren. 80
  81. 81. Actions und Objects•Jetzt können fb apps ihr eigenes Vokabular und angepasstes Verhalten bei facebook integrieren•Eine Kochen app kann z.B. die Action „cook“ mit dem Objekt „recipe“ festlegen.•Actions sind wie Verben und Objects wie Nomen•So können User jetzt auf fb Rezepte Kochen 81
  82. 82. Actions & Objects 82
  83. 83. Actions & Objects•Somit sind alle Social Objects im Social Graph mit einander über Actions verbunden.•Genau diese Daten und Verbindungen lassen sich über den Open Graph für Dritte auslesen (wenn der User zustimmt) 83
  84. 84. Alle Social Objects im Social Graph sind miteinander über Actions verbunden 84
  85. 85. Das schauen wir uns jetzt mal an! 85
  86. 86. Der Open Graph Explorer 86
  87. 87. Zugriff auf Daten des Users im Open Graph mitdem Open Graph Explorer 87
  88. 88. Beispiel:Open Graph Explorer:https://developers.facebook.com/tools/explorer/Graph API:https://developers.facebook.com/docs/reference/api/ 88
  89. 89. Datenschutz! 89
  90. 90. Datenschutz & Dialoge•Mit der Open Graph API können viele Daten der User ausgelesen werden.•ABER NUR wenn die User diese in dem App Authentication Dialog freigeben. 90
  91. 91. Datenschutz & Dialoge•Gibt der User die Daten über den Dialog frei, gibt es auch kein Datenschutz Problem. 91
  92. 92. Datenschutz & Dialoge 92
  93. 93. Datenschutz & Dialoge: Share Public 93
  94. 94. Datenschutz & Dialoge: Share Friends 94
  95. 95. Sharing & Actions aus fb Apps 95
  96. 96. Manuelle Actions & Passive Actions•Active / manual actions: • Like, Eat, Buy, ....•Passive actions: • Read, Listen, ... 96
  97. 97. Passive Actions 97
  98. 98. Active / manual Actions 98
  99. 99. Passive Actions 99
  100. 100. Active / manual Actions von foursquare 100
  101. 101. Sharing•Apps können:•In den News Feed posten•Werden bei Benutzung im Ticker angezeigt•und erscheinen aggregiert in der Timeline 101
  102. 102. source: http://developer.facebook.com 102
  103. 103. Takeways•Der Facebook Login ist eine einfache Möglichkeit für die User sich sicher und schnell anzumelden.•Firmen können nach der Anmeldung dem User eine angepasste User Expierence bieten•Social Interaktionen nach dem Login können automatisch oder manuell an Freunde geshared werden und damit wieder Traffic generieren 103
  104. 104. Wenn wir noch zeit haben! 104
  105. 105. Live Beispiel: Custom Landing Page•Vorher Nike oder Zimtstern auf Facebook liken•dann:•http://socialsignals.de/facebook/socialshoppen/•Open Graph API Explorer Profil von Sophie Loewe•https://developers.facebook.com/tools/explorer/? method=GET&path=100003131965009%3Ffields %3Dlikes 105
  106. 106. Thank you! get in touch:• facebook.timonhartung.com• @timondeluxe• linkedin.timonhartung.com• googleplus.timonhartung.com• www.121watt.de106

×