So fügen Sie Social Login zu Ihrer WordPress-Verzeichnis-Website hinzu

Zukunftsorientierte Unternehmen sind stets auf der Suche nach Möglichkeiten zur Steigerung der Konversionsraten und legen daher Wert auf das Benutzererlebnis auf ihrer Website. Aus diesem Grund verwenden viele Unternehmen auf ihren Websites Social Login, auch Social Sign-On-Funktion genannt.

Für Website-Besucher bedeutet Social Login, dass sie die für die Erstellung eines neuen Kontos erforderlichen Registrierungsvorgänge überspringen und sich einfach mit einem Klick anmelden können. Es ist eine wirklich praktische Alternative zu den herkömmlichen Registrierungsformularen, die UX verbessern.

Gleichzeitig ist Social Login für Websitebesitzer eine nützliche Funktion, die dazu beitragen kann, die Benutzerüberprüfung zu vereinfachen und gleichzeitig einen zuverlässigeren Zugriff auf Benutzerdaten zur Personalisierung zu ermöglichen .

In diesem kurzen Tutorial zeigen wir Ihnen, wie Sie die HivePress Social Login-Erweiterung einrichten, damit Sie Ihren Website-Besuchern die Anmeldung über Facebook und Google ermöglichen können. Wir erklären Ihnen Schritt für Schritt, wie Sie die Facebook App ID und die Google Client ID erhalten und diese korrekt in Ihre Website integrieren.

Bevor wir beginnen, ist es wichtig zu beachten, dass die Social Login-Erweiterung auf HivePress, einem kostenlosen WordPress-Verzeichnis-Plugin, basiert und nur auf HivePress-basierten Websites verwendet werden kann. In dieser exemplarischen Vorgehensweise verwenden wir das HivePress-Plugin zusammen mit seinem standardmäßigen Mehrzweck-WordPress-Theme ListingHive.

Lass uns anfangen!

Installieren des Social-Login-Add-ons

Zunächst müssen Sie die Social Login-Erweiterung installieren, indem Sie zum Abschnitt WP Dashboard > Plugins > Neu hinzufügen > Plugin hochladen gehen. Wählen Sie dann die ZIP-Erweiterungsdatei aus, installieren Sie sie und fahren Sie mit der Aktivierung der Erweiterung fort.

Sobald Sie das Add-on installiert haben, müssen Sie die Authentifizierungsmethoden für Ihre Website auswählen. Gehen Sie dazu zum Abschnitt WP Dashboard > HivePress > Einstellungen > Benutzer und wählen Sie eine der verfügbaren Methoden aus. Wenn Sie Benutzern die Anmeldung über Facebook und Google ermöglichen möchten, müssen Sie beide Methoden auswählen und die Änderungen speichern, wie im Screenshot unten gezeigt.

Nachdem Sie die Authentifizierungsmethoden für Ihre Website ausgewählt haben, können Sie mit dem nächsten Schritt fortfahren.

Hinzufügen einer Facebook-Anmeldeschaltfläche

Um die Schaltfläche „Mit Facebook anmelden“ zu Ihrer Website hinzuzufügen, müssen Sie zunächst eine eindeutige App-ID von Facebook erhalten. Diese ID verknüpft Ihre Website mit Facebook und ermöglicht es Ihnen, die für die Anmeldung von Benutzern erforderlichen Facebook-Profildaten (z. B. die E-Mail-Adresse) abzufragen.

Kommen wir also zum ersten Schritt.

Registrierung auf Facebook

Bevor Sie eine Facebook-App erstellen, müssen Sie ein Facebook-Entwicklerkonto registrieren. Navigieren Sie dazu zur Seite „Facebook für Entwickler“ und klicken Sie auf die Schaltflächen „Anmelden “ oder „Erste Schritte “. Anschließend müssen Sie sich mit Ihrem FB-Konto anmelden, um fortzufahren. Sobald Sie Ihr Konto bestätigt haben, können Sie mit dem nächsten Schritt fortfahren.

