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/Colocar Aquí Tú Teléfono" 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/Colocar aquí tu usuario de Facebook Messenger" 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! 

25 comentarios:

  1. Excelente lo instalo y anduvo perfecto. Tendras el codigo pero solo de whatsapp flotante? Sin el boton de Messenger. Gracias

    ResponderBorrar
    Respuestas
    1. Hola, genial que te haya servido, ubica la línea de codigo que comienza así "<...me/ecuapromo" y termina "ger%2Bicono.png...a>" y la borras así ya no tendrás messenger.

      Borrar
  2. GENIO!!!!!!!! Lo busque como loca. Muchas Gracias
    Un aporte genial. Gracias!

    ResponderBorrar
  3. Gracias ECUApromo! sos grande papá por conpartir... justo lo que busque, me salvaste, abrazos!

    ResponderBorrar
  4. Excelente, funciono perfecto, excelente sitio web

    ResponderBorrar
    Respuestas
    1. Genial que te funcionó si puedes darle clic a los banners publicitarios del sitio te agradecería mucho y me ayudar a mantener vivo el sitio. :)

      Borrar
  5. Hola, si deseo colocarlo del lado derecho, como lo modifico? Gracias por el tuto! Muy bueno!

    ResponderBorrar
    Respuestas
    1. Genial que te haya gustado solo cambia esto "ed;
      right: 8px;" por "ed;
      left: 8px" si te sirvió apóyame dando clic en los banner publicitarios.

      Borrar
  6. Hola! Buenos días!

    Lo acabo de hacer y fuciona de diez... el problema es que en la pantalla del celu queda muy pequeño... cómo podría hacer para que se vea bien también allí?

    Gracias!

    ResponderBorrar
    Respuestas
    1. Hola Fede que bueno que te funciono, puede probar cambiando la ubicación en estos números o usando otros iconos: right: 8px;
      top: 75%;
      Regalame clics en los banners publicitarios si te sirvió el articulo.

      Borrar
  7. Muy agradecido. borré lo de messenger para no recargar la web. mucho èxito

    ResponderBorrar
  8. buen dia me podrias pasar solo el html del whatssap solamente a este mail javifaca2@yahoo.com.ar te lo agradeceria

    ResponderBorrar
    Respuestas
    1. Hola solo necesitas borrar esta linea <a href="https://m.m........./a>

      Borrar
  9. HOLA COMO ESTAS ? LA VERDAD ES UNA MARAVILLA QUE HAYAS HECHO ESTE CODIGO Y PUBLICARLO. LO PROBE Y ANDA BIEN. EL TEMA ES EL SIGUIENTE Y POR ESO ME CONTACTO. TENGO MI WEB HECHA CON GOOGLE SITES Y CUANDO INSERTO EL CODIGO EN EL UNICO LUGAR QUE ME DEJA GOOGLE SITES, ME APARECEN LOS ICONOS PERO NO FLOTANTES. ME APARECEN COMO BOTONES QUE RESALTAN CUANDO LE PASAS EL PUNTERO POR ARRIBA PERO NADA MAS. ME GUSTARIA SABER SI ES ALGO QUE ESTOY HACIENDO MAL O ES DE GOOGLE SITES QUE NO ME PERMITE PONERLO EN EL LUGAR INDICADO.? TE COMENTO TAMBIEN QUE NO SE NADA DE ESTO Y LO QUE HAGO , LO HAGO VIENDO VIDEOS, TUTORIALES Y DEMAS. SALUDOS Y GRACIAS.

    ResponderBorrar
    Respuestas
    1. Hola buen día, me parece que lo que te está pasando es cuestión de Google Sites, quizás en ese sistema las plantillas están divididas. ¿No sabes si tienes acceso a la diagramación general del sitio para poder meter el código ahí? Dame la URL y la reviso. Genial que te estés auto capacitando, es una excelente manera de seguir en la formación.

      Borrar
  10. HOLA QUE TAL !!! GRACIAS POR RESPONDER. YO CREO TAMBIEN QUE ES TEMA DE GOOGLE SITES. NO TENGO ACCESO AL CODIGO PERO PUEDO PONER CODIGO EN UNA OPCION LLA MADA INSERTAR. OTRA COSA NO SE PUEDE HACE. TE DEJO LA URL https://sites.google.com/view/juegosdesalonvcp/inicio
    Y SI ME ENCANTA IR APRENDIENDO POR ESTOS MEDIOS, SON MUY UTILES. SALUDOS

    ResponderBorrar
    Respuestas
    1. Hola, revise tu sitio web está muy profesional, te felicito. Creo que si puede ser una cuestión de configuración en Google Sites.

      Borrar
  11. HOLA !!!! NUEVAMENTE MUCHAS GRACIAS POR RESPONDER !!! Y GRACIAS POR TU OPINION SOBRE EL SITIO. TE AGRADEZCO MUCHO Y CREO QUE TAMBIEN ES UN TEMA DE GOOGCLE SITES. POR LO PRONTO ME MANEJO CON LOS BOTONES. MUY BUENO LO QUE HACES !!!! SALUDOS !!!

    ResponderBorrar

Déjame tu comentario o consulta.