Inicia sesión


Como integrar el botón de WhatsApp en tu Web

Como integrar el botón de WhatsApp en tu WebEn 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.png);
background-repeat: no-repeat;
background-position: 5px 3px;
padding-left: 50px;
display: block;
}
.boton a:hover {
background-color: #48BA2C;
    color: #FFF;
}
</style>
Ver Resultado

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>
Ver Resultado

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>
Ver Resultado

Incluir WhatsApp en Blogger:
<div class="boton"><a data-action='share/whatsapp/share' expr:href='&quot;api.whatsapp.com/send?text=&quot; + dаta:post.title + &quot;-&quot; + 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>
Ademas de la implementación anterior podemos utilizar un plugin y creo que e la mejor manera, o al menos la más rápida, para integrar Whatsapp en WordPress. Para ello vamos en la barra lateral, selecciona "Plugins" y luego damos clic en la opción "Añadir Nuevo". Buscamos el plugin "WhatsHelp Chat Button" o buscamos algo relacionado con WhatsApp. Instala y activa. En la barra lateral debe aparecer una opción "WhatsHelp". Hacer clic en esta opción.

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/”.


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-05-24
  • Categorias: Diseño Web Blogger WordPress Redes Sociales WhatsApp WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Crecimiento mundial en el mercado de software de diseño PCB para el 2020 - 2029

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-13
  • Categorias: Desarrolladores Lenguajes De Programacion Software Noticias Tutorial

Historia de los sistemas operativos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Microsoft Windows Apple Ordenador Noticias Tutorial Informatica

Vacía tu mente, no tengas forma, ni figura

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Estilo Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial