Home » WordPress » Cómo añadir el chat de Facebook Messenger a un sitio web WordPress

Cómo añadir el chat de Facebook Messenger a un sitio web WordPress

Si hace un par de años buscabas la forma de integrar una aplicación de chat en directo en tu sitio web, lo más probable es que tuvieras que instalar un plugin grande y complicado o incluso una aplicación dedicada que te supusiera un quebradero de cabeza.

Ahora existe una alternativa inteligente a las aplicaciones de chat en directo: puedes integrar Facebook Messenger en tu sitio de WordPress. ¡Y puedes hacerlo tú mismo en menos de 5 minutos!

Sin embargo, hay un requisito. Para tener un chat de Facebook Messenger en tu sitio web, necesitas tener algún tipo de página de Facebook. ¿Por qué? Porque el uso más común de un chat en el sitio web es hacer que los clientes se comuniquen con su negocio más fácilmente. Así que probablemente ya tienes una página de Facebook para tu negocio de todos modos.

Cómo integrar el chat de Messenger en un sitio WordPress

Primer paso – preparar tu sitio web WordPress

Lo primero que necesitas si quieres añadir el chat de Messenger a tu sitio, es ir a Apariencia >> Editor de temas, y abrir el archivo de funciones del tema – functions.php. Aquí tienes un ejemplo de lo que verás (puede variar dependiendo del tema de WordPress que utilices):

How to add Facebook Messenger chat to WordPress website

Desplácese hasta la parte inferior del archivo, y añadir este código al final del archivo:

function fb_chat_code() {

}
add_action('wp_body_open', 'fb_chat_code');

A continuación, haz clic en Actualizar archivo para que se vea así:

how to add facebook chat to wordpress website

Segundo paso – generar el código del chat de Messenger en Facebook

Ve al sitio web de Facebook y abre tu página de Facebook, aquella a la que quieras asociar tu sitio web. Si estás configurado como administrador de la página, verás un menú de administración a la izquierda. Pulsa Configuración.

how to integrate facebook messenger to wordpress website

Best WordPress hosting 2024

Siguiente paso: selecciona Mensajería a la izquierda y ve a la sección Añadir Messenger a tu sitio web. Haz clic en Empezar.

add messenger in wordpress

Ahora verás un asistente que te guiará a través de la configuración del chat de Messenger. Podrás elegir el idioma de Messenger, cambiar el mensaje de saludo, permitir o no el chat de invitados. Cuando hayas terminado, haz clic en Siguiente.

messenger live chat in wordpress

Siguiente paso – puede cambiar el color predeterminado de la ventana de Messenger para que se ajuste a la combinación de colores de su sitio web. Si lo necesitas, haz el cambio y pulsa Siguiente.

wordpress facebook messenger

Una vez hecho esto, introduce la dirección URL de tu sitio web (incluyendo http… ) en la parte superior izquierda de la ventana. Esto permitirá el uso de Messenger sólo en su sitio web especificado, por lo que nadie podría copiar y utilizar el mismo código en otros sitios. Pulsa Guardar.

facebook messenger code for wordpress

Último paso: haz clic en la ventana de fragmentos de código de la derecha y copia el código de Messenger. Tendrás que añadirlo a tu sitio web WordPress. A continuación, pulsa Finalizar.

integrate facebook messenger to wordpress

Tercer y último paso: añade el código del chat de Messenger a WordPress

Ahora tendrás que volver a tu sitio web WordPress. Haz clic en Apariencia >> Editor de temas, y abre de nuevo el archivo functions.php. Desplácese hasta la parte inferior del archivo donde previamente añadió una función, y haga este cambio:

function fb_chat_code() {
    echo " PUT MESSENGER CODE BETWEEN THESE DOUBLEQUOTES ";
}
add_action('wp_body_open', 'fb_chat_code');

Ya que usamos comillas dobles en nuestra función («), y el código de Messenger también usa comillas dobles, necesitamos agregar una barra invertida ( ) entre cada comilla doble en el código de Messenger (6 lugares).

Así es como debería verse el código final (las 6 barras invertidas están marcadas en verde en el ejemplo):

add facebook messenger live chat to wordpress website

Después de pegar el código de Messenger y añadir las barras invertidas pulsa el botón Actualizar Archivo. si todo está bien, verás un mensaje de éxito:

wordpress messenger chat

Resultado final

Si todos los pasos se han completado con éxito, el chat de Messenger aparecerá en todas y cada una de las páginas de tu sitio web WordPress. Aquí está el ejemplo de cómo se vería en este sitio web:

messenger chat in wordpress website
Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK