¿Cómo poner un botón de chat de WhatsApp en tu blog o web?
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>
¿Cómo agregar un botón de chat de Facebook Messenger en mi blog?
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>
¿Cómo poner el chat de WhatsApp y Messenger en el Blog?
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>
Integrar Facebook Messenger en el blog
Para usar el plugin de chat del Facebook, primero debes tener una Fan Page, cuando lo tengas creado, sigue estos pasos:
- Te vas a tu Fan Page.
- Configuración.
- Mensajería avanzada > Dominios de la lista de autorizados: coloca la URL de tu sitio.
- Mensajes > Añade Messenger a tu sitio web: Aquí empiezas a Configurar el plugin de chat.
Cuando finalices, pegas el código antes del </body> o después del <body>
0 Reviews:
Publicar un comentario