Como colocar iconos de WhatsApp con enlaces activos

En este tutorial vamos a aprender a colocar iconos de Whatsapp con enlaces activos para que nuestros visitantes puedan escribirnos directamente.

Este tutorial lo hago porque el otro día, una suscriptora de los cursos me escribió desde el formulario de soporte para preguntarme si conocía algún plugin sencillo para poder colocar iconos de teléfono y redes sociales en la página de contactar, junto con el formulario de contacto.

Si has leído alguno de mis otros artículos, sabes que no soy partidario de colocar los iconos de redes sociales muy a la vista. Desde mi punto de vista, es mejor hacerlo de manera discreta, por ejemplo, en el footer.

Pero sobre todo, no ponerlos en la página de contactar. En la página de contactar deberíamos tener el formulario de contacto. Y ya.

Y aunque tampoco soy muy partidario del teléfono (hoy estoy muy hater, lo se), entiendo que en algunas ocasiones puede ser muy interesante colocar un teléfono en la sección de contactar para que la gente que llega desde móvil nos pueda llamar. Y como cada vez es más la gente que llega desde el móvil (en algunas páginas roza el 80%), vamos a aprender a colocar estos iconos.

Como colocar iconos de WhatsApp y teléfono

Realmente, los plugins que usamos para colocar iconos de redes sociales no son más que imágenes de esos iconos con enlaces a las redes. Así pues, para los iconos de WhatsApp y teléfono haremos lo mismo. Lo único diferente es que los enlaces serán un tanto diferentes. Vamos a ello.

El primer paso es descargar los iconos que más nos gusten. Yo utilizo la web Icon-Icons para ello. Son iconos gratuitos y en muchos casos, libres de derechos. Así pues, buscamos los iconos que queremos utilizar y los descargamos en formato PNG (transparente). Además, esta web os permite elegir el tamaño. Con 96 px es suficiente.

El siguiente paso será ir a la página donde queremos colocar los iconos y subirlos como si de una imagen se tratara (bueno, es que es una imagen). En las opciones de visualización de la imagen añadimos lo siguiente:

• Alineación: ninguna.
• Enlazado a: URL personalizada.
  • En caso del teléfono colocaremos: tel:0034555555555
  • En caso de WhatsApp: https://api.whatsapp.com/send?phone=34555555555
• Tamaño: completo.

Por supuesto, donde pone 55555555, debéis colocar vuestro número de teléfono 😉 El 34 es el prefijo internacional de España. En caso de ser de otro país, coloca el tuyo 🙂

Cambiando el tamaño de la imagen

Si hacéis click en vista previa veréis que el tamaño es muy grande. Para eso, vamos a decirle a WordPress que lo muestre en un tamaño inferior.

Normalmente, editaremos las páginas en modo visual. Pues bien, para cambiar el tamaño, haremos click en la pestaña de HTML.

Finalmente, en la parte de HTML buscaremos la URL de las imágenes y donde pone «width» y «height» cambiaremos el 128 por 48.

Así pues, ya tenemos iconos de teléfono y WhatsApp configurados para que cuando los usen desde teléfono, puedan llamarnos o escribirnos al WhatsApp. En caso que queramos colocar un icono de eMail haremos lo mismo, pero en el enlace colocaremos maito:aqui-tu-email. Así de sencillo, así de fácil.

Te dejo un ejemplo de como quedarían los iconos. Por supuesto, los teléfonos que he puesto están inventados, así que no se muy bien a quien llamarías 😀

Ya has visto que colocar estos iconos es muy sencillo. Y encima nos hemos ahorrado instalar un par de plugins. Te recuerdo que si quieres aprender más sobre WordPress y como crear formularios de contacto, en Web de Nutris tienes un Curso de WordPress Básico y un curso de Ninja Forms (el plugin de formularios que utilizamos en todos los proyectos).