Integrar el boton de Whatsapp en tu Web
![]()
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. 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, los medios editoriales, etc.. WhatsApp lanzó 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.
Ejemplos para integrar botón WhatsApp
Enviar un texto simple:
<a href="whatsapp://send?text=Hello%20World!">Tutoriales En Linea!</a>
Enviar un enlace de un contenido web:
<a href="whatsapp://send?text=Tutoriales En Linea!"</a><div class="boton"><a href="whatsapp://send?text=(titulo-de-tu-website)-(url -de-tu-website)" data-action="share/whatsapp/share" >Compartir</a></div>
Incluir Whatsapp en blogger
<div class="boton"><a data-action='share/whatsapp/share' expr:href='"whatsapp://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="whatsapp://send?text=<?php the_title(); ?> – <?php urlencode(the_permalink()); ?>" data-action="share/whatsapp/share" rel="nofollow" >Compartir en WhatsApp</a>
Estilo CSS para el boton
<style type="text/css">
.boton {
height: 25px;
width: 100px;
background-color: #64D448;
float:left;
margin:0px 5px;
}
.boton a {
text-transform: capitalize;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
line-height: 25px;
color: #FFF;
text-decoration: none;
background-image: url(https://tutorialesenlinea.es/images/whatsapp.png);
background-repeat: no-repeat;
background-position: 5px 3px;
padding-left: 30px;
display: block;
}
.boton a:hover {
background-color: #48BA2C;
color: #FFF;
}
</style>A todos estos ejemplos habría que aplicarle estilos CSS para que salga correctamente y se vea bien el botón, pero la funcionalidad básica es usar el envío mediante el esquema de URL personalizada "whatsapp://”.
Referencias de la documentación oficial de WhatsApp
- Integrar botón de WhatsApp en IOS: www.whatsapp.com...
- Integrar botón de WhatsApp en Android:www.whatsapp.com...
Otros métodos para integrar Whatsapp en WordPress:
La mejor manera, o al menos la más rápida, para integrar Whatsapp en WordPress es usando un plugin, el mejor que he visto hasta el momento es Mobile ShareBar (Este complemento se ha cerrado y ya no está disponible para descargar).
La curiosidad es que si se accedes desde un navegador en un ordenador el botón de WhatsApp desencadena un comportamiento para enviar por email, ya que en el ordenador no tenemos el WhatsApp instalado. Cuando se ve la web desde el navegador de un dispositivo móvil con WhatsApp, es cuando funciona y se abre nuestro WhatsApp para seleccionar el contacto o grupo al que queremos enviar el contenido....
Tutoriales en linea
Como registrar una marca o nombre comercial
- Autor: Tutoriales En Linea
- Editor:
Tutoriales En Linea
![Tutoriales En Linea]()
- Fecha:2020-02-182020-02-18
- Categorias: WebSite Trucos y tips Noticias Tutorial
Como poner reCAPTCHA en HTML
- Autor: Tutoriales En Linea
- Editor:
Tutoriales En Linea
![Tutoriales En Linea]()
- Fecha:2020-02-182020-02-18
- Categorias: Google Diseño Web WebSite Noticias Tutorial
Como crear un Sitemap online
- Autor: administrador
- Editor:
Tutoriales En Linea
![Tutoriales En Linea]()
- Fecha:2020-02-162020-02-16
- Categorias: RSS XML WebSite webmasters Marketing SEO Herramientas Noticias Tutorial
Curso de CSS avanzado
- Autor: Tutoriales En Linea
- Editor:
Tutoriales En Linea
![Tutoriales En Linea]()
- Fecha:2020-01-182020-01-18
- Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial
Curso de Introducción a CSS
- Autor: Tutoriales En Linea
- Editor:
Tutoriales En Linea
![Tutoriales En Linea]()
- Fecha:2020-01-182020-01-18
- Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial
Curso básico de Javascript
- Autor: Tutoriales En Linea
- Editor:
Tutoriales En Linea
![Tutoriales En Linea]()
- Fecha:2020-01-172020-01-17
- Categorias: Diseño Web javascript Cursos Noticias Tutorial
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!