Wie man ein Facebook-Login für WordPress hinzufügt ⋆ ALexHost SRL

Testen Sie Ihre Fähigkeiten mit unseren Hosting-Diensten und erhalten Sie 15% Rabatt!

Code an der Kasse verwenden:

Skills
15.01.2025

Wie man ein Facebook-Login für WordPress hinzufügt

Das Hinzufügen von Facebook-Login zu Ihrer WordPress-Website kann den Registrierungsprozess für Benutzer optimieren und es ihnen erleichtern, sich mit ihren Facebook-Anmeldedaten anzumelden oder einzuloggen. Dies verbessert das Nutzererlebnis und kann zu einer höheren Nutzerbindung führen. Sie können dies mit Hilfe von Plugins und durch die Einrichtung einer Facebook-App erreichen, um Ihre Website mit dem OAuth-Authentifizierungssystem von Facebook zu verbinden.

Hier finden Sie eine Schritt-für-Schritt-Anleitung zum Hinzufügen von Facebook-Login zu Ihrer WordPress-Website:


Schritt 1: Erstellen Sie eine Facebook-App

Um Nutzern die Möglichkeit zu geben, sich mit Facebook anzumelden, müssen Sie eine Facebook-App erstellen, die in Ihre WordPress-Website integriert wird.

1.1. Gehen Sie zu Facebook Developers

  1. Besuche die Facebook-Entwickler-Website.
  2. Wenn Sie noch kein Facebook-Entwicklerkonto haben, werden Sie aufgefordert, eines zu erstellen.
  3. Wenn Sie angemeldet sind, klicken Sie oben rechts auf Meine Apps und dann auf App erstellen.

1.2. Einrichten der App

  1. Wählen Sie im Pop-up-Fenster die Option Für alles andere und klicken Sie dann auf Weiter.
  2. Geben Sie den Anzeigenamen der App und die E-Mail-Adresse des App-Kontakts ein und wählen Sie ein Geschäftskonto (falls zutreffend).
  3. Klicken Sie auf App erstellen.

