Te explico cómo agregar el botón de Chat de WhatsApp y Messenger en el blog de Blogger o WordPress, sin usar ningún plugin y lo mejor es que es fácil y rápido de aplicar.
¡Hola! soy Gabriela de peengler.com. Esta vez quiero enfocarme en la comunicación y la confianza entre tus visitantes, clientes, lectores o seguidores. Ya sabes que mantener una audiencia no es nada fácil. Es por eso que vengo a recomendarte en colocar WhatsApp y Facebook Messenger en tu sitio.
Sin más que decir, ¡Empecemos!
Clic en la imagen para ver el vídeo ↑ en YouTube
No sé si te pasa que llega un momento en donde quieres tener confianza con tu público, quieres que ellos confíen en lo que haces y que no pasen de largo sin darte una oportunidad.
Hace poco coloqué el botón de Messenger de Facebook en mi sitio y poco a poco empecé a recibir mensajes de personas, pidiendo ayuda, saludando, agradeciendo, dando consejos y hasta empezaron a seguirme en mis redes sociales.
Por supuesto que debe haber un buen trato, ser agradable y lo más importante ser tu mismo.
Estos son algunos de los beneficios de usar estas 2 mensajerías:
Para añadir el botón de chat de WhatsApp, primero vas a modificar el enlace del botón. Aquí te dejo uno de ejemplo:
https://api.whatsapp.com/send?phone=123456789
Lo que vas a modificar son los números que llevan el prefijo de tu país y el número de teléfono. Sino sabes cuál es el prefijo, te recomiendo que visites esta página y lo averigües -> Clic Aquí
En mi caso, que soy de Venezuela mi prefijo es 58 y mi número del teléfono es: 123456789 entonces el enlace quedaría así:
https://api.whatsapp.com/send?phone=58123456789
Ya con esto funcionaria el enlace de tu WhatsApp. Ahora faltaría mostrarlo en un botón flotante en tu sitio, para eso usaremos un poco de HTML y CSS.
Botón de WhatsApp en HTML
<div class="whatsapp">
<a href="ENLACE-DE-TU-WHATSAPP" target="_blank" title="Contactame por Whatsapp">
<img src="https://www.peengler.com/wp-content/uploads/whatsapp.png" alt="WhatsApp" />
</a>
</div>
Botón de WhatsApp en CSS
<style>
.whatsapp {
position: fixed;
right:25px; /*Margen derecho*/
bottom:20px; /*Margen abajo*/
z-index:999;
}
.whatsapp img {
width:60px; /*Alto del icono*/
height:60px; /*Ancho del icono*/
}
.whatsapp:hover{
opacity: 0.7 !important;
filter: alpha(opacity=70) !important;
}
</style>
Con el siguiente botón lo puedes asociar para la mensajería de tu cuenta personal de Facebook o de tu Fan Page. En primer lugar, debes modificar el enlace de chat de Messenger que es el siguiente:
https://m.me/TUSUARIO
Donde dice TUSUARIO, colocas el nombre del usuario de tu cuenta personal o de tu fan Page, cualquier duda mírate el vídeo tutorial. En mi caso, usare la de mi Fan Page y el nombre de usuario es: GabrielaPeengler. Por lo tanto, quedaría así mi enlace:
https://m.me/GabrielaPeengler
Ahora falta mostrarlo en un botón flotante en el blog. Aquí te dejo el código:
Botón de Facebook Messenger en HTML
<div class="facebook">
<a href="TU-ENLACE" target="_blank" title="Contactame por Messenger">
<img src="https://www.peengler.com/wp-content/uploads/messenger.png" alt="Messenger" />
</a>
</div>
Botón de Facebook Messenger en CSS
<style>
.facebook {
position: fixed;
right:25px; /*Margen derecho*/
bottom:20px; /*Margen abajo*/
z-index:999;
}
.facebook img {
width:60px; /*Alto del icono*/
height:60px; /*Ancho del icono*/
}
.facebook:hover{
opacity: 0.7 !important;
filter: alpha(opacity=70) !important;
}
</style>
Si has decidido en colocar las 2 mensajerías en tu sitio, aquí te dejo el código:
Botón de WhatsApp y Messenger en el Blog en HTML
<div class="whatsapp">
<a href="TU-ENLACE" target="_blank" title="Contactame por Whatsapp">
<img src="https://www.peengler.com/wp-content/uploads/whatsapp.png" alt="WhatsApp" />
</a>
</div>
<div class="facebook">
<a href="TU-ENLACE" target="_blank" title="Contactame por Messenger">
<img src="https://www.peengler.com/wp-content/uploads/messenger.png" alt="Messenger" />
</a>
</div>
Botón de WhatsApp y Messenger en CSS
<style>
.whatsapp, .facebook{
position: fixed;
z-index:999;
right:25px; /*Margen derecho*/
}
.whatsapp img, .facebook img{
width:60px; /*Alto del icono*/
height:60px; /*Ancho del icono*/
}
.whatsapp {
bottom:20px; /*Margen abajo*/}
.facebook {
bottom:95px; /*Margen abajo*/}
.whatsapp:hover, .facebook:hover{
opacity: 0.7 !important;
filter: alpha(opacity=70) !important;
}
</style>
Para usar el plugin de chat del Facebook, primero debes tener una Fan Page, cuando lo tengas creado, sigue estos pasos:
Cuando finalices, pegas el código antes del </body> o después del <body>
Ya no tienes excusa para conectar directamente con tus clientes, seguidores o visitantes. Gracias a WhatsApp y Messenger en el Blog puedes humanizar más tu sitio y también en ayudar a las personas con sus dudas y preguntas.
Recuerda que los botones son imágenes y por lo tanto lo puedes cambiar por las imágenes que tú quieras, te recomiendo que sean imágenes pequeñas, con extensión .png y con fondo transparente.
Si tienes alguna duda o pregunta, déjamelo en los comentarios.
Sígueme en Youtube🔥
Aprende a crear páginas web con HTML, CSS y Javascript.
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"