Facebook Login und Open Graph

5.972 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
5.972
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
540
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

×