Cum să adăugați autentificare socială pe site-ul dvs. WordPress Directory

Publicat: 2021-09-02

Companiile de perspectivă caută mereu modalități de a crește ratele de conversie, așa că le pasă de experiența utilizatorului pe site-ul lor. De aceea, multe companii folosesc autentificarea socială, cunoscută și ca o funcție de conectare socială, pe site-urile lor web.

Pentru vizitatorii site-ului, autentificarea socială înseamnă că pot sări peste procedurile de înregistrare necesare pentru a crea un cont nou și se pot conecta pur și simplu cu un singur clic. Este o alternativă cu adevărat convenabilă la formularele tradiționale de înregistrare care îmbunătățesc UX.

În același timp, pentru proprietarii de site-uri web, autentificarea socială este o caracteristică utilă care poate ajuta la simplificarea verificării utilizatorilor, oferind în același timp un acces mai fiabil la datele utilizatorilor pentru personalizare .

În acest scurt tutorial, vă vom arăta cum să configurați extensia HivePress Social Login, astfel încât să puteți permite vizitatorilor site-ului dvs. să se conecteze prin Facebook și Google. Vom explica pas cu pas cum să obțineți ID-ul aplicației Facebook și ID-ul clientului Google și să le integram corect cu site-ul dvs. web.

Înainte de a începe, este important să rețineți că extensia de conectare socială se bazează pe HivePress, un plugin gratuit pentru directoare WordPress și poate fi folosită numai pe site-urile web alimentate de HivePress. Deci, în această prezentare, vom folosi pluginul HivePress împreună cu tema sa multifuncțională implicită WordPress, ListingHive.

Să începem!

Simțiți-vă liber să verificați tutorialul nostru despre cum să creați un site web director cu WordPress gratuit și fără abilități de codare.

Instalarea suplimentului Social Login

În primul rând, trebuie să instalați extensia Social Login, accesând WP Dashboard > Plugins > Add New > Upload Plugin . Apoi selectați fișierul ZIP de extensie, instalați-l și continuați prin activarea extensiei.

Odată ce instalați suplimentul, trebuie să selectați metodele de autentificare pentru site-ul dvs. web. Pentru a face acest lucru, accesați WP Dashboard > HivePress > Setări > secțiunea Utilizatori și selectați una dintre metodele disponibile. Dacă doriți să permiteți utilizatorilor să se conecteze fie prin Facebook, fie prin Google, este necesar să selectați ambele metode și să salvați modificările, așa cum se arată în captura de ecran de mai jos.

Adăugarea de metode de autentificare pe site-ul web director de afaceri WordPress.

După ce selectați metodele de autentificare pentru site-ul dvs. web, puteți trece la pasul următor.

Adăugarea butonului de conectare la Facebook

Pentru a adăuga butonul „Conectează-te cu Facebook” pe site-ul tău, mai întâi trebuie să obții un ID unic de aplicație de la Facebook. Acest ID conectează site-ul dvs. cu Facebook și vă permite să solicitați detaliile profilului Facebook (de exemplu, adresa de e-mail) necesare pentru autentificarea utilizatorilor.

Deci, să trecem la primul pas.

Înregistrare pe Facebook

Înainte de a crea o aplicație Facebook, trebuie să înregistrați un cont de dezvoltator Facebook. Pentru a face acest lucru, navigați la pagina Facebook pentru dezvoltatori și faceți clic pe butoanele Conectați -vă sau Începeți . Apoi, trebuie să vă conectați cu contul FB pentru a continua. După ce vă verificați contul, puteți trece la pasul următor.

Crearea unei aplicații

După ce finalizați înregistrarea, puteți accesa Tabloul de bord al aplicației pentru a crea prima aplicație. Pur și simplu faceți clic pe butonul Creați aplicație .

Crearea unei noi aplicații Facebook.

Apoi trebuie să selectați tipul de aplicație. Tipul de aplicație determină ce API-uri Facebook sunt disponibile pentru aplicația ta. Pur și simplu spunând că acesta definește funcțiile pe care le vei putea adăuga în Tabloul de bord al aplicației. Deoarece doriți să activați funcția „Autentificare socială” în cazul în cauză, trebuie să utilizați tipul de aplicație „Consumator”.

Selectarea unui tip de aplicație Facebook.

Apoi, trebuie să setați numele aplicației (de exemplu, numele site-ului dvs.) și să introduceți adresa de e-mail validă, deoarece toate notificările dezvoltatorului vor fi trimise acolo. Nu trebuie să menționezi contul Business Manager dacă nu ai unul. În cele din urmă, faceți clic pe butonul Creați aplicație .

Crearea unei aplicații FB.

Odată ce creați aplicația, veți fi redirecționat către Tabloul de bord al aplicației. Aici trebuie să selectați ce caracteristici doriți să adăugați aplicației dvs. Pur și simplu faceți clic pe butonul Configurare din secțiunea Conectare Facebook , iar pe pagina următoare, selectați platforma „Web”.

Adăugați produse la aplicația Facebook.

Apoi, veți vedea formularul de configurare, unde puteți introduce detaliile site-ului dvs. Pentru a permite utilizatorilor să se conecteze la site-ul dvs. prin Facebook, este suficient să completați numai câmpul Adresa URL a site-ului. Dar dacă sunteți un utilizator mai experimentat, puteți completa și celelalte câmpuri.

Introducerea adresei URL a unui site web în timpul creării aplicației FB.

Următorul pas este să navigați la secțiunea Setări > De bază din bara laterală din stânga.

