En esta ocasión en tutoriales en linea hablaremos de la manera de Integrar el botón de WhatsApp en tu sitio Web, Blogger y Wordpress. De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo.No obstante también cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos de la red, ya sean de un portal de vídeos, un blog, artículos, post, etc..
WhatsApp lanzó hace un par de años un esquema de URL personalizado. La funcionalidad básica es la de abrir un enlace mediante "whatsapp://” seguido de una serie de parámetros para abrir WhatsApp. Esta ultima ya ha sido reemplazado por la API de WhatsApp "api.whatsapp.com"
A continuación mostraremos algunos ejemplos para integrar el botón WhatsApp en tu sitio Web, Blogger y Wordpress.
Ejemplos para integrar botón WhatsApp
Enviar un texto simple:
<a href="https://api.whatsapp.com/send?text=Hola%20Mundo!%20Tutoriales%20En%20Linea">Tutoriales En Linea!</a>Enviar un enlace de un sitio Web:
<div class="boton"><a href="https://api.whatsapp.com/send?text=(Titulo del sitio Web)-(url de la Web)" data-action="share/whatsapp/share" target="_blank" >Compartir</a></div>Este ultimo ejemplo utilizaremos un CSS (siglas en inglés de Cascading Style Sheets) personalizado para nuestro sitio Web:
<style>
.boton {
height:45px;
width: 140px;
background-color: #64D448;
float:left;
margin:0px 5px;
}
.boton a {
text-transform: capitalize;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
line-height:45px;
color: #FFF;
text-decoration: none;
background-image: url(https://tutorialesenlinea.es/images/TL_whatsapp.webp);
background-repeat: no-repeat;
background-position: 5px 3px;
padding-left: 50px;
display: block;
}
.boton a:hover {
background-color: #48BA2C;
color: #FFF;
}
</style>En este ejemplo utilizamos el target="_blank", el cual indica al HTML que al hacer clic el vinculo o el hipervínculos se abrirá en una nueva pestaña. Sin embargo podemos utilizar el "onclick="window.open(this.href, this.target..." abre una nueva ventana o pestaña del navegador, dependiendo de la configuración de su navegador en forma de Pop-ups (Ventanas emergentes).
Enviar un enlace de un sitio Web con ventanas emergentes:
<div class="boton"><a href="https://api.whatsapp.com/send?text=Tutoriales En linea - https://tutorialesenlinea.es" data-action="share/whatsapp/share" onclick="window.open(this.href, this.target, 'width=700,height=660'); return false;" title="Compartir en WhatsApp">Compartir</a></div>Ademas podemos utilizar iconos vectoriales basados en fuentes tipográficas como es el caso de Font Awesome, este ultimo lo utilizamos en este sitio Web.Enviar un enlace de un sitio Web con iconos vectoriales:
<div class="social-sharing ntp-social-square">
<a href="https://api.whatsapp.com/send?text=Tutoriales En Linea - https://tutorialesenlinea.es" data-action="share/whatsapp/share" title="Compartir en WhatsApp" target="_blank">
<i class="fa fa-whatsapp"></i></a>
</div>Incluir WhatsApp en Blogger:
<div class="boton"><a data-action='share/whatsapp/share' expr:href='"api.whatsapp.com/send?text=" + dаta:post.title + "-" + dаta:post.url' title='Compartir en Whatsapp' alt='dаta:post.title'>Compartir</a></div>Incluir WhatsApp en WordPress:
<a href="https://api.whatsapp.com/send?text=<?php the_title(); ?> – <?php urlencode(the_permalink()); ?>" data-action="share/whatsapp/share" rel="nofollow" >Compartir en WhatsApp</a>Aparecerán dos pasos, los cuales hay que seguir.
- Primero, haz clic en la URL que se indica en el "Step1" (paso 1). Aquí se personaliza la apariencia del botón.
- Esta configuración consta de 3 pasos: Primero, selecciona el icono de Whatsapp e ingresa tu número de contacto o URL. Segundo, personaliza un mensaje (opcional), selecciona la posición del botón (derecha o izquierda). Finalmente, agrega un correo como información adicional y haz clic en "Get Button Code" para obtener el código.
- Copia el código anterior y pegalo en la sección "Step2". Guarda los cambios y actualiza Wordpress.
Conclusión
Sea cual sea el método que vallamos a utilizar para implementar el botón de WhatsApp en nuestro sitio Web, Blogger y Wordpress, podemos utilizar los anteriores métodos descrito en este Tutoriales en linea. A todos estos ejemplos habría que aplicarle estilos CSS personalizado para que salga correctamente y se visualice bien, pero la funcionalidad básica es usar el envío mediante el esquema de URL personalizada "api.whatsapp.com/”.
Comentarios