Login-Button

Mit dem Login-Button kannst du den Facebook Login-Vorgang auf deiner Webseite oder in deiner Web-App auf einfache Weise auslösen.

Dieser Button wird Personen angezeigt, die sich noch nicht bei deiner App angemeldet haben. Beim Klicken auf den Button wird der Login-Dialog angezeigt, über den der Login-Vorgang gestartet wird. Personen, die sich bereits angemeldet haben, sehen diesen Button nicht. In diesem Fall kannst du einen Logout-Button anzeigen.

Wenn du einen Logout-Button anzeigst und Personen sich darüber abmelden, werden sie sowohl von deiner App als auch von Facebook abgemeldet.

Der Login-Button funktioniert nur zusammen mit dem JavaScript-SDK. Wenn du eine mobile App entwickelst oder unser JavaScript-SDK nicht verwenden kannst, solltest du stattdessen den Leitfaden zum Anmeldevorgang für diese Art von App befolgen.

Der „Weiter mit Facebook“-Button ersetzt frühere Versionen des Login-Buttons. Weitere Informationen findest du unter Migration.

Plugin-Konfigurator

Width

Größe des Buttons

large

Button-Text

continue_with

Form des Button-Layouts

default

Logout-Button aktivieren

Name und Profilbild bei der Anmeldung bei Facebook verwenden [?]

Code generieren

„Als {Name} fortfahren“-Button

Der „Als {Name} fortfahren“-Button zeigt den Text „Als {Name der Person} fortfahren“ und enthält optional das Facebook-Profilbild, wenn eine Person im selben Browser bei Facebook angemeldet ist. Zur Verwendung des „Als {Name} fortfahren“-Buttons musst du zunächst das JavaScript-SDK laden. Anweisungen zur Einrichtung des JavaScript-SDKs findest du im Schnellstart zum JavaScript-SDK. Aktiviere den Button „Als {Name} fortfahren“, indem du data-use-continue-as="true" zu den Einstellungen deines Buttons hinzufügst.

Die Höhe des „Als {Name} fortfahren“-Buttons kann nicht angepasst werden.

Button-Größe	Höhe	Breite	Benutzerdefinierte Breite?
Klein	20 Pixel	200 Pixel	Nein
Mittel	28 Pixel	200–320 Pixel	Ja
Groß	40 Pixel	240–400 Pixel	Ja

Wählst du eine Größe aus, die die maximalen Parameter überschreitet, wird der Button standardmäßig auf die maximale Breite festgelegt.

Best Practices für den „Als {Name} fortfahren“-Button

Der „Als {Name} fortfahren“-Button kann ein großartiges Mittel für mehr Klicks und Interaktion sein. Nutzer sehen ihr Profilbild und ihren Namen auf dem Login-Button. Deine App fühlt sich dadurch für sie persönlicher an.

Es kann jedoch auch zu Verwirrung führen, wenn Nutzer nicht erwarten, in diesem Kontext ihren Namen und ihr Profilbild zu sehen. Überlege dir Folgendes, um herauszufinden, ob„ Als {Name} fortfahren“ die beste Lösung für deine App ist.

Sollte der „Als {Name} fortfahren“-Button nicht für deine App geeignet sein, kannst du vielleicht die neuen JavaScript-SDK-Buttons ausprobieren, wie den „Weiter mit Facebook“-Button.

Vorgeschlagene Anwendungsfälle

Wir haben eine globale Nutzerbasis und die Nutzer in verschiedenen Regionen haben verschiedene Erwartungen. Respektiere diese Erwartungen, wenn du diesen Button einsetzt.

Optimal in den folgenden Fällen:

Deine App ist sozial:
Wenn Personen soziale Apps nutzen, erwarten sie, sich mit anderen zu verbinden. Nach unserer Erfahrung eignet sich der „Als {Name} fortfahren“-Button in diesen Fällen sehr gut.
Personen im Zielmarkt nutzen ihre Telefone gemeinsam:
Wenn mehrere Personen dasselbe Telefon nutzen, kann ihnen die Anzeige von „Als {Name} fortfahren“ bestätigen, dass sie das richtige Konto nutzen.

Zu vermeiden in den folgenden Fällen:

Deine App ist neu:
Wenn deine App neu auf dem Markt ist, sind deine Nutzer*innen wahrscheinlich eher verwirrt, wenn ihr Name und das Profilbild automatisch angezeigt werden. Es ist anders bei einer bereits länger bestehenden oder vertrauten App, die Nutzer*innen regelmäßig nutzen wollen.
Personen im Zielmarkt sind besorgt, dass ihre Privatsphäre verletzt werden könnte:
In vielen Ländern werden Profilbilder als sehr vertraulich angesehen. In diesem Fall solltest du „Als {Name} fortfahren“ eher nicht verwenden, weil das Profilbild der Person gezeigt wird, die sich anmeldet.

Login-Button – Best Practices

Beachte bei Verwendung von Facebook Login die allgemeinen Best Practices. Bei Verwendung von „Als {Name} fortfahren“ ist es besonders wichtig, die folgenden zwei Best Practices zu befolgen:

