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

1. Facebook Login & Open Graph
by Timon Hartung @ Social Media Economy Days 2012
source: http://www.digitaltrends.com/opinion/opinion-where-should-you-stand-on-kony-2012-just-ask-your-social-network/ 1

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. Ich bin kein Social Media
Experte
3

4. Ich möchte zeigen was mit Facebook möglich ist!
4

5. Identity Login after Login
5

6. Identity im Web
source: http://youthadvisoryboard.wordpress.com/2012/05/14/social-networking-the-digital-identity/ 6

7. Offline - Identität
7

8. Offline - Identität - Was macht uns aus?
8

9. Online - Identität
9

10. Online - Identität
PsyGnamStyle2000
Echter Name Pseudonym
10

11. Online - Identität
Pseudonym
11

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. Der Internetgigant Google will das Ende der Anonymität
einläuten. Sein neues Soziales Netzwerk Google+ verlangt von allen
Mitgliedern, 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. Würde es das Netz nicht zivilisieren, wenn sich alle
Menschen mit ihrem echten Namen zu erkennen
gäben, so wie im echten Leben auch?
Source: http://www.zeit.de/2011/32/P-op-ed-Anonymitaet 14

15. Digital Identity Vorherrschaft
15

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.jpg
Konkurrenten um eine Identity im Web und one login Lösung. Google
mit Google Apps und Facebook mit seinem Login 16

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.html
Konkurrenten um eine Identity im Web und one login Lösung. Google
mit Google Apps und Facebook mit seinem Login 17

18. Wer macht das Rennen?
18

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. Über 1 Milliarde aktive User auf Facebook
20

21. Facebook die Consumer Identity im Web
21

22. facebook die „Consumer Identity“ im Web
Profil Bilder
Freunde
Sachen die sie Mögen „Liken“
22

23. facebook die „Consumer Identity“ im Web
23

24. Kurz: Social Plugins
source: http://www.ecreativeim.com/blog/2011/05/facebooks-like-icon-drives-traffic-to-your-website/ 24

25. fb: Facepile
25

26. fb: Like box
26

27. fb: Like button
27

28. Beispiel Lieferheld.de
28

29. fb: log in
29

30. Ist facebook Log in spannend?
30

31. facebook Login
source: http://www.4thmedia.org/2012/06/06/facebook-targeting-pre-teens/facebook-login/ 31

32. Live Beispiel: AirBnB www.airbnb.com
32

33. Facebook Login Schritt 1
33

34. Facebook Login Schritt 2
34

35. Facebook Login Schritt 3
35

36. Facebook Login Schritt 4
36

37. Warum ist der Login Button so cool für die User?
37

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. Warum ist der Login Button cool für Firmen?
39

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. Okay! Die User können sich super einfach
anmelden und jetzt?
41

42. Facebook Login normal!
42

43. tripadvisor Beispiel
43

44. tripadvisor Beispiel
44

45. Was wäre wenn wir die fb Daten schon hätten?
45

46. Facebook Login on Crack :)
source: http://www.fanpop.com/clubs/animal-humor/images/29016374/title/funny-animals-photo 46

47. tripadvisor Beispiel
47

48. tripadvisor Beispiel
48

49. tripadvisor Beispiel
49

50. tripadvisor Beispiel
50

51. tripadvisor Beispiel
51

52. tripadvisor Beispiel
52

53. tripadvisor Beispiel
53

54. tripadvisor Beispiel
54

55. tripadvisor Beispiel
55

56. tripadvisor Beispiel
56

57. Wie cool wäre das?!
57

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. Instant Personalisation
source: http://www.mrcapetown.co.za/brands-marketing/sneakers-3-0-who-is-your-favourite-brand-and-why/ 59

60. Instant Personalization: Rotten Tomatoes
60

61. Instant Personalization: Scribd
61

62. Instant Personalization: Bing
62

63. Instant Personalization: Yelp
63

64. Facebook Instant Personalization
•https://www.facebook.com/instantpersonalization/
64

65. Deswegen müsst ihr die User nur noch zur
Anmeldung bewegen, aber dann gehts los!
65

66. Hinter dem facebook Login
source: http://www.scenicrefl ections.com/download/208106/THE_OPEN_DOOR_IN_HEAVEN_Wallpaper/ 66

67. Zugriff auf die Freunde eines Users (Airbnb)
67

68. Zugriff auf die Freunde eines Users (Pinterest)
68

69. Zugriff auf Daten des Users im Open Graph
69

70. Was ist der Open Graph?
70

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. Das ist der Social Graph!
72

73. Was ist der Open Graph?
•Der Open Graph ist eine Erweiterung des Social Graph
73

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. 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. Open Graph Protocol
•Durch OGP Tags im HTML Head
kann facebook die Seite bei einem share
oder like wie gewollt darstellen.
76

77. Beispiel: OGP Tags gut und schlecht
77

78. OGP Tags gut
78

79. OGP Tags schlecht
79

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. 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. Actions & Objects
82

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. Alle Social Objects im Social Graph sind mit
einander über Actions verbunden
84

85. Das schauen wir uns jetzt mal an!
85

86. Der Open Graph Explorer
86

87. Zugriff auf Daten des Users im Open Graph mit
dem Open Graph Explorer
87

88. Beispiel:
Open Graph Explorer:
https://developers.facebook.com/tools/explorer/
Graph API:
https://developers.facebook.com/docs/reference/api/
88

89. Datenschutz!
89

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. Datenschutz & Dialoge
•Gibt der User die Daten über den Dialog frei, gibt es
auch kein Datenschutz Problem.
91

92. Datenschutz & Dialoge
92

93. Datenschutz & Dialoge: Share Public
93

94. Datenschutz & Dialoge: Share Friends
94

95. Sharing & Actions aus fb Apps
95

96. Manuelle Actions & Passive Actions
•Active / manual actions:
• Like, Eat, Buy, ....
•Passive actions:
• Read, Listen, ...
96

97. Passive Actions
97

98. Active / manual Actions
98

99. Passive Actions
99

100. Active / manual Actions von foursquare
100

101. Sharing
•Apps können:
•In den News Feed posten
•Werden bei Benutzung im Ticker angezeigt
•und erscheinen aggregiert in der Timeline
101

102. source: http://developer.facebook.com 102

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. Wenn wir noch zeit haben!
104

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. Thank you!
get in touch:
• facebook.timonhartung.com
• @timondeluxe
• linkedin.timonhartung.com
• googleplus.timonhartung.com
• www.121watt.de
106