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

Vorausschauende Unternehmen suchen immer nach Möglichkeiten, die Konversionsraten zu erhöhen, und kümmern sich daher um die Benutzererfahrung auf ihrer Website. Aus diesem Grund verwenden viele Unternehmen auf ihren Websites Social Login, auch bekannt als Social-Sign-On-Funktion.

Für Website-Besucher bedeutet Social Login, dass sie Registrierungsverfahren überspringen können, die zum Erstellen eines neuen Kontos erforderlich sind, und sich einfach mit einem Klick anmelden können. Es ist eine wirklich bequeme Alternative zu den herkömmlichen Registrierungsformularen, die die UX verbessert.

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 für die Personalisierung zu ermöglichen .

In diesem kurzen Tutorial zeigen wir Ihnen, wie Sie die HivePress-Authentifizierungserweiterung einrichten, damit Sie Ihren Website-Besuchern erlauben können, sich über Facebook und Google anzumelden. Wir erklären 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 Authentifizierungserweiterung auf HivePress basiert, einem kostenlosen WordPress-Verzeichnis-Plugin, und nur auf HivePress-basierten Websites verwendet werden kann. In dieser exemplarischen Vorgehensweise verwenden wir also das HivePress-Plugin zusammen mit seinem standardmäßigen WordPress-Verzeichnisdesign ListingHive.

Lass uns anfangen!

Installieren des Authentifizierungs-Add-ons

Zunächst müssen Sie die Authentifizierungserweiterung installieren, indem Sie zum Abschnitt HivePress > Erweiterungen gehen. Wählen Sie dann das erforderliche Add-On aus, installieren Sie es und fahren Sie mit der Aktivierung der Erweiterung fort.

Nachdem Sie das Add-on installiert haben, müssen Sie die Authentifizierungsmethoden für Ihre Website auswählen. Gehen Sie dazu zum Abschnitt HivePress > Einstellungen > Benutzer und wählen Sie eine der verfügbaren Methoden aus. Wenn Sie Benutzern erlauben möchten, sich entweder über Facebook oder Google anzumelden, müssen Sie beide Methoden auswählen und die Änderungen speichern, wie im folgenden Screenshot gezeigt.

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

Facebook-Login-Button hinzufügen

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

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 “. Dann müssen Sie sich mit Ihrem FB-Konto anmelden, um fortzufahren. Sobald Sie Ihr Konto verifiziert haben, können Sie mit dem nächsten Schritt fortfahren.

Erstellen einer App

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 .

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

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

Nachdem 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 auf die Schaltfläche „Einrichten“ im Abschnitt „ Facebook-Anmeldung “ und wählen Sie auf der nächsten Seite die Plattform „Web“ aus.

Dann sehen Sie das Einrichtungsformular, 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 Website-URL auszufüllen. Aber wenn Sie ein erfahrenerer Benutzer sind, können Sie auch die anderen Felder ausfüllen.

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

Auf der Einstellungsseite müssen Sie:

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

Nachdem 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“ umstellen und die App-ID kopieren.

Gehen Sie schließlich zu Ihrer 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 . Dann 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 die Option OAuth-Zustimmungsbildschirm (intern oder extern) entsprechend Ihren Website-Anforderungen auswählen. Für dieses Tutorial wählen wir die Option External .

Dann werden Sie zum App-Registrierungsformular weitergeleitet. Innerhalb dieses Formulars müssen Sie:

• 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 informieren 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 schließlich 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 – OAuth-Client-ID. Gehen Sie dazu zum Abschnitt Anmeldedaten > Anmeldedaten erstellen > OAuth-Client-ID .

In diesem Abschnitt müssen Sie das Namensfeld ausfüllen und die URL Ihrer Website in das Feld „Autorisierter JavaScript-Ursprung“ 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 haben Sie eine eindeutige Client-ID. Jetzt müssen Sie es kopieren und im Abschnitt WP Dashboard > HivePress > Einstellungen > Integrationen > Client-ID einfügen . Vergessen Sie nicht, Änderungen zu speichern.

Fazit

Das ist es! Indem Sie die obigen Schritte befolgen, können Sie die Authentifizierungserweiterung ganz einfach einrichten und Ihren Benutzern erlauben, sich über Dienste von Drittanbietern wie Facebook und Google anzumelden. Sobald Sie alle Schritte abgeschlossen haben, haben Sie dieselben Facebook- und Google-Schaltflächen im Anmeldeformular, wie im folgenden Screenshot 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 HivePress > Einstellungen > Benutzer aktiviert und die Änderungen gespeichert haben.

Wenn Sie Ihre Website optimieren möchten, empfehlen wir Ihnen außerdem, unser Tutorial zur Beschleunigung einer von HivePress erstellten Website zu lesen.