Eine App erstellen

Sobald Sie die Registrierung abgeschlossen haben, können Sie zum App-Dashboard gehen, um Ihre erste App zu erstellen. Klicken Sie einfach auf die Schaltfläche „App erstellen“ .

Anschließend müssen Sie Ihren App-Typ auswählen. Der App-Typ bestimmt, welche Facebook-APIs für Ihre App verfügbar sind. Einfach ausgedrückt definiert es, welche Funktionen Sie Ihrem App-Dashboard hinzufügen können. Da Sie im vorliegenden Fall die Funktion „Social Login“ aktivieren möchten, müssen Sie den App-Typ „Consumer“ verwenden.

Als Nächstes müssen Sie den App-Namen festlegen (z. B. den Namen Ihrer Website) und Ihre gültige E-Mail-Adresse eingeben, da alle Entwicklerbenachrichtigungen dorthin gesendet werden. Sie müssen das Business Manager-Konto nicht erwähnen, wenn Sie noch keins haben. Klicken Sie abschließend auf die Schaltfläche „App erstellen“ .

Sobald Sie die App erstellt haben, werden Sie zum App-Dashboard weitergeleitet. Hier müssen Sie auswählen, welche Funktionen Sie Ihrer App hinzufügen möchten. Klicken Sie einfach im Facebook-Login- Bereich auf die Schaltfläche „Einrichten “ und wählen Sie auf der nächsten Seite die Plattform „Web“ aus.

Anschließend wird das Einrichtungsformular angezeigt, in dem Sie Ihre Website-Details eingeben können. Damit sich Benutzer über Facebook auf Ihrer Website anmelden können, reicht es aus, nur das Feld „Site-URL“ auszufüllen. Wenn Sie jedoch ein erfahrenerer Benutzer sind, können Sie auch die anderen Felder ausfüllen.

Der nächste Schritt besteht darin, zum Abschnitt „Einstellungen“ > „Allgemein“ in der linken Seitenleiste zu navigieren.

Auf der Einstellungsseite müssen Sie Folgendes tun:

• Geben Sie Ihre Website-Domain ein.
• Geben Sie die URL der Datenschutzrichtlinie an, damit Benutzer sie lesen können, bevor sie sich anmelden.
• Geben Sie die Anweisungen zur Datenlöschung an (eine Seite mit Informationen darüber, wie Ihre Website-Besucher ihre Daten löschen lassen können) .
• Wählen Sie abschließend die Kategorie aus, zu der Ihre Website gehört.

Sobald Sie alle erforderlichen Details hinzugefügt haben, speichern Sie die Änderungen.

Social Login aktivieren

Okay, Sie haben gerade eine App erstellt. Jetzt müssen Sie Ihren App-Modus auf „Live“ schalten und die App-ID kopieren.

Gehen Sie abschließend auf Ihre Website, navigieren Sie zum Abschnitt WP Dashboard > HivePress > Einstellungen > Integrationen , fügen Sie Ihre Facebook-App-ID in das Feld „App-ID“ ein und speichern Sie die Änderungen.

Das ist es! Jetzt sollte in Ihrem Anmeldeformular eine Facebook-Schaltfläche vorhanden sein, mit der sich Benutzer über ihre Facebook-Konten auf Ihrer Website anmelden können. Es kann jedoch sein, dass Sie einige Minuten warten müssen, bevor Änderungen vorgenommen werden.

Fahren wir nun mit dem nächsten Teil dieses Tutorials fort, um die Google-Login-Schaltfläche zu erstellen und hinzuzufügen.

Hinzufügen der Google-Anmeldeschaltfläche

Wenn Sie die Schaltfläche „Mit Google anmelden“ zu Ihrer von HivePress betriebenen Website hinzufügen möchten, benötigen Sie eine eindeutige Client-ID von Google, die Ihre Website mit der Google-Authentifizierungs-API verknüpft. Also machen wir's!

Erstellen eines neuen Projekts

