Facebook Login und Open Graph

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

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

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

Ofﬂine - Identität 7

Ofﬂine - Identität - Was macht uns aus? 8

Online - Identität 9

Online - Identität PsyGnamStyle2000 Echter Name Pseudonym 10

Online - Identität Pseudonym 11

Online - Identität & & PsyGnamStyle2000 Echter Name Pseudonym Google+ & Facebook & weitere OAuth Anwendungen wollen die Pseudonyme mit den echten Real World Identitäten verbinden 12

Der Internetgigant Google will das Ende der Anonymitäteinläuten. Sein neues Soziales Netzwerk Google+ verlangt von allenMitgliedern, dass sie sich mit ihrem ofﬁziellen Namen anmelden.Wer das nicht tut, wird erst verwarnt und dann ausgeschlossen. Source: http://www.zeit.de/2011/32/P-op-ed-Anonymitaet 13

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

Digital Identity Vorherrschaft 15

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

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

Wer macht das Rennen? 18

Über 1 Milliarde aktive User auf Facebook Source: http://www.statista.com/topics/751/facebook/chart/639/monthly-active-users-of-facebook/ 19

Über 1 Milliarde aktive User auf Facebook 20

Facebook die Consumer Identity im Web 21

facebook die „Consumer Identity“ im Web Proﬁl Bilder Freunde Sachen die sie Mögen „Liken“ 22

facebook die „Consumer Identity“ im Web 23

Kurz: Social Pluginssource: http://www.ecreativeim.com/blog/2011/05/facebooks-like-icon-drives-trafﬁc-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

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 Passwörter•Einfacher mit Freunden zu interagieren•Relativ Sicher 38

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• 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

Okay! Die User können sich super einfach anmelden und jetzt? 41

Facebook Login normal! 42

tripadvisor Beispiel 43

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

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 USA 58

Instant Personalisationsource: http://www.mrcapetown.co.za/brands-marketing/sneakers-3-0-who-is-your-favourite-brand-and-why/ 59

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/ 64

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

Hinter dem facebook Loginsource: http://www.scenicreﬂ 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 Verbindungen auf facebook•Der Social Graph wurde immer wieder erweitert z.B. Bilder, Orte, Likes, ... 71

Das ist der Social Graph! 72

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

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

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

Open Graph Protocol•Durch OGP Tags im HTML Head kann facebook die Seite bei einem share oder like wie gewollt darstellen. 76

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öglich mit facebook zu integrieren. 80

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

Actions & Objects 82

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

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/reference/api/ 88

Datenschutz! 89

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

Datenschutz & Dialoge•Gibt der User die Daten über den Dialog frei, gibt es auch kein Datenschutz Problem. 91

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, ... 96

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 Timeline 101

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 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 Trafﬁc generieren 103

Wenn wir noch zeit haben! 104

Live Beispiel: Custom Landing Page•Vorher Nike oder Zimtstern auf Facebook liken•dann:•http://socialsignals.de/facebook/socialshoppen/•Open Graph API Explorer Proﬁl von Sophie Loewe•https://developers.facebook.com/tools/explorer/? method=GET&path=100003131965009%3Fﬁelds %3Dlikes 105

Thank you! get in touch:• facebook.timonhartung.com• @timondeluxe• linkedin.timonhartung.com• googleplus.timonhartung.com• www.121watt.de106

http://192.168.254.59	323
http://www.timonhartung.com	182
http://pinterest.com	16

Facebook Login und Open Graph

by Timon Hartung on Nov 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 521

Statistics