Inicio de sesión con Google en WordPress (Social Login)
En este vídeo tutorial premium te enseñaremos configurar el inicio de sesión con Google con un plugin de Social Login para WordPress. Veamos.
Al finalizar este tutorial premium podrás configurar la api de google para permitirle a tus usuarios loguearse con Google en tu sitio web con WordPress.
Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.
Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐
¿Por qué añadir Social Login a tu sitio WordPress?
El Social Login (login con Google, Facebook, Twitter, Apple) reemplaza el formulario de email + contraseña por un botón que autentica al usuario con su cuenta existente. ¿Por qué importa?
- Más conversiones en registro: estudios consistentes muestran que reemplazar el formulario tradicional por Social Login aumenta la tasa de registro entre un 20% y un 50%, sobre todo en mobile.
- Menos contraseñas olvidadas: si el usuario sabe que entra con su Google, no tiene que recordar otra contraseña.
- Datos verificados: el email que recibes ya está validado por Google, no tienes que mandar email de confirmación.
- Mejor para sitios con LearnDash, MemberPress, BuddyBoss: cualquier plataforma con muchos usuarios mejora la fricción de onboarding al ofrecer Social Login. Si construyes una academia online, mira nuestros cursos de LearnDash con Divi o Tutor LMS con Divi; para comunidades e intranets, el curso de BuddyBoss; y para sitios de membresía, el curso de Membership con WooCommerce.
El plugin que recomendamos es Nextend Social Login: gratuito en su versión core, soporta Google, Facebook y Twitter en el plan free, y la integración con WordPress estándar y BuddyBoss es directa.
Pasos clave para configurar el login con Google
El proceso involucra dos partes: configurar credenciales OAuth en Google Cloud Console y pegarlas en el plugin Nextend Social Login. La parte de Google parece intimidante pero son pocos clicks ordenados:
- Instala Nextend Social Login desde Plugins → Añadir nuevo → busca «Nextend Social Login» → Instalar y Activar.
- Crea un proyecto en Google Cloud Console. Ve a console.cloud.google.com → arriba a la izquierda click en el selector de proyecto → «Nuevo Proyecto». Ponle un nombre tipo
Social Login - tusitio.com. - Configura la pantalla de consentimiento OAuth. En el menú lateral → APIs y servicios → «Pantalla de consentimiento OAuth» → tipo «Externo» → completa nombre de la app, email de soporte y dominio autorizado. Esto es lo que ve el usuario al hacer click en «Continuar con Google».
- Crea las credenciales OAuth. APIs y servicios → Credenciales → «Crear credenciales» → «ID de cliente OAuth» → tipo «Aplicación web» → ponle un nombre interno.
- Añade la URL de redirección autorizada. Este paso es el que más confunde: en Nextend Social Login → Providers → Google verás un campo «Redirect URI» (algo como
https://tusitio.com/?loginSocial=google). Copia ese valor exacto y pégalo en Google Cloud Console en «URIs de redireccionamiento autorizados». Sin esta coincidencia exacta, Google rechaza el login. - Copia el Client ID y Client Secret. Google te los muestra una sola vez después de crear la credencial. Cópialos a un editor temporal.
- Pega Client ID y Client Secret en Nextend Social Login. En el panel de WordPress → Settings → Nextend Social Login → Google → pega los valores → Save Changes.
- Activa el provider. Vuelve al panel de Nextend Social Login → click «Verify Settings» → si todo está bien, activa el botón principal de Google. Ya aparece «Continuar con Google» en la página de login estándar de WordPress.
Errores comunes al configurar OAuth (y cómo resolverlos)
- «Error 400: redirect_uri_mismatch»: la Redirect URI en Google Cloud Console no coincide exacto con la del plugin. Copia y pega tal cual, sin agregar barras finales ni cambiar HTTP/HTTPS.
- «Error 403: access_denied»: la pantalla de consentimiento OAuth está en modo «Testing» y tu email no está en la lista de testers. Pasa la app a modo «Production» o agrega tu email a los test users.
- El botón aparece pero al hacer click no pasa nada: revisa que tu sitio tenga HTTPS válido. OAuth requiere SSL en producción.
- Sites multi-idioma con Polylang/WPML: necesitas configurar la URL de redirección incluyendo el prefijo de idioma. Mira nuestro post sobre Polylang en Divi para configuración multi-idioma.
¿Y para Facebook y Twitter?
El proceso es prácticamente idéntico, solo cambia la consola donde generas las credenciales:
- Facebook: developers.facebook.com → Crear app → tipo «Consumer» → en Productos añade «Facebook Login» → copia App ID y App Secret.
- Twitter (X): developer.twitter.com → Apply for a developer account → Create Project → API Keys.
- Apple Sign In: requiere cuenta Apple Developer ($99/año) y solo está disponible en la versión Pro de Nextend.
Para empezar, recomiendo que actives solo Google. Es el que más conversión genera, el que más usuarios tienen, y el que menos fricción tiene en mobile. Si después ves demanda de otros, agregas Facebook.
Preguntas frecuentes
¿Es gratis Nextend Social Login?
La versión free incluye Google, Facebook y Twitter — suficiente para la mayoría de los sitios. La versión Pro agrega Apple, LinkedIn, Amazon y otros providers, además de features avanzados como auto-link de cuentas y registro forzado a roles específicos.
¿Funciona con BuddyBoss y LearnDash?
Sí. Nextend Social Login se integra al login estándar de WordPress y por debajo BuddyBoss, LearnDash, MemberPress y WooCommerce usan ese mismo flow — así que cualquier usuario que se registra vía Google entra automáticamente al ecosistema de tu plugin de membresía.
¿Qué pasa si un usuario ya tiene cuenta con email/password y luego entra con Google?
Si el email de su cuenta Google coincide con un usuario WordPress existente, Nextend los vincula automáticamente — entran a la misma cuenta. Si los emails no coinciden, se crea un usuario nuevo (lo cual puede generar duplicados). Para evitar esto, en Settings activa «Force email verification».
¿Es seguro?
Sí, OAuth 2.0 es el estándar de la industria — es lo que usan los grandes sitios. Tu sitio nunca recibe la contraseña del usuario; solo un token de Google que confirma quién es. Por seguridad, asegúrate de tener HTTPS válido y de mantener actualizado el plugin Nextend Social Login.
¿Puedo personalizar los botones de Social Login?
Sí. Nextend trae varios estilos prediseñados de botón (icon-only, label-only, full-color, outline) y permite CSS custom para alinearlo a tu diseño. En Settings → Buttons eliges el estilo y los colores. Para Divi puedes envolver el shortcode [nextend_social_login] en un módulo de Code para más control visual.
¿Listo para activar Social Login en tu sitio?
El plugin gratuito Nextend Social Login está en el repositorio oficial de WordPress, y los recursos del tutorial (incluyendo URLs de configuración y screenshots paso a paso) están más abajo en la zona prémium. Si todavía no eres prémium en UXDivi, empieza tu suscripción acá y desbloquea este tutorial junto con cientos de recursos descargables — desde $10 USD al mes.
4.6 calificación promedio en 
Buenas noches excelente video , solo tengo un pequeño error y no se si tiene que ver con el plugin o algo mas … después de instalar y configurar todo me puse a crear una cuenta de prueba con el registro normal de WordPress para ver si se registraba el usuario y me salia este error en la bandeja del correo con el cual lo quería registrar: https://drive.google.com/file/d/1aNUZnbUcq6ZX7cZ2FdRyNRuuzfBK3sjk/view?usp=sharing
Se supone que en ese correo debería de llegar un enlace para que el usuario cree su contraseña pero en cambio me sale eso en el correo. Espero pueda ayudarme.
Que tal Ángel, un gusto saludarte. Aquí habría que revisar de que forma registras el usuario y si tienes activado todos los permisos de registro de WP. Además, me surge una duda, independiente del correo, ¿WordPress hizo el proceso de registro o no?
Buenas tardes, con respecto a los registros de WP para los usuarios no he configurado nada fuera de lo especial solo que todos pudieran subscribirse a mi pagina .. y sobre el segundo punto si se genera el registro del usuario pero como le mencionaba el error esta en ese correo que me llega ya que debería de enviarme una url para que el usuario pueda poner su contraseña.
De acuerdo, si el registro se genera de forma normal, el problema no está en el registro sino en el envío de correos electrónicos.
Para ello te recomiendo que le eches un vistazo a cualquiera de estos dos tutos:
Si gestionas tus correos desde el servidor: https://uxdivi.com/blog/tutoriales-free/enviar-emails-en-wordpress-con-wp-mail-smtp
Si gestionas tus correos desde gmail o Google Workspace: https://uxdivi.com/blog/tutoriales-free/como-configurar-gmail-smtp-con-wp-mail-smtp-en-wordpress
Gracias por su tiempo, en seguida reviso el tuto; el problema solo es con el registro normal de WP con el registro de Google todo esta perfecto.
Correcto, como el registro de WP usa el sistema de emails nativos de WP quizá el problema está en los emails, conviene comenzar a revisar por allí.
Después de tanto buscar encontré el error , como estoy usando learndash para hacer mi pagina web de cursos, modifique en la sección de correos electrónicos un saludo para los nuevos usuarios junto a un enlace para que se registren, eso era lo que estaba interfiriendo con el registro normal de WP. Al desactivar todos las opciones se me soluciono el error (dejo imagen de referencia).
https://drive.google.com/file/d/1xoylqlD8_j3SPxpNWKpUduRHM6FgbqfL/view?usp=sharing
¡Excelente! Gracias por compartir la solución, servirá para todos los de la comunidad que puedan tener el mismo problema. Un saludo.
Buenos días, como haría para que el botón de iniciar sesión con Google me salga con el ancho completo y no como me sale a mí a medias (https://drive.google.com/file/d/1Eo2DP3rm_-SkAzL3-J4jfP3fikjRZ2sk/view?usp=sharing)
Que tal Ángel, puedes revisar en los ajustes del plugin si ofrece esa opción. En caso de que no, puedes intentarlo también a través de CSS personalizado, con el inspeccionador de código se podría intentar ver si se puede modificar. Si dejas el enlace del sitio quizá te podamos ayudar más.
Hola Jefferson perfecto el video. Pero tengo un problema, te explico si entro desde el back office si me sale iniciar sesión con Google, pero si entro en la web e inicio sesión como usuario no me sale y me interesaría que me saliera hay , muchas gracias. Saludos
Que tal Roberto, un gusto saludarte.
¿Podrías enviarnos algunas capturas de pantalla para poder visualizar el problema?
Hola, super el tutorial, una pregunta que plugin en Divi o cualquier otro me recomiendas ara en vez de que salga ese formulario de wordpress poder personalizarlo y crear tambien el formulario de registro. Gracias
Que tal Yasser, vale, justo como en los comentarios anteriores, te recomiendo que veas la solución de Ultimate Member, seguramente se ajusta más a lo que necesitas.
Saludos.
gracias por tu respuesta, estoy probando Divi acount en caso que no lo logre veo tu recomendación gracias
Si perfecto, se me olvidaba comentarte esto, también está la opción de Divi Machine Account, es una opción que aún no hemos explorado, pero parece tener las características que necesitas: https://diviengine.com/product/divi-machine-accounts/
Nos lo apuntamos para crear contenido sobre esto más adelante.
Estoy probandolo, ahora lo que no consigo es ocultar del menu y mostrar algunas opciones cuando el user esta login. Gracias
Revisa este plugin estimado: https://es.wordpress.org/plugins/user-menus/