Der erste Schritt besteht darin, ein neues Google API-Projekt zu erstellen (Sie können ein vorhandenes Projekt verwenden, wenn Sie bereits eines haben). Gehen Sie dazu zur Google API-Konsole und klicken Sie auf die Schaltfläche „Projekt erstellen“ . Anschließend müssen Sie den Namen Ihres Projekts eingeben und auf die Schaltfläche „Erstellen“ klicken.

Jetzt müssen Sie zum Abschnitt „OAuth-Zustimmungsbildschirm“ gehen und entsprechend den Anforderungen Ihrer Website die Option „OAuth-Zustimmungsbildschirm “ (intern oder extern) auswählen. Für dieses Tutorial wählen wir die Option „Extern“ .

Anschließend werden Sie zum App-Registrierungsformular weitergeleitet. In diesem Formular müssen Sie Folgendes tun:

• Legen Sie den App-Namen fest (z. B. den Namen Ihrer Website) .
• Geben Sie die E-Mail-Adresse des Benutzersupports und die E-Mail-Adresse des Entwicklers an Damit Google Sie über Änderungen an Ihrem Projekt benachrichtigen kann.
• Geben Sie Links zu Ihrer Homepage, der Seite mit den Datenschutzrichtlinien und den Link zu Ihrer Seite mit den Nutzungsbedingungen an.
• Fügen Sie abschließend Ihre Website-Domain hinzu.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Speichern . Sie können die anderen Schritte im Registrierungsformular überspringen und zu Ihrem Dashboard zurückkehren.

Der nächste Schritt besteht darin, API-Anmeldeinformationen zu erstellen, nämlich die OAuth-Client-ID. Sie können dies tun, indem Sie zum Abschnitt „Anmeldeinformationen“ > „Anmeldeinformationen erstellen“ > „OAuth-Client-ID“ gehen.

In diesem Abschnitt müssen Sie das Namensfeld ausfüllen und die URL Ihrer Website in das Feld „Autorisierte JavaScript-Ursprünge“ eingeben. Optional können Sie das Feld „Autorisierte Weiterleitungs-URLs“ ausfüllen, wenn Sie den Pfad angeben möchten, zu dem Benutzer weitergeleitet werden, nachdem sie sich bei Google angemeldet haben.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Speichern .

Social Login aktivieren

Schließlich erhalten Sie eine eindeutige Kunden-ID. Jetzt müssen Sie es kopieren und im Abschnitt WP Dashboard > HivePress > Einstellungen > Integrationen > Client-ID einfügen. Vergessen Sie nicht, die Änderungen zu speichern.

Abschluss

Das ist es! Indem Sie die oben genannten Schritte ausführen, können Sie die Social Login-Erweiterung ganz einfach einrichten und Ihren Benutzern ermöglichen, sich über Drittanbieterdienste wie Facebook und Google anzumelden. Sobald Sie alle Schritte abgeschlossen haben, werden im Anmeldeformular dieselben Facebook- und Google-Schaltflächen angezeigt, wie im Screenshot unten gezeigt.

Wenn Sie Probleme beim Hinzufügen der Social-Login-Schaltflächen haben, versuchen Sie bitte, Plugins von Drittanbietern zu deaktivieren (möglicherweise liegt ein Caching-Problem oder ein Konflikt mit Plugins von Drittanbietern vor) . Stellen Sie außerdem sicher, dass Sie die Authentifizierungsmethoden im Abschnitt WP Dashboard > HivePress > Einstellungen > Benutzer aktiviert haben und speichern Sie die Änderungen.

Wenn Sie Ihre Website optimieren möchten, empfehlen wir Ihnen außerdem, sich unser Tutorial zur Beschleunigung einer mit HivePress erstellten Website anzusehen.

Vielleicht möchten Sie auch einige unserer anderen Artikel lesen:

• Liste der besten WordPress-Verzeichnis-Plugins;
• Liste der beliebtesten kostenlosen WordPress-Verzeichnisthemen.