Cómo agregar inicio de sesión social a WordPress (la forma fácil)

Agregar inicios de sesión sociales a tu sitio web de WordPress facilita el proceso de registro para tus visitantes. Permite a los usuarios crear una cuenta utilizando sus perfiles existentes de redes sociales.

Así, en lugar de configurar un nuevo nombre de usuario y contraseña, pueden iniciar sesión con plataformas como Facebook o Google.

Esto ahorra tiempo y reduce las molestias para tus visitantes. Además, con su permiso, puedes obtener acceso a su nombre y dirección de correo electrónico.

Esta puede ser una excelente manera de crear una lista de correo electrónico para que puedas seguir llegando a tus visitantes y traerlos de vuelta a tu sitio web.

Hemos dedicado tiempo a investigar la mejor manera de configurar esto. Y en esta guía, te mostraremos cómo agregar inicios de sesión sociales a WordPress.

¿Por qué agregar inicio de sesión social a WordPress?

Hay muchas razones por las que podrías querer permitir el registro de usuarios en tu sitio web de WordPress.

Si tienes una tienda en línea, el registro de usuarios permite a los compradores guardar su información de pago y entrega. Esto les facilita comprar de nuevo en el futuro.

El registro de usuarios también es una parte importante de la creación de un sitio de membresía de WordPress. Te permite construir una comunidad de usuarios comprometidos que tienen acceso a contenido exclusivo.

Sin embargo, a la mayoría de las personas no les gusta completar formularios de registro de usuarios largos y recordar otra combinación de nombre de usuario y contraseña.

Los inicios de sesión sociales permiten a los visitantes crear una cuenta en tu sitio web con un solo clic. Pueden usar el nombre de usuario y la contraseña de sus cuentas de redes sociales existentes, como sus datos de inicio de sesión de Facebook.

Dado que es muy conveniente, el inicio de sesión social puede animar a más personas a registrarse en tu sitio web. Con eso en mente, veamos cómo puedes agregar un inicio de sesión social a WordPress.

• How to Add Social Login to WordPress
  • Paso 1: Instalar y activar Nextend Social Login
  • Paso 2: Crear tu aplicación para desarrolladores de Facebook
  • Paso 3: Conectar tu sitio web a la aplicación de Facebook
  • Paso 4: Configurar las políticas y los detalles de la aplicación
  • Paso 5: Salir en vivo y verificar los permisos de la aplicación
  • Paso 6: Agregar el ID de la aplicación y el secreto a WordPress
  • Paso 7: Personalizar tus botones de inicio de sesión social
  • Paso 8: Mostrar el botón de inicio de sesión social en tu sitio
• Tutorial en video
• Preguntas frecuentes sobre el inicio de sesión social

Cómo agregar inicio de sesión social a WordPress

La forma más fácil de agregar un inicio de sesión de front-end a tu sitio web de WordPress es usar el plugin Nextend Social Login and Register.

Este plugin gratuito permite a los visitantes iniciar sesión usando Facebook, Twitter o Google.

Paso 1: Instalar y activar Nextend Social Login

Primero, deberás instalar y activar el plugin Nextend. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Al activarlo, querrás ir a Configuración » Nextend Social Login desde el área de administración de WordPress. En esta pantalla, verás todas las diferentes opciones de inicio de sesión social que puedes agregar a tu sitio de WordPress.

El proceso para agregar un inicio de sesión social a tu sitio variará dependiendo de si estás agregando el inicio de sesión de Facebook, Twitter o Google.

Veamos Facebook como ejemplo.

Para agregar un inicio de sesión de Facebook a tu sitio web de WordPress, haz clic en el botón ‘Empezar’ debajo del logo de Facebook.

En este punto, es posible que recibas una advertencia de Facebook. Esto se debe a que Facebook requiere una conexión segura para funcionar, lo cual es un requisito de seguridad estándar.

Esto significa que tu sitio debe estar usando HTTPS antes de que puedas agregar un inicio de sesión de Facebook a WordPress. Para configurarlo, consulta nuestra guía sobre cómo cambiar de HTTP a HTTPS en WordPress.

Paso 2: Crear tu aplicación para desarrolladores de Facebook

Una vez que estés usando HTTPS, tu siguiente tarea es crear una aplicación de Facebook. Esto te permitirá crear una Clave de Aplicación y un Secreto de Aplicación, que agregarás al plugin Nextend.

Crear una ‘aplicación de Facebook’ suena técnico, pero no te preocupes. Esto no significa que estés creando una aplicación móvil. Es solo un proceso para registrar tu sitio web con Facebook, lo que te permite conectar de forma segura su sistema de inicio de sesión a tu sitio.

No necesitas saber ningún código y te guiaremos a través de todos los pasos.

Para crear esta aplicación, debes alternar entre tu panel de WordPress y el sitio web de Meta for Developers. Teniendo esto en cuenta, es una buena idea dejar tu panel de WordPress abierto en la pestaña actual y visitar Meta for Developers en una nueva pestaña.

En tu pestaña de Meta for Developers, simplemente haz clic en el botón ‘Crear aplicación’.

Luego, llegarás al proceso de configuración.

Lo primero que necesitarás hacer es elegir un portafolio de negocios al que quieras conectar la nueva aplicación. La configuración predeterminada está habilitada para ‘Todavía no quiero conectar un portafolio de negocios.’ Puedes dejar esto como está y hacer clic en ‘Siguiente.’

En la etapa de ‘Casos de uso,’ elegirás qué debe hacer tu aplicación.

Dado que queremos agregar el inicio de sesión social a WordPress, procede a seleccionar la opción ‘Autenticar y solicitar datos de usuarios con inicio de sesión de Facebook.’

Después de eso, querrás hacer clic en el botón ‘Siguiente.’

A continuación, en el campo ‘Nombre para mostrar,’ escribamos el nombre que deseas usar para la aplicación de Facebook. Este nombre se mostrará a los visitantes, así que querrás usar algo que reconozcan, como el título de tu sitio web de WordPress.

Después de nombrar tu aplicación, puedes escribir tu dirección de correo electrónico en el campo ‘Correo electrónico de contacto de la aplicación.’ Esta es la dirección que Facebook usará para advertirte sobre posibles violaciones de políticas y restricciones de la aplicación, o para compartir información sobre cómo puedes recuperar una cuenta eliminada.

Teniendo esto en cuenta, querrás escribir una dirección de correo electrónico que revises regularmente. Procede a hacer clic en ‘Siguiente’ para continuar.

Luego verás una página de revisión. En esta página, Meta for Developers te mostrará todas las configuraciones que has configurado para la nueva aplicación.

Si todo se ve bien, simplemente haz clic en el botón ‘Crear aplicación.’

Ahora deberías ver una notificación emergente con un botón ‘Ir al panel.’

Hagamos clic en él.

Paso 3: Conectar tu sitio web a la aplicación de Facebook

Ahora estás listo para agregar productos a la aplicación de Facebook.

Desde aquí, puedes hacer clic en ‘Personalizar la adición de un botón de inicio de sesión de Facebook.’

A continuación, querrás dirigirte a ‘Inicio rápido’ desde el menú ‘Inicio de sesión de Facebook.’

Desde aquí, puedes elegir la opción ‘Web.’

Esto abrirá la sección de personalización.

En el campo ‘URL del sitio,’ simplemente escribe la URL de tu sitio web.

Asegúrate de obtener la URL correcta. Incluso un pequeño error tipográfico hará que la conexión falle, y probablemente verás un mensaje de error como ‘URL de redirección no válida’.

Para hacer esto, simplemente regresa a la pestaña que muestra tu panel de WordPress. Esta pantalla proporciona instrucciones detalladas sobre cómo vincular Nextend a Facebook, incluida la URL exacta que debes usar.

Después de escribir la URL de tu sitio en el campo 'URL del sitio', asegúrate de hacer clic en el botón 'Guardar' para guardar tus cambios.

Luego, pasemos a la sección 'Configuración'.

En esta pantalla, deberás pegar una redirección oAuth válida. Para obtener este valor, simplemente vuelve a tu pestaña de WordPress.

Estas instrucciones incluyen una URL etiquetada como 'URIs de redirección OAuth válidas'. Puedes copiar esta URL.

A continuación, volvamos al sitio web Meta for Developers y peguemos la URL en el campo 'URI de redirección a verificar'.

Después de eso, estarás listo para hacer clic en el botón 'Guardar cambios' en la parte inferior.

Paso 4: Configurar las políticas y los detalles de la aplicación

Una vez hecho esto, vamos a Configuración » Básico en el menú de la izquierda.

En 'Dominio de la aplicación', simplemente escribe el nombre de dominio de tu sitio.

En el campo 'URL de la política de privacidad', deberás escribir la dirección de la política de privacidad de tu sitio web.

Esta política de privacidad debe divulgar la información que recopilas de los visitantes y cómo planeas usar esos datos, incluida cualquier información que obtengas de los inicios de sesión sociales.

Si necesitas ayuda para crear esta página importante, consulta nuestra guía sobre cómo agregar una política de privacidad en WordPress.

Para cumplir con el RGPD, debes permitir que los usuarios eliminen sus cuentas en tu sitio web.

Hay muchas maneras en que puedes permitir que los usuarios eliminen sus cuentas de WordPress, pero siempre debes compartir estas instrucciones con tus visitantes.

Para ayudar a los usuarios a encontrar esta información, haz clic en la sección 'Eliminación de datos de usuario' y luego elige 'URL de instrucciones de eliminación de datos' en el menú desplegable.

Luego puedes escribir o copiar/pegar la URL donde los visitantes pueden encontrar información sobre cómo eliminar su cuenta. Por ejemplo, podrías agregar las instrucciones a tu política de privacidad o página de preguntas frecuentes.

Una vez que hayas hecho eso, querrás abrir el menú desplegable 'Categoría' y elegir la categoría que mejor represente cómo planeas usar el inicio de sesión social en tu sitio web de WordPress.

Por ejemplo, si estás agregando un inicio de sesión de Facebook a tu tienda WooCommerce, entonces normalmente querrás hacer clic en la categoría 'Compras'.

Una vez que hayas hecho eso, el siguiente paso es elegir un ícono de aplicación. Este ícono representará tu aplicación en el 'Centro de aplicaciones', que es un área de Facebook donde los usuarios pueden encontrar nuevas aplicaciones.

Esto no es particularmente importante para nuestra aplicación, pero es un requisito, por lo que aún necesitarás crear un ícono de aplicación.

Tu ícono de aplicación debe tener un fondo transparente y tener entre 512 x 512 y 1024 x 1024 píxeles. Al crear este ícono, no puedes usar ninguna variación de los logotipos, marcas comerciales o íconos de Facebook, incluidas sus marcas WhatsApp, Oculus e Instagram.

Tampoco puedes incluir ningún texto de 'Facebook' o 'FB'.

Si aún no tienes uno, puedes crear fácilmente un ícono de aplicación de Facebook de aspecto profesional usando un creador de logotipos.

Una vez que hayas creado un ícono de aplicación, haz clic en la sección 'Ícono de aplicación' y selecciona el archivo de imagen que deseas usar.

Después de todo eso, puedes hacer clic en el botón ‘Guardar cambios’.

Paso 5: Salir en vivo y verificar los permisos de la aplicación

Tu aplicación de Facebook está configurada como privada por defecto, lo que significa que eres la única persona que puede iniciar sesión usando Facebook.

Antes de que tus visitantes puedan crear una cuenta usando Facebook, necesitarás poner tu aplicación en modo público. Para hacer esto, busca el control deslizante ‘Modo de aplicación: Desarrollo’ y haz clic en él para ponerlo en modo público.

Las aplicaciones de Facebook pueden tener ‘Acceso estándar’ o ‘Acceso avanzado’ a la información del usuario. Si tu aplicación tiene acceso estándar, entonces los visitantes no podrán iniciar sesión usando el inicio de sesión social de Facebook.

En el pasado, Facebook cambió su configuración de permisos por defecto, por lo que siempre vale la pena verificar que tu aplicación tenga los permisos correctos para admitir el inicio de sesión social.

En el menú de la izquierda, naveguemos a la sección ‘Permiso’.

Ahora, querrás ver los permisos de ‘email’ y ‘public_profile’.

Para habilitar el inicio de sesión social, ambos permisos deben estar marcados como 'Acceso avanzado' y 'Listo para usar', como puedes ver en la siguiente imagen.

¿Ves los botones 'Obtener acceso avanzado' en su lugar? Esto significa que tu aplicación actualmente no tiene los permisos correctos para iniciar sesión en redes sociales.

En este caso, deberás hacer clic en el botón 'Obtener acceso avanzado' y luego seguir las instrucciones en pantalla.

Una vez que tengas los permisos de 'Acceso avanzado', procede a navegar a Configuración de la aplicación » Básico desde el menú de la izquierda.

En la parte superior de la página, verás un 'ID de aplicación' y un 'Secreto de aplicación'.

Para revelar el 'Secreto de la aplicación', simplemente haz clic en el botón 'Mostrar'. Luego, puedes escribir la contraseña de tu cuenta de Facebook. El sitio web de Meta for Developers se actualizará para mostrar tu 'Secreto de aplicación'.

Paso 6: Agregar el ID de la aplicación y el secreto a WordPress

El siguiente paso es agregar el 'Secreto de aplicación' y el 'ID de aplicación' a tu plugin Nextend. Para hacer esto, volvamos al panel de WordPress.

Desde aquí, querrás ir a la pestaña 'Configuración' y pegar el ID y el secreto en los campos 'ID de aplicación' y 'Secreto de aplicación' en tu panel de WordPress.

Una vez que hayas hecho eso, haz clic en el botón 'Guardar cambios'.

Antes de continuar, es una buena idea probar que tu inicio de sesión social esté configurado correctamente. Para hacer esto, simplemente haz clic en el botón 'Verificar configuración'.

Esto abrirá una ventana emergente donde puedes escribir tu nombre de usuario y contraseña de Facebook. Si has configurado el inicio de sesión social correctamente, entonces deberías haber iniciado sesión en tu blog de WordPress.

Incluso si tu inicio de sesión social está funcionando, Nextend aún podría advertirte que el proveedor está actualmente deshabilitado. Si ves esta advertencia, simplemente haz clic en el botón 'Habilitar'.

¡Felicitaciones, has hecho la parte difícil y has agregado con éxito un inicio de sesión social a tu sitio web de WordPress!

Paso 7: Personalizar tus botones de inicio de sesión social

Ahora, la parte divertida: personalicemos cómo se ve y actúa el botón de inicio de sesión en tu sitio.

Para estilizar el botón de inicio de sesión social, simplemente haz clic en la pestaña ‘Botones’. Verás todos los estilos diferentes que puedes usar.

Para usar un estilo diferente, puedes hacer clic para seleccionar su botón de opción.

Una vez que hayas hecho eso, puedes editar el texto de ‘Etiqueta de inicio de sesión’ de este botón para cambiar el texto que muestra Nextend.

También puedes aplicar un formato básico a la etiqueta de inicio de sesión. Por ejemplo, en la siguiente imagen, estamos aplicando un efecto de negrita usando las etiquetas HTML <b> y </b>.

También tienes la opción de cambiar el texto que este botón usa para su ‘Etiqueta de enlace’. Este es el texto que Nextend muestra cuando un visitante ha creado una cuenta en tu sitio web pero no ha vinculado esa cuenta a Facebook.

Puedes usar la etiqueta de enlace para animar a los usuarios que han iniciado sesión a conectar sus cuentas a varios perfiles de redes sociales.

Para cambiar este texto, simplemente escribe en el campo ‘Etiqueta de enlace’. Una vez más, puedes usar HTML para aplicar un formato básico al texto de la etiqueta.

También debes facilitar que los visitantes desconecten sus perfiles de redes sociales de tu sitio web de WordPress.

Aquí es donde entra el campo ‘Etiqueta para desvincular’.

En este campo, puedes escribir el texto que tu sitio mostrará a los usuarios que han iniciado sesión y que ya han conectado sus cuentas sociales a tu sitio web.

Al hacer clic en este enlace, los usuarios pueden desconectar la conexión entre tu sitio web de WordPress y sus cuentas de redes sociales.

Estas configuraciones deberían ser suficientes para la mayoría de los sitios web.

Sin embargo, si prefieres crear un botón completamente personalizado, siempre puedes marcar la casilla ‘Usar botón personalizado’. Esto agrega una nueva sección donde puedes crear tu propio botón de inicio de sesión social usando código.

Cuando estés satisfecho con cómo has estilizado tu botón, puedes hacer clic en el botón ‘Guardar cambios’.

Paso 8: Mostrar el botón de inicio de sesión social en tu sitio

A continuación, querrás cambiar a la pestaña ‘Uso’.

Nextend ahora mostrará todos los shortcodes que puedes usar para agregar el botón de inicio de sesión social a tu sitio web de WordPress.

Estos códigos cortos pueden crear una variedad de botones de inicio de sesión. Para crear un botón de inicio de sesión básico para Facebook, usarías el siguiente código corto:

[nextend_social_login provider=”facebook”]

La siguiente imagen muestra un ejemplo de cómo se verá este botón de inicio de sesión social en tu sitio.

Como puedes ver en la pestaña 'Uso', hay algunos parámetros adicionales que puedes agregar a tu código corto. Esto cambiará la apariencia o el comportamiento del botón.

Si deseas crear un botón de inicio de sesión social que no tenga una etiqueta de texto, puedes agregar el parámetro 'icon', por ejemplo [nextend_social_login provider=”facebook” style=”icon”]