1.3. Konfigurieren Sie die Facebook-Anmeldung

  1. Klicken Sie in der linken Seitenleiste auf Produkt hinzufügen und wählen Sie Facebook-Anmeldung.
  2. Wählen Sie Web als Plattform.
  3. Geben Sie die URL Ihrer WordPress-Website ein (z. B. https://www.yoursite.com).

1.4. Erhalten Sie die App-ID und das Geheimnis

  1. Gehen Sie zu Einstellungen > Basis.
  2. Kopieren Sie Ihre App ID und Ihr App Secret. Sie benötigen sie später für die Konfiguration Ihres WordPress-Plugins.
  3. Geben Sie unter App Domains Ihren Domain-Namen ein (z. B. yoursite.com).
  4. Fügen Sie unter Gültige OAuth-Redirect-URIs die URL hinzu, an die Benutzer nach der Facebook-Anmeldung weitergeleitet werden sollen, was in der Regel wie folgt aussieht
    https://www.yoursite.com/wp-login.php
  5. Klicken Sie auf Änderungen speichern.

Schritt 2: Installieren Sie ein WordPress-Plugin, um den Facebook-Login zu aktivieren

Es gibt mehrere Plugins, die Ihnen helfen können, Facebook-Login in WordPress zu integrieren. Eines der beliebtesten ist Nextend Social Login.

2.1. Installieren Sie das Plugin

  1. Gehen Sie in Ihrem WordPress-Dashboard auf Plugins > Neu hinzufügen.
  2. Suchen Sie nach Nextend Social Login.
  3. Klicken Sie auf Jetzt installieren und dann auf Aktivieren.

2.2. Konfigurieren Sie das Plugin für Facebook

  1. Gehen Sie zu Nextend Social Login in Ihrem WordPress-Dashboard.
  2. Klicken Sie auf Facebook, um den Einrichtungsprozess zu starten.

2.3. Geben Sie Ihre App-ID und Ihr Geheimnis ein

  1. Fügen Sie in den Plugin-Einstellungen für Facebook die App-ID und das App-Geheimnis ein, die Sie vom Facebook-Entwicklerportal erhalten haben.
  2. Richten Sie die Callback-URL auf dieselbe gültige OAuth-Redirect-URI ein, die Sie in der Facebook-App hinzugefügt haben (normalerweise https://www.yoursite.com/wp-login.php).
  3. Konfigurieren Sie alle anderen Optionen nach Bedarf (z. B. Schaltflächen, Stile oder Anmeldeaufforderungen).
  4. Klicken Sie auf Änderungen speichern.

Schritt 3: Testen Sie die Facebook-Anmeldung

  1. Besuchen Sie die Anmeldeseite Ihrer Website oder eine andere Seite, auf der die Anmeldeschaltfläche angezeigt wird.
  2. Sie sollten nun die Schaltfläche Mit Facebook anmelden sehen.
  3. Klicken Sie auf die Schaltfläche und führen Sie den Anmeldevorgang mit einem Facebook-Konto durch, um sicherzustellen, dass er ordnungsgemäß funktioniert.

Schritt 4: Anpassen des Facebook-Login-Erlebnisses (optional)

Die meisten Plugins wie Nextend Social Login bieten Optionen, um das Aussehen und die Funktionalität des Facebook-Login-Buttons anzupassen. Sie können die folgenden Einstellungen ändern:

  • Platzierung der Schaltfläche: Wählen Sie aus, wo die Facebook-Anmeldeschaltfläche angezeigt werden soll (auf der Anmeldeseite, im Registrierungsformular oder im Kommentarbereich).
  • Umleitung der Anmeldung: Legen Sie fest, wohin Benutzer nach der Anmeldung umgeleitet werden sollen (z. B. zu ihrer Profilseite oder zur Startseite).
  • Benutzer-Rollen-Zuweisung: Weisen Sie Benutzern, die sich über Facebook anmelden, automatisch bestimmte WordPress-Rollen zu (z. B. Abonnent, Autor).
  • Design und Gestaltung: Passen Sie das Aussehen der Anmeldeschaltfläche an das Design Ihrer Website an.

Schritt 5: Aktivieren der Benutzerregistrierung über Facebook (optional)

Wenn Sie neuen Nutzern die Möglichkeit geben möchten, sich über Facebook für ein Konto auf Ihrer Website zu registrieren, stellen Sie sicher, dass die Registrierung in WordPress aktiviert ist:

  1. Gehen Sie zu Einstellungen > Allgemein in Ihrem WordPress-Dashboard.
  2. Aktivieren Sie das Kästchen neben Jeder kann sich registrieren unter Mitgliedschaft.
  3. Wählen Sie die Standardrolle für neue Benutzer (z. B. Abonnent).
  4. Speichern Sie Ihre Änderungen.

Wenn diese Option aktiviert ist, können sich Benutzer, die kein Konto haben, jetzt über Facebook anmelden.


Fazit

Das Hinzufügen von Facebook-Login zu Ihrer WordPress-Website verbessert die Benutzerfreundlichkeit, indem es eine schnelle und sichere Möglichkeit für Benutzer bietet, sich anzumelden oder zu registrieren. Indem Sie eine Facebook-App erstellen und ein Plugin wie Nextend Social Login konfigurieren, können Sie die Facebook-Authentifizierung nahtlos in Ihre Website integrieren. Mit den richtigen Tests und Anpassungen kann der Facebook-Login das Engagement der Nutzer verbessern und die Verwaltung des Website-Zugangs sowohl für Sie als auch für Ihre Besucher einfacher machen.

Testen Sie Ihre Fähigkeiten mit unseren Hosting-Diensten und erhalten Sie 15% Rabatt!

Code an der Kasse verwenden:

Skills