Einloggen mit Facebook-Connect

Das, was OpenID leider bisher nicht geschafft hat, scheint Facebook nun gelingen zu wollen: Einen übergreifenden Login für (alle teilnehmenden) Websites zu bieten. Sowas voranzutreiben ist mit 200 Mio Nutzern natürlich ungleich einfacher als mit einem komplizierten, aber eigentlich tollen und unabhängigen System, wie OpenID es ist. Außerdem hat Facebook ja nun bekannt gegeben, dass sie auch OpenID unterstützen werden … und ab hier klingt’s schon fast wieder kompliziert, deshalb hör ich direkt wieder auf und schwenke über zu dem, was ich eigentlich wollte: Beispiele zeigen, wie sowas aussehen kann.

Denn, Facebook-Connect kann mehr, als nur ein übergreifender Login zu sein. Facebook-Connect bedeutet auch, dass man darüber seine Daten, die man auf Facebook gespeichert hat, mitnehmen kann in andere Netzwerke und andere Webdienste. Und ebenso kann man sein Freundesnetzwerk mitnehmen – aber nur das Netzwerk, nicht die Freunde selbst, denn die wollen ja sicherlich lieber selbst entscheiden, wo ihre Daten gespeichert sind. Dadurch bietet sich Facebook auch als eine Möglichkeit zur Generalverwaltung der eigenen Daten an.

Seit Wochen, wenn nicht sogar Monaten, will ich darüber bloggen und komm nicht in die Puschen. Auf meinem Rechner stapeln sich die Screenshots … und dann kommt so was wie Bild.de daher und bietet einen Login über Facebook an. Darüber hab ich mich so erschrocken, dass ich doch tatsächlich diesen Blogbeitrag angefangen habe. ;)

Einloggen / Registrieren mit Facebook Connect bei Bild.de

Der Login-Link ist klein und versteckt auf Bild.de, so wie alles was nicht Bild oder Überschrift ist.
bild_loginlink

Eigentlich kann man sich mit Facebook auch auf Bild.de registrieren, nur dummerweise wird das niemand merken, denn im Registrierungsformular steht davon nix:

bild_registrierung

Klickt man allerdings auf Login, findet man einen Button namens “Connect with Facebook”:

bild_login

Da drauf geklickt kommt erstmal der Facebook-Login, mit dem man verifiert, wer man ist:

bild_facebookconnect

Dann ist man eigentlich schon eingeloggt. Aber erstmal gilt es zu klären, ob …

– man bereits bei Bild.de registriert ist und seinen FB-Account mit dem Bild-Account verknüpfen will oder

– man noch nicht bei Bild.de registriert ist und jetzt einen neuen Account anlegen will.

bild_anmeldung_mit_fbconnect1

Also alles ganz relativ normal und Facebook-Connect-typisch. Bis auf die Sache, dass Bild.de im Registrierungsformular den FB-Button vergessen hat. ;) Und … dass man nochmal nach der E-Mail-Adresse gefragt wird. Warum eigentlich?

So sieht es also aus, mein Facebook-Connected Profil bei Bild.de:

bild_profil

Warum sind hier nicht die fehlenden Daten ausgefüllt? Die können doch von Facebook übernommen werden. Und am 1.1.1970 bin ich auch nicht geboren. Immerhin ist mein Foto da, wenn auch etwas gestreckt … naja, macht mich schlanker. ;)

Aber was ich ganz besonders schade finde, ist die Tatsache, dass ich keine Freunde sehe. Also meine Freunde von Facebook, die auch hier bei Bild.de registriert sind. Oder die noch nicht registriert sind, die ich aber einladen könnte.

Also alles in allem benutzt Bild.de Facebook nur als Login-Möglichkeit. Ziemlich unspannend.

Mal sehen, was Brightkite bietet:

Einloggen / Registrieren mit Facebook Connect bei Brightkite.com

Bei Brightkite taucht Facebook leider auch nicht im Registrierungsformular auf. Dafür aber schön sichtbar als Login-Button:

brightkite_navi

Auch hier landet man automatisch im Facebook-Fenster um sich einzuloggen. Danach hat man einen neuen Account. Egal, ob man schon bei Brightkite registriert war oder nicht. Das war bei Bild.de besser, denn da wurde man wenigstens gefragt, ob man bereits einen Account hat oder einen neuen anlegen möchte.

Im Profil ist nichts zu sehen, nur der Name wurde übernommen, daher spare ich mir mal den Screenshot. Klickt man auf “Freunde”, kann man immerhin nach Freunden von Facebook suchen. Allerdings muss man dazu nochmal auf einen “Connect with Facebook”-Button klicken. Komisch, denn ich habe mich doch schon connected.

