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://ecuapromo.net/landing/wp-content/uploads/2023/06/whatsapp-icono.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://ecuapromo.net/landing/wp-content/uploads/2023/06/facebook-messenger-icono.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!
Excelente lo instalo y anduvo perfecto. Tendras el codigo pero solo de whatsapp flotante? Sin el boton de Messenger. Gracias
ResponderBorrarHola, 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.
Borrarquita en el codigo el de messenger y listo
BorrarGracias!
ResponderBorrarGENIO!!!!!!!! Lo busque como loca. Muchas Gracias
ResponderBorrarUn aporte genial. Gracias!
Genial que te haya servido. :)
BorrarMuy bien
ResponderBorrarGracias ECUApromo! sos grande papá por conpartir... justo lo que busque, me salvaste, abrazos!
ResponderBorrarGracias, genial que te haya servido.
BorrarMil gracias Dios le pague
ResponderBorrarQue bueno que te haya servido. Amén.
BorrarExcelente, funciono perfecto, excelente sitio web
ResponderBorrarGenial 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. :)
BorrarHola, si deseo colocarlo del lado derecho, como lo modifico? Gracias por el tuto! Muy bueno!
ResponderBorrarGenial que te haya gustado solo cambia esto "ed;
Borrarright: 8px;" por "ed;
left: 8px" si te sirvió apóyame dando clic en los banner publicitarios.
Hola! Buenos días!
ResponderBorrarLo 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!
Hola Fede que bueno que te funciono, puede probar cambiando la ubicación en estos números o usando otros iconos: right: 8px;
Borrartop: 75%;
Regalame clics en los banners publicitarios si te sirvió el articulo.
Muy agradecido. borré lo de messenger para no recargar la web. mucho èxito
ResponderBorrarHola! No entendí que es lo que no recarga.
Borrarbuen dia me podrias pasar solo el html del whatssap solamente a este mail javifaca2@yahoo.com.ar te lo agradeceria
ResponderBorrarHola solo necesitas borrar esta linea <a href="https://m.m........./a>
BorrarHOLA 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.
ResponderBorrarHola 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.
BorrarHOLA 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
ResponderBorrarY SI ME ENCANTA IR APRENDIENDO POR ESTOS MEDIOS, SON MUY UTILES. SALUDOS
Hola, revise tu sitio web está muy profesional, te felicito. Creo que si puede ser una cuestión de configuración en Google Sites.
BorrarHOLA !!!! 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 !!!
ResponderBorrarbien con el redes sociales gracias me funciono extelenbte mi foro yo mismo e creado por fin me salio extelente lo malo es queria cambiar unas imaganes diferente sobre los messeguen y whtsApp no me dejo hacerlo no se por que sera pero iguasl si funciona saludos desde peru y lima provincia barranca suerte con todos amigos
ResponderBorrarMUY BIEN, ME FUNCIONÓ A LA PERFECCIÓN.GRACIAS POR COMPARTIR TUS CONOCIMIENTOS!
ResponderBorrarGenial que te haya servido, si me puedes regalar unos clics en los banners publicitarios para mantener vivo el blog te lo agradeceria.
BorrarGenial que te haya servido, si me puedes regalar unos clics en los banners publicitarios para mantener vivo el blog te lo agradeceria.
Borraramigo esta genial y si quiciera agregar instagram como seria???
ResponderBorrar