Facebook Messenger en Tu Página Web - AcademiaAds

Cómo Agregar Facebook Messenger en Tu Página Web2 min read

In Artículo by Armando J. Perez-Carreño14 Comments

Hemos estado esperando desde hace mucho la opción de integrar Facebook Messenger en nuestra página web. YA es posible si sigues estos pasos…

Customer Chat Plugin

Ya hemos hablado del Page Plugin anteriormente y de seguro lo has visto alrededor del Internet en varios sitios web. Básicamente es el recuadro que ves con cuantos “me gusta” tiene la página y generalmente está acompañado de las últimas noticias de la biografía de dicha página de Facebook.

Pero ahora, tenemos la opción de agregar una “Burbuja” flotando sobre tu sitio web donde estará el Messenger completo para que tus visitantes puedan platicar con tu página de Facebook en tiempo real (¡sin salir de tu página!).

En este video te explico paso por paso cómo hacerlo para sitios como Wix y WordPress con Google Tag Manager:

Código HTML para Tag Manager

NOTA: SÓLO USA ESTO SI VES EL VIDEO COMPLETO, NO ES UN REEMPLAZO PARA EL CÓDIGO DE FACEBOOK.

Agrega esto en Google Tag Manager si quieres seguir esas instrucciones del video:

<script>
(function() {
// Sólo usar esto en Google Tag Manager
// Modifica el identificador de tu página
var page_id = '860500320666868';
var ref = '';
var theme_color = '';
var logged_in_greeting = 'Hola! ¿En qué te puedo apoyar hoy?';
var logged_out_greeting = 'Hola! ¿En qué te puedo apoyar hoy?';

// No toques este código que sigue
var el = document.createElement('div');
el.className = 'fb-customerchat';
el.setAttribute('page_id', page_id);
if (ref.length) { el.setAttribute('ref', ref); }
el.setAttribute('theme_color', theme_color);
el.setAttribute('logged_in_greeting', logged_in_greeting);
el.setAttribute('logged_out_greeting', logged_out_greeting);
document.body.appendChild(el);
})();
</script>

¿Ya estás usando el plugin? ¿Que te parece la nueva funcionalidad?

Publicado originalmente en Dic. 15, 2015 – actualizado para mostrar la nueva versión del Plugin.

Comments

  1. Williams Heredia

    gracias por la explicacion, esta bien sencillo, ya funciona en mi pagina que diseñe con mas ayudas de tutoriales en dreamweaver

  2. Ricardo Espinosa

    Hole he seguido todos los pasos y no me sale nada. Le doy vista previa y refresco mi página estando logeado y me aparece que esta instalada la etiqueta ¿Por que no me aparece la ventana del chat en la página en vivo? Me puedes orientar? Mi página esta hecha en WordPress, Gracias!!

    1. Author
      Armando J. Perez-Carreño

      Hola Ricardo! Si ya te aparece que la etiqueta se está cargando en la vista previa, entonces al menos esa parte la hiciste correctamente (dar de alta el Tag Manager y cargar la etiqueta en el lugar correcto). Ahora hay que revisar tres cosas:
      1. Asegura que hayas usado un “trigger” de DOM Ready
      2. Asegura que hayas cambiado el código que incluí para reflejar el número del identificador de tu página de Facebook
      3. Asegura que en tu página de Facebook, en la configuración del Messenger hayas incluido tu dominio web para permitir cargar el plugin ahí.

      Fuera de eso, si todo está correcto, publica los cambios en Tag Manager y espera 24 horas. Hemos visto estos últimos días que el plugin de Messenger en algunas páginas toma a veces minutos u horas en cargarse por primera vez. En esos casos, hemos visto que simplemente dejar algo de tiempo pasar hace que ya se habilite y de ahí en delante cargue correctamente.

      Saludos!

    1. Author
      Armando J. Perez-Carreño

      Hola Raul! Te recomiendo ver el video actualizado en esta misma página donde te explico cómo hacerlo. Saludos!

  3. Bethel

    Hola Armando.

    Vi en una web, que aparece el icono de messenger y al hacer clic se despliega la ventanita como la instalaste tu, cómo podría hacer eso? es mucho más llamativo.

    Saludos.

    1. Author
      Armando J. Perez-Carreño

      Hola Bethel!
      Hasta hoy te pude contestar porque había una prueba cerrada de Facebook para esta funcionalidad que mencionas y ayer ya hicieron la información pública.
      Existe (en la nueva versión del Messenger) una opción para poner un plugin de “Chat” en tu página web de manera que las personas puedan platicar con tu Página de Facebook directamente en una ventana flotante sin salir del sitio.

      Acabo de escribir un artículo con la noticia, lo puedes leer aquí: Nuevo Live Chat de Messenger

    1. Author
      Armando J. Perez-Carreño

      Hola Daniel!
      En muchas ocasiones la razón por la cual sólo aparece el text del enlace es que no se alcanzó a cargar el SDK de Facebook. ¿Agregaste el primer código que te aparece en la sección del SDK justo después de iniciar el de tu página?

    1. Author
      Armando J. Perez-Carreño

      Hola Charlie,
      ¿En qué plataforma estás intentando instalarlo? (Por ejemplo: WordPress, Wix, Squarespace, etc.)

Deja un comentario