Aquí tienes un ejemplo de cómo se verá este botón en tu sitio web de WordPress.

Cuando un visitante inicia sesión en tu sitio usando una cuenta social, puedes redirigirlo automáticamente a una página. Esta pantalla tiene un ejemplo de código corto que redirigirá a los usuarios al sitio de Nextend.

Puedes personalizar fácilmente este código corto para redirigir a los visitantes a una página en tu sitio web de WordPress.

Puedes agregar algunos parámetros más a tu código corto. Para ver la lista completa de parámetros, puedes hacer clic en el enlace a la documentación del plugin.

Después de decidir qué código corto usar, puedes agregar el código a cualquier página, publicación o área lista para widgets. Para obtener instrucciones paso a paso, consulta nuestra guía para principiantes sobre cómo agregar un código corto en WordPress.

Tutorial en video

Si no eres fanático de las instrucciones escritas, simplemente mira nuestro videotutorial sobre cómo agregar inicio de sesión social a WordPress:

Suscríbete a WPBeginner

Preguntas frecuentes sobre el inicio de sesión social

Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre cómo agregar inicio de sesión social a tu sitio de WordPress:

¿Puedo elegir con qué redes sociales pueden iniciar sesión los usuarios?

Sí, la mayoría de los plugins de inicio de sesión social, incluido Nextend Social Login & Register, te permiten elegir qué redes ofrecer.

Puedes habilitar solo las que tu audiencia prefiere, como Google y Facebook, y ocultar otras. Por ejemplo, si te diriges a una audiencia profesional, podrías habilitar LinkedIn, mientras que Google y Facebook son más populares para usuarios generales.

¿Necesito un desarrollador para configurar el inicio de sesión social?

No, puedes hacerlo tú mismo sin escribir código. La mayoría de los plugins de inicio de sesión social para WordPress son fáciles de usar para principiantes y ofrecen documentación detallada.

Algunos plugins incluso vienen con asistentes de configuración integrados para guiarte a través de la creación de claves de aplicación de plataformas como Google o Facebook. Requiere unos pasos adicionales, pero todo suele ser copiar y pegar.

¿Agregar el inicio de sesión social ralentizará mi sitio web?

Agregar el inicio de sesión social no ralentizará tu sitio web si estás utilizando un plugin bien codificado.

Herramientas populares como Nextend Social Login & Register están optimizadas para el rendimiento y solo cargan scripts cuando es necesario.

Aun así, es una buena idea monitorear la velocidad de tu sitio después de la instalación. Si notas algún retraso, considera usar plugins de rendimiento o una solución de caché para mantener tu sitio rápido.

¿Es seguro el inicio de sesión social para mi sitio de WordPress?

Sí, el inicio de sesión social es seguro si utilizas plugins confiables y los mantienes actualizados.

Dado que el inicio de sesión es manejado por grandes plataformas como Google o Facebook, tu sitio no necesita almacenar ni administrar contraseñas de usuario.

Sin embargo, aún te recomendamos usar HTTPS y seguir las mejores prácticas para la seguridad de WordPress para mantener todo seguro.

¿Puedo permitir el inicio de sesión social en sitios de WooCommerce o membresía?

¡Absolutamente! El inicio de sesión social funciona muy bien con WooCommerce, BuddyPress, MemberPress y más.

Ayuda a los clientes y miembros a iniciar sesión rápidamente y reduce el abandono del carrito o la fricción al registrarse. Muchos complementos de inicio de sesión social incluso ofrecen integración incorporada con complementos populares para que no necesites ninguna configuración adicional.

¿Qué sucede si un usuario inicia sesión con inicio de sesión social y luego usa el inicio de sesión por correo electrónico?

En la mayoría de los casos, el plugin enlazará automáticamente sus cuentas.

Por ejemplo, si un usuario se registra con una cuenta de Google usando el correo electrónico ‘jane.doe@example.com’ y ya tiene una cuenta de usuario de WordPress con ese mismo correo, el plugin reconocerá la coincidencia y enlazará ambas.

Esto evita cuentas duplicadas. Sin embargo, siempre es buena idea probar esta función para ver exactamente cómo la maneja tu plugin antes de publicarlo.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un inicio de sesión social a tu sitio web de WordPress. También puedes consultar nuestra guía sobre los mejores plugins de redes sociales para WordPress o el tutorial sobre cómo agregar CAPTCHA en el formulario de inicio de sesión y registro de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.