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/”.
    Como integrar el botón de WhatsApp en tu Web
  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-05-24
  • Categorias: Diseño Web Blogger WordPress Redes Sociales WhatsApp WebSite Noticias Tutorial

Te sugiero seguir leyendo...



Como integrar el botón de WhatsApp en tu Web
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/”.
Tutoriales en linea




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






Como registrar una marca o nombre comercial

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-18
  • Categorias: WebSite Trucos y tips Noticias Tutorial

Como poner reCAPTCHA en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-18
  • Categorias: Google Diseño Web WebSite Noticias Tutorial

Como crear un Sitemap online

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-16
  • Categorias: RSS XML WebSite webmasters Marketing SEO Herramientas Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial