Cómo crear un app de inicio de sesión con la API de Facebook para conectar Thrive Suite

MCD Diseño Web

Por: MCD

Tiempo de lectura minutos

  • Portada
  • /
  • Blog
  • /
  • Cómo crear un app de inicio de sesión con la API de Facebook para conectar Thrive Suite

App login de Facebook, se trata de una aplicación que simplifica la vida de los usuarios al permitirles iniciar sesión, registrarse o dejar comentarios en diferentes sitios web que dispongan de esta característica sin necesidad de llenar formularios con todos sus datos personales nuevamente por que ya están en Facebook y pueden reutilizarse.

En el caso específico de Thrive Suite hay dos complementos en concreto que disponen de esta integración con la API de Facebook y se trata de Thrive Comments y Thrive Ovation.

Cuando utilizas Thrive Comments si tus visitantes inicien sesión en su perfil de Facebook también podrán hacerlo en tu sitio web para dejar un comentario sin necesidad de crear una cuenta nuevamente.

También si tienes la API de Facebook configurada en Thrive Ovation tus visitantes, podrán iniciar sesión en su perfil de Facebook y cargar su imagen en un formulario para dejar un testimonio entre otras cosas. Sin más preámbulos veremos a continuación todo el proceso de configuración paso a paso. ¡Manos a la obra!

IMPORTANTE: Facebook no acepta URL que no sean seguras. Para poder crear una conexión de Inicio de sesión con Facebook entre tu perfil de Facebook o tu página, la URL de tu sitio web debe comenzar con "HTTPS". Por lo tanto, si la URL de tu sitio web no es segura, lo que significa que comienza solo con "HTTP", no podrás crear la app correctamente. 


Echa un vistazo aquí para tener tu sitio con "HTTPS" : Aprende a instalar un certificado SSL en tu WordPress en un abrir y cerrar de ojos: mega tutorial

Una vez que tu sitio tenga un Certificado SSL para que tus URL empiecen con "HTTPS", deberás obtener una ID de aplicación de Facebook para poder utilizar la API y lo veremos a continuación paso a paso. ¡Manos a la obra!

Crear una nueva App en Facebook

Inicia sesión en tu cuenta de Facebook y dirígete a la página de desarrolladores de Facebook. Debajo del botón "Mis aplicaciones" de la barra de navegación, verás un botón "Crear aplicación" haz clic en él.

app login

En la siguiente pantalla de todas las opciones disponibles debes elegir la primera "Empresa" como puedes ver en la siguiente captura.

app login

A continuación, verás una nueva pantalla donde se te pedirá que ingreses un nombre para tu aplicación, tu correo electrónico de contacto y el propósito para crear esta aplicación, completa todo como se ve en la siguiente captura:

app login

En este tutorial, te explicaré paso a paso cómo crear una app de login con la API de Facebook y conectarla con los plugins de Thrive Suite que dispongan de esta característica. Entre y te cuento todos los detalles...

Tweetealo a tus amigos

Agregar un producto

El siguiente paso es agregar un producto de los tantos que tiene Facebook disponibles. Aquí tendrás que seleccionar un producto de la lista, que para el caso de este tutorial debes elegir Inicio de sesión con Facebook.

app login

Como se muestra en la imagen superior, debes hacer clic en el botón Configurar del producto Inicio de sesión de Facebook.

Elegir una plataforma para tu producto

Aquí, debes elegir la plataforma en la que quieres utilizar el producto de Inicio de sesión con Facebook. En este caso, deberás elegir Web.

Ahora, debes ingresar la URL de tu sitio web en el que quieres utilizar la aplicación y hacer clic en el botón Save (guardar) y luego en el botón Continuar. como se muestra en la imagen inferior.

app login

Los siguientes pasos de este asistente que son cinco en total puedes omitirlos ya que no son necesarios para integrar la aplicación con los plugin de Thrive Suite.

Igualmente debes continuar con la configuración de la integración Inicio de sesión con Facebook siguiendo los próximos pasos.

Aprende a crear una app de inicio de sesión con Facebook paso a paso para integrarlo con Thrive Suite. Tutorial completo y actualizado...

Tweetealo a tus amigos

Deshabilitar el "Modo estricto para redireccionar URI"

Facebook tiene el "Modo estricto" activado de forma predeterminada y no hay ninguna opción para desactivarlo, por lo que tendrás que crear el URI de redireccionamiento de OAuth exacto para continuar con el proceso de forma exitosa.

La URL de redireccionamiento de OAuth es un enlace, una URL a la que se enviará al visitante después de que inicie sesión (siempre y cuando la autorización de la cuenta se haya realizado correctamente).

Esto puede parecer un poco complicado, pero sigue todos los pasos a continuación y verás que es mucho más fácil de lo que parece.

Construir URL de redireccionamiento

La URL de redireccionamiento tiene tres partes:

1 - Tu página de administración:

