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
10 Things Web Designers tend to forget when doing SEO
Facebook Login und Open Graph
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
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
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
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
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
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
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
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
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
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
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
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