Login-Button

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

Dieser Button wird für Personen angezeigt, die sich noch nicht bei deiner App angemeldet haben. Beim Klicken 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.

Plug-in-Konfigurator

Width
Größe des Buttons
Button-Text
Form des Button-Layouts
[?]

„Als {Name} fortfahren“-Button

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

Die Höhe des Fortfahren als {Name}-Buttons lässt sich nicht anpassen.

Button-GrößeHöheBreiteBenutzerdefinierte 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 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 regelmäßig nutzen wollen.

  • Personen im Zielmarkt sind besorgt, dass ihre Privatsphäre verletzt werden könnte:
    In vielen Ländern werden die Profilbilder als sehr vertraulich betrachtet. In diesem Fall solltest du Als {Name}fortfahren eher nicht verwenden, weil das Profilbild der angemeldeten Person gezeigt wird.

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

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

Alter ButtonAlte HöheNeuer ButtonNeue 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 Fortfahren als {Name}-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 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.

Kann ich mit dem Login-Button eine Berechtigung erneut anfordern, wenn ein Nutzer sie abgelehnt hat?

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 angezeigt.

Die <div>-Tags werden in angezeigte Buttons verwandelt. Hierbei kommt eine Technologie mit der Bezeichnung „XFBML“, die auf JavaScript im SDK basiert, um die Seite zu analysieren und Ersetzungen vorzunehmen. Wenn du Seiteninhalte dynamisch veränderst, um diese divnach Ausführung der SDK-init-Methode einzufügen (z. B. in einem dynamisch aufgebauten Dialog), musst du FB.XFBML.parse() erneut aufrufen, damit die Umwandlung realisiert wird.