Añadir un botón de WhatsApp en Blogger permite que tus lectores abran una conversación contigo desde tu blog. Puede servir para recibir consultas, atender solicitudes de información o facilitar el contacto con un negocio.
En este tutorial aprenderás a crear el enlace, añadir un mensaje preparado y colocar un botón mediante un gadget HTML/JavaScript. El ejemplo utiliza HTML y CSS, sin instalar plugins ni modificar el código completo de la plantilla.
1. Prepara tu enlace de WhatsApp
La estructura del enlace es:
https://wa.me/TUNUMEROSustituye TUNUMERO por el teléfono asociado a tu cuenta de WhatsApp, con su código de país y en formato internacional.
Escribe únicamente los dígitos: no incluyas el signo +, espacios, paréntesis ni guiones. Tampoco añadas prefijos de marcación como 00.
El número debe tener una cuenta de WhatsApp activa. Antes de continuar, abre el enlace y comprueba que dirige al contacto correcto.
2. Añade un mensaje personalizado
Puedes preparar un texto para que aparezca escrito cuando el visitante abra la conversación:
https://wa.me/TUNUMERO?text=Hola%2C%20vengo%20de%20tu%20blogEl mensaje de este ejemplo es:
Hola, vengo de tu blog
Los caracteres %20 representan espacios y %2C representa una coma. Si utilizas otro mensaje, debes codificarlo para incluirlo correctamente en una URL.
El mensaje no se envía automáticamente: el visitante puede editarlo y decide si pulsa Enviar. Este enlace tampoco configura una respuesta automática de tu negocio.
3. Copia el código del botón
Este ejemplo crea un botón verde con el texto “Escríbeme por WhatsApp”:
<a
href="https://wa.me/TUNUMERO?text=Hola%2C%20vengo%20de%20tu%20blog"
target="_blank"
rel="noopener noreferrer"
style="
display:inline-block;
padding:12px 20px;
background:#166534;
color:#ffffff;
border-radius:8px;
font-family:Arial,sans-serif;
font-size:16px;
font-weight:700;
line-height:1.4;
text-align:center;
text-decoration:none;
max-width:100%;
box-sizing:border-box;
"
>
Escríbeme por WhatsApp
</a>Antes de guardarlo:
- Reemplaza
TUNUMEROpor tu teléfono internacional. - Cambia el mensaje del enlace si lo necesitas.
- Ajusta el texto visible del botón, por ejemplo, a “Consultar por WhatsApp”.
Este es un diseño de ejemplo con texto, no un recurso gráfico oficial de WhatsApp.
4. Coloca el botón en Blogger
Para añadirlo desde el diseño del blog:
- Entra en Blogger.
- Selecciona el blog que quieres modificar.
- Abre Diseño.
- En la barra lateral o el pie de página, pulsa Añadir un gadget.
- Selecciona HTML/JavaScript.
- Escribe un título opcional, como “Contacto”.
- Pega el código en el campo Contenido.
- Guarda el gadget y después los cambios del diseño.
Abre el blog publicado para comprobar el resultado. La posición del botón dependerá del área donde hayas colocado el gadget.
5. ¿Cómo hacer que el botón sea flotante?
Un botón flotante permanece visible mientras el lector se desplaza por la página.
Para conseguirlo, utiliza el mismo código y añade estas propiedades dentro del atributo style, antes de las que ya contiene:
position:fixed;
right:16px;
bottom:90px;
z-index:1000;
max-width:calc(100vw - 32px);No crees otro gadget si deseas sustituir el botón anterior: edita el que ya añadiste.
La propiedad bottom:90px lo separa del borde inferior. Puedes aumentar ese valor si coincide con otro elemento, como un aviso de cookies o una barra de navegación.
Comprueba su posición en el blog publicado. Algunas plantillas y anuncios pueden ocupar esa misma zona; ningún valor de posición funciona igual para todos los diseños.
6. Comprueba el botón desde el celular y la computadora
Haz esta revisión antes de darlo por terminado:
- Pulsa el botón desde el blog publicado.
- Confirma que abre el contacto correcto.
- Comprueba que aparece el mensaje preparado.
- Revisa que el texto del botón se lea con claridad.
- Si es flotante, verifica que no tape enlaces, anuncios o controles.
El enlace puede utilizarse en teléfonos y en WhatsApp Web. La pantalla que aparezca dependerá del dispositivo y de cómo tenga configurado WhatsApp el visitante.
Probar ambos dispositivos también ayuda a detectar problemas de la versión móvil de tu plantilla.
Errores frecuentes y cómo revisarlos
El enlace indica que el número no está disponible
Comprueba el código de país, los dígitos y que la cuenta esté activa. Asegúrate también de haber sustituido TUNUMERO en el código.
El mensaje aparece cortado o con caracteres incorrectos
Revisa la codificación del texto. Un símbolo & sin codificar, por ejemplo, puede interpretarse como el inicio de otro parámetro del enlace.
Prueba primero con el mensaje sencillo de este tutorial y luego introduce los cambios.
Se muestra el código en lugar del botón
Comprueba dónde lo pegaste. Para instalarlo como elemento del blog, debe estar en Contenido de un gadget HTML/JavaScript.
Si escribes un tutorial, en cambio, el código debe mostrarse como texto para que el lector pueda copiarlo.
El botón aparece en computadora, pero no en celular
Revisa la configuración móvil del tema. Algunas plantillas de Blogger utilizan una presentación diferente y no muestran los mismos gadgets.
El botón flotante tapa otro elemento
Aumenta el valor de bottom o utiliza el botón normal dentro de la barra lateral o del pie. La prioridad es que los lectores puedan navegar sin obstáculos.
Preguntas frecuentes
¿Necesito WhatsApp Business?
Para crear el enlace necesitas una cuenta activa de WhatsApp. La función de abrir una conversación no exige utilizar una respuesta automática ni un sistema de atención.
¿Necesito instalar JavaScript?
El botón de este tutorial utiliza HTML y CSS. Aunque el gadget se llama HTML/JavaScript, no contiene scripts.
¿Puedo poner el botón en una página de contacto?
Sí. Puedes insertar el enlace o el botón en esa página utilizando su editor HTML. Después comprueba el resultado publicado.
¿El botón responde por mí?
No. Abre una conversación con el mensaje preparado. Las respuestas automáticas requieren una configuración o herramienta diferente.
¿Poner WhatsApp mejora el posicionamiento en Google?
Este botón facilita el contacto. No debe considerarse una garantía de mejor posicionamiento ni de más ventas.
No hay comentarios.:
Publicar un comentario