Cómo agregar el inicio de sesión social a su sitio web de directorio de WordPress

Las empresas con visión de futuro siempre buscan formas de aumentar las tasas de conversión, por lo que se preocupan por la experiencia del usuario en su sitio web. Es por eso que muchas empresas utilizan el inicio de sesión social, también conocido como función de inicio de sesión social, en sus sitios web.

Para los visitantes del sitio web, el inicio de sesión social significa que pueden omitir los procedimientos de registro necesarios para crear una nueva cuenta y simplemente pueden iniciar sesión con un solo clic. Es una alternativa verdaderamente conveniente a los formularios de registro tradicionales que mejoran la UX.

Al mismo tiempo, para los propietarios de sitios web, el inicio de sesión social es una característica útil que puede ayudar a simplificar la verificación del usuario y al mismo tiempo brindar un acceso más confiable a los datos del usuario para la personalización .

En este breve tutorial, le mostraremos cómo configurar la extensión de inicio de sesión social de HivePress para que pueda permitir que los visitantes de su sitio web inicien sesión a través de Facebook y Google. Explicaremos paso a paso cómo obtener la identificación de la aplicación de Facebook y la identificación del cliente de Google e integrarlos correctamente con su sitio web.

Antes de comenzar, es importante tener en cuenta que la extensión Social Login se basa en HivePress, un complemento gratuito de directorio de WordPress, y solo se puede usar en sitios web con tecnología de HivePress. Entonces, en este tutorial, usaremos el complemento HivePress junto con su tema de WordPress multipropósito predeterminado, ListingHive.

¡Empecemos!

Instalación del complemento de inicio de sesión social

En primer lugar, debe instalar la extensión de inicio de sesión social yendo a Panel de WP> Complementos> Agregar nuevo > Cargar complemento . Luego seleccione el archivo ZIP de la extensión, instálelo y continúe activando la extensión.

Una vez que instale el complemento, debe seleccionar los métodos de autenticación para su sitio web. Para hacerlo, vaya a la sección Panel de WP > HivePress > Configuración > Usuarios y seleccione uno de los métodos disponibles. Si desea permitir que los usuarios inicien sesión a través de Facebook y Google, es necesario seleccionar ambos métodos y guardar los cambios, como se muestra en la captura de pantalla a continuación.

Después de seleccionar los métodos de autenticación para su sitio web, puede continuar con el siguiente paso.

Agregar botón de inicio de sesión de Facebook

Para agregar el botón "Iniciar sesión con Facebook" a su sitio web, primero debe obtener una ID de aplicación única de Facebook. Esta identificación vincula su sitio web con Facebook y le permite solicitar los detalles del perfil de Facebook (p. ej., la dirección de correo electrónico) necesarios para que los usuarios inicien sesión.

Entonces, vayamos al primer paso.

Registrarse en Facebook

Antes de crear una aplicación de Facebook, debe registrar una cuenta de desarrollador de Facebook. Para ello, vaya a la página de Facebook para desarrolladores y haga clic en los botones Iniciar sesión o Comenzar . Luego, debe iniciar sesión con su cuenta de FB para continuar. Una vez que verifique su cuenta, puede pasar al siguiente paso.

Crear una aplicación

Una vez que termine el registro, puede ir al Panel de aplicaciones para crear su primera aplicación. Simplemente haga clic en el botón Crear aplicación .

Luego tienes que seleccionar tu tipo de aplicación. El tipo de aplicación determina qué API de Facebook están disponibles para su aplicación. Simplemente decirlo define qué funciones podrá agregar en su Tablero de aplicaciones. Dado que desea habilitar la función "Inicio de sesión social" en el caso en cuestión, debe usar el tipo de aplicación "Consumidor".

A continuación, debe configurar el nombre de la aplicación (por ejemplo, el nombre de su sitio web) e ingresar su correo electrónico válido, ya que todas las notificaciones del desarrollador se enviarán allí. No tienes que mencionar la cuenta de Business Manager si no tienes una. Finalmente, haga clic en el botón Crear aplicación .

Una vez que cree la aplicación, será redirigido al panel de aplicaciones. Aquí debe seleccionar las funciones que desea agregar a su aplicación. Simplemente haga clic en el botón Configurar en la sección de inicio de sesión de Facebook y, en la página siguiente, seleccione la plataforma "Web".

Luego, verá el formulario de configuración, donde puede ingresar los detalles de su sitio web. Para permitir que los usuarios inicien sesión en su sitio web a través de Facebook, es suficiente completar solo el campo URL del sitio. Pero si es un usuario más experimentado, también puede completar los otros campos.

El siguiente paso es navegar a la sección Configuración > Básica en la barra lateral izquierda.

En la página de configuración, tienes que:

• Ingrese el dominio de su sitio web.
• Indique la URL de la Política de Privacidad, para que los usuarios puedan leerla antes de iniciar sesión.
• Especifique las Instrucciones de eliminación de datos (una página con información sobre cómo los visitantes de su sitio web pueden eliminar sus datos) .
• Finalmente, seleccione la categoría a la que pertenece su sitio web.

Una vez que agregue todos los detalles requeridos, guarde los cambios.

Habilitación del inicio de sesión social

Vale, acabas de crear una aplicación. Ahora debe cambiar el modo de su aplicación a "En vivo" y copiar la ID de la aplicación.

Finalmente, vaya a su sitio web, navegue a WP Dashboard > HivePress > Configuración > sección Integraciones , pegue su ID de la aplicación de Facebook en el campo ID de la aplicación y guarde los cambios.

¡Eso es todo! Ahora debería haber un botón de Facebook en su formulario de inicio de sesión que permita a los usuarios iniciar sesión en su sitio web a través de sus cuentas de Facebook. Sin embargo, es posible que deba esperar unos minutos antes de que se realicen los cambios.

Ahora pasemos a la siguiente parte de este tutorial para crear y agregar el botón de inicio de sesión de Google.

Adición del botón de inicio de sesión de Google

Si desea agregar el botón "Iniciar sesión con Google" a su sitio web con tecnología de HivePress, debe obtener una ID de cliente única de Google que vinculará su sitio web con la API de autenticación de Google. ¡Hagamoslo!

Creación de un nuevo proyecto

El primer paso es crear un nuevo proyecto de API de Google (puede usar un proyecto existente si ya tiene uno). Para hacer eso, vaya a la Consola API de Google y haga clic en el botón Crear proyecto . Luego debe ingresar el nombre de su proyecto y hacer clic en el botón Crear .

Ahora debe ir a la sección de pantalla de consentimiento de OAuth y seleccionar la opción de pantalla de consentimiento de OAuth (interna o externa) según los requisitos de su sitio web. Por el bien de este tutorial, elegiremos la opción Externa .

Luego será redirigido al formulario de registro de la aplicación. Dentro de este formulario, debe:

• Establezca el nombre de la aplicación (por ejemplo, el nombre de su sitio web) .
• Indique el correo electrónico de soporte al usuario y el correo electrónico del desarrollador para que Google pueda notificarle sobre cualquier cambio en su proyecto.
• Especifique enlaces a su página de inicio, página de política de privacidad y el enlace a su página de términos de servicio.
• Finalmente, agregue el dominio de su sitio web.

Cuando haya terminado, haga clic en el botón Guardar . Puede omitir los otros pasos dentro del formulario de registro y volver a su Tablero.

El siguiente paso es crear credenciales de API, a saber, ID de cliente de OAuth. Puede hacerlo en la sección Credenciales > Crear credenciales > ID de cliente de OAuth .

Dentro de esta sección, debe completar el campo de nombre e ingresar la URL de su sitio web en el campo "Orígenes de JavaScript autorizados". Opcionalmente, puede completar el campo "URL de redirección autorizadas" si desea especificar la ruta a la que se redirigirá a los usuarios una vez que hayan iniciado sesión en Google.

Una vez que haya terminado, haga clic en el botón Guardar .

Habilitación del inicio de sesión social

Finalmente, obtuvo una identificación de cliente única. Ahora debe copiarlo y pegarlo en la sección Panel de WP > HivePress > Configuración > Integraciones > ID de cliente . No olvides guardar los cambios.

Conclusión

¡Eso es todo! Siguiendo los pasos anteriores, puede configurar fácilmente la extensión de inicio de sesión social y permitir que sus usuarios inicien sesión a través de servicios de terceros como Facebook y Google. Una vez que complete todos los pasos, tendrá los mismos botones de Facebook y Google en el formulario de inicio de sesión, como se muestra en la captura de pantalla a continuación.

Si tiene algún problema para agregar los botones de inicio de sesión social, intente deshabilitar los complementos de terceros (puede haber un problema de almacenamiento en caché o un conflicto con los complementos de terceros) . Además, asegúrese de haber habilitado los métodos de autenticación en la sección Panel de WP > HivePress > Configuración > Usuarios y guarde los cambios.

Además, si desea optimizar su sitio web, le recomendamos consultar nuestro tutorial sobre cómo acelerar un sitio web creado por HivePress.

También puede consultar algunos de nuestros otros artículos:

• Lista de los mejores complementos de directorio de WordPress;
• Lista de los temas de directorio gratuitos de WordPress más populares.