Esta parte debe contener tu dominio ( https://www.tusitio.com/ ), junto con la parte de la administración que se vería de esta manera si la mostrarás sola: "/wp-admin/admin.php".

Por lo tanto, si juntamos las dos partes hasta ahora, tu enlace debería verse así:

https://www.tusitio.com/wp-admin/admin.php

NOTA: Si tienes una URL de inicio de sesión personalizada, tendrás que usar esa URL. Por ejemplo, si tu página de inicio de sesión personalizada está en el directorio /test/admin.php, entonces, la URL debería verse así:

https://www.tusitio.com/test/admin.php

2 - Después de esto viene una parte estática, que es siempre la misma:

Esta parte contiene la página de tu sitio web donde los visitantes serán redirigidos y el tipo de conexión API (en este caso, Facebook) que se utilizará precedida por un signo de interrogación:

?page=tve_dash_api_connect&api=facebook

Entonces la URL debería verse así después de agregarle esa parte estática también:

https://www.tusitio.com/wp-admin/admin.php?page=tve_dash_api_connect&api=facebook

3 - La tercera parte de la URL es una parte dinámica porque cambia según los detalles de tu aplicación:

Este contiene tu ID de aplicación y tu ID secreto.

Para encontrarlos tendrás que ir a la parte "Configuración" de las opciones de la barra lateral izquierda y luego hacer clic en el menú desplegable "Básico".

app login

Antes de copiar las claves que se necesitan para terminar la configuración debes completar el campo "Dominios de la aplicación" con tu dominio y el campo "URL de política de privacidad" con una URL de la Política de privacidad de tu sitio web como se puede apreciar en la siguiente captura:

app login

Luego, debes hacer clic en el botón "Guardar cambios" que se encuentra en la parte inferior derecha de la página.

Estos deben completarse porque más adelante tendrás que cambiar el estado de tu aplicación y eso no se puede hacer sin estos campos completados previamente.

Ahora puedes copiar en el bloc de notas "ID de la aplicación" y el "ID secreto de la aplicación" desde la parte superior de las opciones como puedes verlo claramente en la siguiente captura porque los utilizaremos más adelante.

app login

Debes tener en cuenta que cuando hagas clic en "Mostrar" en la sección "Clave secreta de la aplicación" debes volver a introducir tu contraseña.

Después de haber copiado los ID de aquí, completa el enlace con ellos. La tercera parte debería verse así:

&app_id=Your Facebook APP ID&app_secret=Your Facebook Secret ID

Pega la ID de la aplicación y la ID secreta en lugar de los dos marcadores de posición del ejemplo (tu ID de la aplicación de Facebook, tu ID de la clave secreta de Facebook)

Aquí tienes una muestra de cómo se vería una URL compuesta correctamente:

https://www.tusitio.com/wp-admin/admin.php?page=tve_dash_api_connect&api=facebook&app_id=YourFacebookAppID&app_secret=YourFacebookSecretID

NOTA: Asegúrate de cambiar el dominio, el ID de la aplicación y el ID secreto con tus datos:

En lugar de la parte www.tusitio.com, ingresa la URL de tu sitio web.
En lugar de la parte de tu ID de aplicación de Facebook, ingresa tu ID de aplicación.
En lugar de la parte de tu ID secreto de Facebook, ingresa el ID secreto de tu aplicación.

Aquí está el ejemplo de cómo se vería la URL con las partes necesarias reemplazadas:

https://www.tusitio.com/wp-admin/admin.php?page=tve_dash_api_connect&api=facebook&app_id=111111111&app_secret=11aaa111aaa11aaa

Asegúrate de guardar todo antes de salir de la página.

Una vez que tengas la URL tendrás que ir a la barra lateral izquierda y en la sección de “Productos”, donde encontrarás el producto que has agregado, Inicio de sesión con Facebook. Haz clic en él y luego elige "Configuración".

app login

Ahora, escribe la URL, compuesta por las tres partes detalladas anteriormente, en la sección "URI de redireccionamiento de OAuth válidos".

Pero antes tendrás que cambiar el permiso "public_profile" (perfil público) para poder utilizar el inicio de sesión con Facebook haciendo clic en Get Advanced Access (Obtener acceso avanzado) para pasar a la sección de permisos y funciones.

Una vez aquí haz clic en Filtrar niveles de acceso en el menú desplegable elige Mostrar todo como se ve en las siguientes capturas.

app login

Cuando tengas desplegada la lista de todos los permisos disponibles, debes desplazarte hasta el permiso "public_profile" y hacer clic el botón que esta a la derecha que dice Obtener acceso avanzado como puedes apreciar en la siguiente captura.

app login

Ahora debes confirmar el uso del permiso public_profile, si estas de acuerdo con los términos debes hacer clic en la casilla de verificación y luego clic en el botón Confirmar.

app login

Ahora si seguimos donde estábamos antes en la configuración de inicio de sesión con Facebook para terminar de ingresar los datos que faltan.

Escribe la URL compuesta por las tres partes detalladas anteriormente en la sección "URI de redireccionamiento de OAuth válidos". ¿Te acuerdas?

app login

Es importante que hagas clic en "Guardar cambios" después de agregar la URL en el campo "URI de redireccionamiento de OAuth válidas".

Validador de URI de redireccionamiento

En el siguiente paso, deberás verificar si la URL que has construido es válida. Para hacer esto, primero tendrás que completar la sección "Validador de URI de redireccionamiento" con la URL respectiva que has creado y luego tendrás que verificarla.

Desplázate hacia abajo hasta que veas la sección "Validador de URI de redireccionamiento" y completa el campo "URI de redireccionamiento para verificar" con la URL que construimos en este tutorial (pero con los datos de tu sitio web, no lo olvides):

app login

Cuando hayas verificado la validez de la URL, guarda los cambios nuevamente haciendo clic en el botón Guardar cambios en la parte inferior de la página.

Deberás seguir todos estos pasos para que la URL se valide correctamente, de lo contrario no podrás utilizar el Inicio de sesión con Facebook para integrarlo con los productos de Thrive Suite.

Todo lo que queda por hacer es establecer la conexión con tu página dentro de
Thrive Dashboard y API Connections.

Copiar las claves de la API de Facebook

Para crear la conexión deberás utilizar las dos claves API (ID de aplicación e ID secreto) que has copiado y utilizado previamente para crear la URL de redireccionamiento.

Si no los tienes apuntados en el bloc de notas puedes copiarlos nuevamente volviendo a la parte de "Configuración" de las opciones de la barra lateral y luego, al menú desplegable "Básico". Busca las claves en los campos "Identificador de la aplicación" y "Clave secreta de la aplicación".

Debes tener las claves API listas porque tendrás que pegarlas en tu sitio web, en el área de API Connections (Conexiones API), desde el Thrive Dashboard.

¿Quieres utilizar el login de Facebook en tu sitio web? Entra y en este tutorial completo y actualizado te contaré todo paso a paso...

Tweetealo a tus amigos

Integración de tu aplicación con Thrive Suite

Ahora para integrar la app de Facebook con Thrive Suite debes dirigirte al panel de administración de WordPress de tu sitio web y acceder al "Thrive Dashboard" como se ve en la siguiente captura.

Estando en el "Thrive Dashboard", desplázate hacia abajo hasta que encuentres la caja que dice "API Connections" (Conexiones API) y luego debes hacer clic en "Manage Connections" (Administrar conexiones).

Ahora tienes que agregar una nueva conexión seleccionando una aplicación en el menú desplegable. En nuestro caso, debes buscar la opción "Facebook".

Una vez que hayas seleccionado la opción "Facebook", debes pegar el "Identificador de la aplicación" y el "Clave secreta de la aplicación" en los campos que aparecerán.

Una vez tengas completados los dos campos, debes hacer clic en "Connect" (Conectar). Puede que se abra una ventana emergente indicando la información que utilizará esta aplicación, si es así debes hacer clic en continuar.

Si todo salió bien, verás una notificación dentro del panel de las API indicando que tu conexión con Facebook está lista para ser utilizada.

Eso es todo. ¡Enhorabuena! Ya puedes utilizar el inicio de sesión con Facebook dentro de Thrive Suite.

¿Te ha sido útil este artículo? Te espero en los comentarios...

¿Te gustaría ayudar a otras personas? Entonces lo tienes fácil, compártelo en las redes sociales.

También puedes echar un vistazo a los testimonios más inspiradores...

¿Necesitas más ayuda? Visita el foro donde hay una comunidad siempre lista para ayudar.

Suite Thrive

¿Quieres llegar muy alto? ¡Descarga gratis ahora mismo el curso de Thrive Architect! Y empieza a crear como los profesionales.

prosperar arquitecto
¿Quieres sentir la satisfacción de crear tu [email protected] la web de tus sueños?
Consulta los
Estas son mis
+ tutoriales en la
Matricúlate en los 
Un todo en uno
Más ayuda ...

Esto también te puede interesar...

Thrive Apprentice: Totalmente renovado para crear cursos online fuera de serie (Parte 3)

Thrive Apprentice: Totalmente renovado para crear cursos online fuera de serie (Parte 3)

Thrive Leads: Capta suscriptores rápidamente con este mega tutorial donde te lo cuento todo

Thrive Leads: Capta suscriptores rápidamente con este mega tutorial donde te lo cuento todo

Acerca del autor

He dedicado toda mi vida a la informática y soy un apasionado de las nuevas tecnologías además quiero compartir contigo todo lo que aprendí con WordPress.org - Thrive Architect - Thrive Suite y GeneratePress.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

¡Hosting WordPress Fuera de Serie!

kinsta wordpress

En Kinsta encontrarás expertos en WordPress disponibles 24/7 los 365 días del año con servidores de alta velocidad donde tu sitio web volará. ¿Recibes muchas visitas? Entonces Kinsta es lo que necesitas.