jueves, 23 de mayo de 2019

Como colocar los iconos flotantes de Whatsapp y Facebook Messenger en tu web [html]

Como colocar los iconos flotantes de Whatsapp y Facebook Messenger en tu web [html]


Queridos lectores sabemos lo importante que es brindarles a nuestros visitantes web la posibilidad de contactarnos de manera rápida a través del uso de mensajería instantánea como Whatsapp y Facebook Messenger.

Pues bien, actualmente me encuentro desarrollando un sitio web para una empresa que necesitaba colocar los iconos flotantes de WhatsApp y Facebook Messenger, quiere decir que siempre estarán visibles.

Estos iconos tienen un hipervinculo, lo cual hace que al momento de darle clic te lleva como destino a abrir un chat en Whatsapp o a un mensaje en Facebook Messenger.

Estos son los iconos que usaremos:

 

Para incorporar esta opción en tu sitio web debes copiar el siguiente código:



<style type="text/css">.redes-flotantes {
position: fixed;
right: 8px;
top: 75%;
z-index: 20;
}
.redes-flotantes img {
float: right; clear: right;
 margin: 5px;
-moz-transform: scale(.8) ;
-webkit-transform: scale(.8) ;
-o-transform: scale(.8) ;
-ms-transform: scale(.8) ;
transform: scale(.8) ;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.redes-flotantes img:hover {
-moz-transform: scale(1.1) rotate(6deg);
-webkit-transform: scale(1.1) rotate(6deg);
-o-transform: scale(1.1) rotate(6deg);
-ms-transform: scale(1.1) rotate(6deg);
transform: scale(1.1) rotate(6deg);
}</style>
<div class='redes-flotantes'>


<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://wa.me/593999330127" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" data-original-height="59" data-original-width="59" src="https://1.bp.blogspot.com/-q3Dot9N2qac/XOQgr9etVpI/AAAAAAABT1M/6V4Bqaqr-6UQcl9Fy2_CaVgex0N_OYuQgCLcBGAs/s1600/whatsapp%2Bicono.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://m.me/ecuapromo" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" data-original-height="59" data-original-width="59" src="https://3.bp.blogspot.com/-SK4W7Kmjoh8/XOQj5wjwERI/AAAAAAABT1g/2i3wxgGTwdU8v67F1rMOAe3ooWu9f2fEACLcBGAs/s1600/facebook%2Bmessenger%2Bicono.png" /></a></div></div>




Hecho esto deberás pegar el código dentro del body de tu sitio web, si estas trabajando en Wordpress lo colocas dentro de un Widget de HTML, si estas trabajando en Blogger lo pegas dentro de un Gadget de HTML.

Ahora procedemos a personalizar el código y hacia donde enviar los mensajes.


  • Para personalizar el envió de Whastapp, ubica la parte de código que he marcado en verde y reemplaza el número de teléfono que aparece después de http://wa.me/   por aquel al que deseas enviar el mensaje, recuerda que debes incluir el código de área tal cual registrar en Whatsapp.
  • Para personalizar le envió de Facebook Messenger, ubica la parte de código que está marcada con celeste https://m.me/  y reemplaza lo que esta después del / con la identificación de tu Fanpage, esto lo obtienes fácilmente cuando navegas en Facebook, abres la Fanpage y es el nombre en la url  que aparece luego de www.facebook.com/.
  • Si deseas personalizar la altura donde aparecen los iconos o su separación con el bordo derecho cambia los números marcados en amarillo, el uno está en pixeles y el otro en porcentaje.
  • Finalmente para cambiar los iconos, debes reemplazar la parte del código marcado en rosado que corresponden a la URL de las 2 imágenes.
De esta forma siempre tendrás visibles los iconos de Facebook Messenger y Whatsapp en tu pagina web y podrás dirigir a tu publico a un chat inmediato.





¡Nos vemos pronto! 

No hay comentarios.:

Publicar un comentario

Déjame tu comentario o consulta.