Come aggiungere l'accesso social al sito Web della tua directory aziendale di WordPress

Le aziende lungimiranti sono sempre alla ricerca di modi per aumentare i tassi di conversione, quindi si preoccupano dell'esperienza dell'utente sul proprio sito web. Ecco perché molte aziende utilizzano l'accesso social, noto anche come funzione di accesso social, sui propri siti Web.

Per i visitatori del sito Web, l'accesso social significa che possono saltare le procedure di registrazione necessarie per creare un nuovo account e possono accedere semplicemente con un clic. È un'alternativa davvero conveniente ai tradizionali moduli di registrazione che migliora l'UX.

Allo stesso tempo, per i proprietari di siti Web, l'accesso social è una funzione utile che può aiutare a semplificare la verifica dell'utente fornendo allo stesso tempo un accesso più affidabile ai dati dell'utente per la personalizzazione .

In questo breve tutorial, ti mostreremo come impostare l'estensione di autenticazione HivePress in modo da poter consentire ai visitatori del tuo sito Web di accedere tramite Facebook e Google. Spiegheremo passo dopo passo come ottenere Facebook App ID e Google Client ID e integrarli correttamente con il tuo sito web.

Prima di iniziare, è importante notare che l'estensione di autenticazione è basata su HivePress, un plug-in di directory WordPress gratuito e può essere utilizzata solo su siti Web basati su HivePress. Quindi, in questa procedura dettagliata, utilizzeremo il plug-in HivePress insieme al suo tema di directory WordPress predefinito, ListingHive.

Iniziamo!

Installazione del componente aggiuntivo di autenticazione

Prima di tutto, devi installare l'estensione di autenticazione andando nella sezione HivePress > Estensioni . Quindi seleziona il componente aggiuntivo necessario, installalo e procedi attivando l'estensione.

Una volta installato il componente aggiuntivo, devi selezionare i metodi di autenticazione per il tuo sito web. Per farlo, vai alla sezione HivePress > Impostazioni > Utenti e seleziona uno dei metodi disponibili. Se vuoi consentire agli utenti di accedere sia tramite Facebook che tramite Google, è necessario selezionare entrambi i metodi e salvare le modifiche, come mostrato nello screenshot qui sotto.

Dopo aver selezionato i metodi di autenticazione per il tuo sito web, puoi procedere al passaggio successivo.

Aggiunta del pulsante di accesso a Facebook

Per aggiungere il pulsante "Accedi con Facebook" al tuo sito web, devi prima ottenere un ID app univoco da Facebook. Questo ID collega il tuo sito Web a Facebook e ti consente di richiedere i dettagli del profilo Facebook (ad es. l'indirizzo e-mail) necessari per l'accesso degli utenti.

Quindi, passiamo al primo passaggio.

Registrazione su Facebook

Prima di creare un'app Facebook, devi registrare un account sviluppatore Facebook. Per farlo, vai alla pagina Facebook per gli sviluppatori e fai clic sui pulsanti Accedi o Inizia . Quindi, devi accedere con il tuo account FB per procedere. Dopo aver verificato il tuo account, puoi passare al passaggio successivo.

Creazione di un'app

Una volta completata la registrazione, puoi accedere alla dashboard dell'app per creare la tua prima app. Basta fare clic sul pulsante Crea app .

Quindi devi selezionare il tipo di app. Il tipo di app determina quali API di Facebook sono disponibili per la tua app. Dicendo semplicemente che definisce quali funzionalità potrai aggiungere nella dashboard dell'app. Poiché si desidera abilitare la funzione "Accesso social" nel caso in questione, è necessario utilizzare il tipo di app "Consumatore".

Successivamente, devi impostare il nome dell'app (ad esempio, il nome del tuo sito Web) e inserire la tua email valida poiché tutte le notifiche dello sviluppatore verranno inviate lì. Non devi menzionare l'account Business Manager se non ne hai uno. Infine, fai clic sul pulsante Crea app .

Una volta creata l'app, verrai reindirizzato alla dashboard dell'app. Qui devi selezionare quali funzionalità vuoi aggiungere alla tua app. Basta cliccare sul pulsante Imposta nella sezione Facebook Login e, nella pagina successiva, selezionare la piattaforma “Web”.

Quindi, vedrai il modulo di configurazione, dove puoi inserire i dettagli del tuo sito web. Per consentire agli utenti di accedere al tuo sito Web tramite Facebook, è sufficiente compilare solo il campo URL del sito. Ma se sei un utente più esperto, puoi compilare anche gli altri campi.

Il passaggio successivo è accedere alla sezione Impostazioni > Base nella barra laterale sinistra.

Nella pagina delle impostazioni, devi:

• Inserisci il dominio del tuo sito web.
• Indicare l'URL della Privacy Policy, in modo che gli utenti possano leggerli prima di effettuare il login.
• Specifica le Istruzioni per l'eliminazione dei dati (una pagina con informazioni su come i visitatori del tuo sito Web possono eliminare i propri dati) .
• Infine, seleziona la categoria a cui appartiene il tuo sito web.

Dopo aver aggiunto tutti i dettagli richiesti, salva le modifiche.

Abilitazione dell'accesso social

Ok, hai appena creato un'app. Ora devi cambiare la modalità dell'app su "Live" e copiare l'ID dell'app.

Infine, vai al tuo sito Web, vai alla sezione WP Dashboard > HivePress > Impostazioni > Integrazioni , incolla il tuo ID app di Facebook nel campo ID app e salva le modifiche.

Questo è tutto! Ora dovrebbe esserci un pulsante Facebook nel tuo modulo di accesso che consente agli utenti di accedere al tuo sito Web tramite i loro account Facebook. Tuttavia, potrebbe essere necessario attendere alcuni minuti prima che avvengano le modifiche.

Passiamo ora alla parte successiva di questo tutorial per creare e aggiungere il pulsante Google Login.

Aggiunta del pulsante di accesso a Google

Se desideri aggiungere il pulsante "Accedi con Google" al tuo sito Web basato su HivePress, devi ottenere un ID client univoco da Google che collegherà il tuo sito Web con l'API di autenticazione di Google. Facciamolo!

Creazione di un nuovo progetto

Il primo passaggio consiste nel creare un nuovo progetto API di Google (puoi utilizzare un progetto esistente se ne hai già uno). Per farlo, vai alla Console API di Google e fai clic sul pulsante Crea progetto . Quindi devi inserire il nome del tuo progetto e fare clic sul pulsante Crea .

Ora devi andare alla sezione della schermata di consenso OAuth e selezionare l'opzione della schermata di consenso OAuth (interna o esterna) in base ai requisiti del tuo sito web. Per il bene di questo tutorial, sceglieremo l'opzione Esterno .

Quindi verrai reindirizzato al modulo di registrazione dell'app. All'interno di questo modulo, è necessario:

• Imposta il nome dell'app (ad es. il nome del tuo sito web) .
• Indicare l'e-mail di supporto utente e l'e-mail dello sviluppatore in modo che Google possa informarti di eventuali modifiche al tuo progetto.
• Specifica i collegamenti alla tua home page, alla pagina dell'informativa sulla privacy e il collegamento alla pagina dei termini di servizio.
• Infine, aggiungi il dominio del tuo sito web.

Al termine, fare clic sul pulsante Salva . Puoi saltare gli altri passaggi all'interno del modulo di registrazione e tornare alla tua dashboard.

Il passaggio successivo consiste nel creare le credenziali API, ovvero: OAuth Client ID. Puoi farlo andando alla sezione Credenziali > Crea credenziali > ID client OAuth .

All'interno di questa sezione, devi compilare il campo del nome e inserire l'URL del tuo sito web nel campo "Origini JavaScript autorizzate". Facoltativamente, puoi compilare il campo "URL di reindirizzamento autorizzati" se desideri specificare il percorso in cui gli utenti verranno reindirizzati dopo aver effettuato l'accesso con Google.

Al termine, fare clic sul pulsante Salva .

Abilitazione dell'accesso social

Infine, hai un ID cliente univoco. Ora devi copiarlo e incollarlo nella sezione WP Dashboard > HivePress > Impostazioni > Integrazioni > ID cliente . Non dimenticare di salvare le modifiche.

Conclusione

Questo è tutto! Seguendo i passaggi precedenti, puoi configurare facilmente l'estensione di autenticazione e consentire ai tuoi utenti di accedere tramite servizi di terze parti come Facebook e Google. Una volta completati tutti i passaggi, avrai gli stessi pulsanti di Facebook e Google nel modulo di accesso, come mostrato nello screenshot qui sotto.

In caso di problemi con l'aggiunta dei pulsanti di accesso social, prova a disabilitare i plug-in di terze parti (potrebbe esserci un problema di memorizzazione nella cache o un conflitto con plug-in di terze parti) . Inoltre, assicurati di aver abilitato i metodi di autenticazione nella sezione HivePress > Impostazioni > Utenti e di aver salvato le modifiche.

Inoltre, se desideri ottimizzare il tuo sito Web, ti consigliamo di controllare il nostro tutorial su come velocizzare un sito Web creato da HivePress.