Biete eine Methode zur Abmeldung an (Richtlinienvorgabe)
Testen und Messen: Finde heraus, welche Auswirkungen dies auf die Wahrnehmung und Conversion von Nutzern hat

Weitere mögliche Best Practices:

Gib genau an, was die Anmeldung bewirkt
Verwende einen Platzhalter/Spinner, solange der Login-Button geladen wird. Ein Beispiel für den entsprechenden Code:

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

Einstellungen

Neben den oben aufgeführten Einstellungen sind auch folgende Änderungen möglich:

Einstellung	HTML5-Attribut	Beschreibung	Optionen
`auto_logout_link`	`data-auto-logout-link`	Wenn diese Option aktiviert ist, wird dieser Button durch einen Logout-Button ersetzt, wenn der Nutzer bereits angemeldet ist.	`false`, `true`
`onlogin`	`data-onlogin`	Dies ist eine JavaScript-Funktion, die ausgelöst wird, wenn der Anmeldevorgang abgeschlossen wurde.	`Function`
`scope`	`data-scope`	Dies ist die Liste der Berechtigungen, die bei der Anmeldung angefordert werden.	`public_profile` (Standard) oder eine kommagetrennte Liste der Berechtigungen
`size`	`data-size`	Dies wählt eine der möglichen Größen für den Button aus.	`small`, `medium`, `large`
`default_audience`	`data-default-audience`	Dies legt fest, welche Zielgruppe standardmäßig ausgewählt wird, wenn Schreibberechtigungen angefordert werden.	`everyone`, `friends`, `only_me`

Migration

Alte Buttons zu den neuen Buttons migriert. Die folgende Tabelle zeigt die Zuordnung.

Alter Button	Alte Höhe	Neuer Button	Neue Höhe
Symbol	18 Pixel	Veraltet	Veraltet
Klein	18 Pixel	Klein	20 Pixel
Mittel	22 Pixel	Klein	20 Pixel
Groß	25 Pixel	Klein	20 Pixel
XL	39 Pixel	Klein	20 Pixel

Die neuen „Als {Name} fortfahren“-Buttons enthalten einen Parameter button_type, der für die alten Buttons nicht erforderlich ist. Damit gibst du an, ob du den „Weiter mit Facebook“-Button oder den „Mit Facebook anmelden“-Button verwenden möchtest. Wenn du keinen Button-Typ angibst, wird der Button als der neue kleine Button gerendert. Dies ist eine mittlere Größe, verglichen mit den alten Buttons. Bei der x-large-Größe wird er etwas kleiner. Wenn du den button_type-Parameter angibst, werden deine Buttons wie angegeben angezeigt.

Die Buttons werden schneller geladen, wenn du das JavaScript-SDK so bald wie möglich startest. Das System kann die Buttons jedoch erst laden, wenn die Webseite und JavaScript vollständig geladen sind. Danach kann es den iframe erstellen und die Ressourcen zum Rendern des Buttons hochladen.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

Lokalisierung:

Zum Laden des Buttons in einer anderen Sprache muss das JavaScript-SDK für diese Sprache geladen werden. Weitere Informationen zur Lokalisierung des JavaScript-SDKs findest du unter Lokalisierung mit sozialen Plug-ins und JavaScript-SDK.

FAQs

Wie können sich Nutzer damit anmelden?

Sobald ein Nutzer auf den Login-Button geklickt und den Login-Dialog akzeptiert hat (damit wird der Anmeldevorgang abgeschlossen), kann deine App das Facebook-SDK für JavaScript verwenden, um API-Aufrufe im Namen dieser Person zu tätigen.

Es muss sonst nichts weiter eingestellt werden. Du kannst aber die onlogin-Einstellung im Button verwenden, um deine eigene JavaScript-Funktion auszulösen, die bei der Anmeldung ausgeführt wird.

Kann ich den Login-Button mit einem serverseitigen Registrierungscode verwenden?

Das ist möglich, das JavaScript-SDK ist jedoch trotzdem noch teilweise erforderlich. Sobald der Anmeldevorgang nach Klicken auf den Login-Button abgeschlossen ist, kann das SDK auf ein authResponse-Objekt mittels FB.getLoginStatus() zugreifen. Über diese Funktion kannst du das Antwortobjekt an deinen serverseitigen Code weitergeben, um offene Registrierungen abzuschließen.

Der Login-Button unterstützt keine erneuten Anfragen, da das Anfordern verweigerter Berechtigungen nicht im Sinne der Funktion ist. Wenn du eine Berechtigung erneut anfordern musst, richte einen benutzerdefinierten Button ein und nutze FB.login() wie in der Dokumentation „Facebook Login für das Web“ beschrieben.

Der Button wird nicht gerendert.

Die <div>-Tags werden mit einer als XFBML bezeichneten Technologie in gerenderte Buttons transformiert. Diese Technologie nutzt JavaScript im SDK, um die Seite zu parsen und Ersetzungen vorzunehmen. Wenn du Seiteninhalt dynamisch änderst, um diese divs hinzuzufügen, nachdem die init-Methode des SDK ausgeführt wurde (z. B. in einem dynamisch aufgebauten Dialog), musst du FB.XFBML.parse() erneut aufrufen, damit die Transformation durchgeführt wird.