brightkite_freundefinden

Und so sieht die Freundesliste dann aus: Oben die Freunde, die sich auf Brightkite schon mit Facebook connected haben, und unten drunter kommen dann noch die restlichen, die man einladen kann.

brightkite_freunde

Hier kann man also immerhin die Freunde rüberziehen, auch wenn man das nochmal anstoßen muss.

GIbts denn keine Seiten, die Facebook-Connect ausführlicher einsetzen?

Über die Entwickler-Info zu Facebook Connect kam ich dann letztendlich zu Citysearch, von dem ich dann begeistert war!

Einloggen / Registrieren mit Facebook Connect bei Citysearch.com

Man sieht die Login-Möglichkeit direkt in der Navigation:

citysearch_navi

Und auch im Registrierungsformular kann man Facebook für die schnelle Registrierung auswählen:

citiysearch_registrierung1

Hat man das hinter sich gebracht und schaut sich sein Profil an, ist quasi ein “Wunder” passiert ;) … denn ohne irgendwelches Zutun tauchen hier plötzlich ein paar Freunde auf! Links die Freunde, die ihr Facebook-Profil bereits mit Citysearch verknüpft haben, und rechts die Restlichen, die ich auch hier noch einladen kann!

citysearch_profil_k

Fazit

Bild.de: traurig

Brightkite.com: geht so

Citysearch.com: schon besser

Man muss sich also schon Mühe geben, wenn man Facebook Connect einbaut. Vor allem, wenn man Bild.de heißt und Max Musternutzer davon überzeugen will. ;) Als fertiges, Usability-optimiertes Komplettset gibt’s das leider nicht. Generell scheint es wohl eher schwer zu sein, ein Beispiel zu finden, das die Möglichkeiten besser ausschöpft. Oder weißt hier jemand ein tolles Beispiel? :)

11 Gedanken zu „Einloggen mit Facebook-Connect

  1. Nico Hagenburger

    Danke für die schöne Zusammenfassung :)
    Auf die optimale (auch benutzerfreundliche) Anmeldung mit Facebook-Connect bin ich auch noch nicht gestoßen, werde es aber für neue Projekte einplanen. Vielleicht ein Thema (Diskussion) fürs UX-Camp?

  2. paulinepauline Artikelautor

    hier bin ich ja hauptsächlich auf die genutzten features eingegangen. über eine gute usability dieses komplizierten prozesses will ich auch nochmal bloggen. wenn ich mir mir mal angeschaut habe, was bei den openID user experience-summits in den usa rauskam.
    fürs uxcamp wäre das bestimmt spannend … wobei ich wahrscheinlich keine zeit mehr haben werde, irgendwas vorzubereiten. :(
    oder man nimmt einfach eine fertige präsentation und diskutiert dann damit über das thema. ;) die hier zb: http://www.slideshare.net/bce/openid-ux-summit vom letzten ux-summit bei facebook.

  3. Brit

    Klasse :) .
    Ich bin mehr als erfreut deinen Blog gefunden zu haben!
    Als Facebook User werde ich natürlich mal schauen wie genau das ganze funktioniert, vor allem weil ich unbedingt schauen muss was genau citysearch ist ..

    Super!!

  4. Tanja Hammerl

    Danke für die ausführliche Zusammenfassung! Ich warte schon lange auf einen übergreifenden Login. Hoffentlich klappt das Ganze.

  5. Pingback: Twitter kündigt neue Features an und bietet Facebook die Stirn

  6. Christian

    Großes Kompliment an Deinen Beitrag. Was aber noch erstaunlicher ist als Dein Beitrag selbst, ist die Tatsache, dass Dein Blog bei der google-Suche von “Facebook connect” sogar noch vor der Facebook-Developerseite ist. Zumindest bei “meinem persönlichen” google. Ich bin jedenfalls inspiriert…

  7. Tanja

    Hallo Pauline,
    Welche Daten werden für die Unternehmen durch facebook connect sichtbar? Nur die für die öffentlichkeit freigegebenen Beiträge/ Fotos (Nur profilfoto?), Freunde, Likes?

    Danke! :)

  8. Lothar

    Mich interessiert ob die Leute vielleicht eher skeptisch sind sich über Facebook einzuloggen.
    Wenn man Facebook-connect als Unternehmen nutzt, welche Daten werden dann an die Firmen weitergegeben die das in Ihre Seite eingebaut haben?
    Ich bin für jede Antwort dankbar

  9. Bachsau

    Ich bin froh über jede Seite, wo ich nicht gezwungen werde, alles mit Facebook zu vernetzen…

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>