Setările de bază ale aplicației Facebook.

Pe pagina de setări, trebuie să:

  • Introduceți domeniul site-ului dvs.
  • Indicați adresa URL a politicii de confidențialitate, astfel încât utilizatorii să le poată citi înainte de a se conecta.
  • Specificați instrucțiunile de ștergere a datelor (o pagină cu informații despre cum vizitatorii site-ului dvs. pot obține datele șterse) .
  • În cele din urmă, selectați categoria căreia îi aparține site-ul dvs.

După ce adăugați toate detaliile necesare, salvați modificările.

Completarea detaliilor despre site-ul meu pe pagina Facebook pentru dezvoltatori.

Activare autentificare socială

Bine, tocmai ați creat o aplicație. Acum trebuie să comutați modul aplicație la „Live” și să copiați ID-ul aplicației.

Trecerea la un mod live pentru o aplicație Facebook.

În cele din urmă, accesați site-ul dvs. web, navigați la WP Dashboard > HivePress > Setări > secțiunea Integrari , inserați ID-ul aplicației Facebook în câmpul ID aplicație și salvați modificările.

Adăugarea ID-ului aplicației Facebook în directorul de afaceri WordPress.

Asta este! Acum ar trebui să existe un buton Facebook în formularul de conectare care să permită utilizatorilor să se conecteze la site-ul dvs. prin conturile lor de Facebook. Cu toate acestea, poate fi necesar să așteptați câteva minute înainte ca modificările să aibă loc.

Acum să trecem la următoarea parte a acestui tutorial pentru a crea și adăuga butonul Google Login.

Adăugarea butonului de conectare Google

Dacă doriți să adăugați butonul „Conectați-vă cu Google” pe site-ul dvs. web alimentat de HivePress, trebuie să obțineți un ID de client unic de la Google, care vă va conecta site-ul cu API-ul de autentificare Google. Deci hai sa o facem!

Crearea unui nou proiect

Primul pas este să creați un nou proiect Google API (puteți folosi un proiect existent dacă aveți deja unul). Pentru a face acest lucru, accesați Consola API Google și faceți clic pe butonul Creare proiect . Apoi trebuie să introduceți numele proiectului și să faceți clic pe butonul Creare .

Crearea unui nou proiect Google API.

Acum trebuie să accesați secțiunea ecran de consimțământ OAuth și să selectați opțiunea ecran de consimțământ OAuth (internă sau externă) în funcție de cerințele site-ului dvs. De dragul acestui tutorial, vom alege opțiunea Externă .

Apoi veți fi redirecționat către formularul de înregistrare a aplicației. În cadrul acestui formular, trebuie să:

  • Setați numele aplicației (de exemplu, numele site-ului dvs. web) .
  • Indicați e-mailul de asistență pentru utilizatori și e-mailul dezvoltatorului astfel încât Google vă poate notifica despre orice modificări aduse proiectului dvs.
  • Specificați linkuri către pagina dvs. de pornire, pagina cu politica de confidențialitate și linkul către pagina cu termenii și condițiile.
  • În cele din urmă, adăugați domeniul site-ului dvs.

Când ați terminat, faceți clic pe butonul Salvare . Puteți sări peste ceilalți pași din formularul de înregistrare și să reveniți la tabloul de bord.

Completarea detaliilor în pagina de ecran de consimțământ Google OAuth.

Următorul pas este crearea acreditărilor API, și anume – ID client OAuth. Puteți face acest lucru accesând secțiunea Acreditări > Creare acreditări > ID client OAuth .

Crearea acreditărilor Google API.

În această secțiune, trebuie să completați câmpul de nume și să introduceți adresa URL a site-ului dvs. în câmpul „Origini JavaScript autorizate”. Opțional, puteți completa câmpul „Adrese URL de redirecționare autorizate” dacă doriți să specificați calea în care vor fi redirecționați utilizatorii după ce s-au conectat la Google.

După ce ați terminat, faceți clic pe butonul Salvare .

Completarea detaliilor necesare pentru crearea de noi acreditări.

Activare autentificare socială

În cele din urmă, aveți un ID de client unic. Acum trebuie să-l copiați și să-l lipiți în WP Dashboard > HivePress > Setări > Integrari > secțiunea ID client . Nu uitați să salvați modificările.

Adăugarea ID-ului de client Google pe site-ul web director de afaceri WordPress.

Concluzie

Asta este! Urmând pașii de mai sus, puteți configura cu ușurință extensia de conectare socială și puteți permite utilizatorilor să se conecteze prin servicii terțe precum Facebook și Google. După ce ați finalizat toți pașii, veți avea aceleași butoane Facebook și Google în formularul de conectare, așa cum se arată în captura de ecran de mai jos.

Exemplu de butoane de conectare la social la formularul de înregistrare a site-ului.

Dacă întâmpinați probleme la adăugarea butoanelor de conectare la rețele sociale, încercați să dezactivați pluginurile terță parte (poate exista o problemă de stocare în cache sau un conflict cu pluginurile terță parte) . De asemenea, asigurați-vă că ați activat metodele de autentificare în WP Dashboard > HivePress > Setări > secțiunea Utilizatori și salvați modificările.

În plus, dacă doriți să vă optimizați site-ul web, vă recomandăm să verificați tutorialul nostru despre cum să accelerați un site web construit de HivePress.

Poate doriți să verificați și câteva dintre celelalte articole ale noastre:

  • Lista celor mai bune pluginuri pentru directoare WordPress;
  • Lista celor mai populare teme gratuite de directoare WordPress.