WhatsApp es la aplicación de mensajería más popular. Este artículo describe cómo puede agregar el botón Compartir de WhatsApp en su sitio web.
Nota: Esto funcionará solo cuando el sitio web esté abierto en el móvil con WhatsApp instalado.
Paso 1: Diseñe una página web simple con un hipervínculo. El intercambio se realizará cuando el usuario haga clic en este enlace.
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title> How to add WhatsApp share button on website? </title> </head> <body> <h3>Whatsapp sharing</h3> <a>Share to whatsapp</a> </body> </html>
Paso 2: Esto no funcionará en computadoras de escritorio o portátiles, así que agreguemos CSS para ocultarlo en pantallas grandes. Para ello se utiliza CSS @media query.
<style type="text/css">
@media screen and (min-width: 500px) {
a {
display: none
}
}
</style>
Ejemplo 1: Este ejemplo se implementa utilizando los dos pasos anteriores. Observe que el atributo href especifica la ubicación y esta solicitud se envía a la aplicación WhatsApp.
Sintaxis:
href="whatsapp://send?text=Your message here"
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to add WhatsApp share
button on website?
</title>
<style type="text/css">
@media screen and (min-width: 500px) {
a {
display: none
}
}
</style>
</head>
<body>
<h3>Whatsapp sharing</h3>
<a href=
"whatsapp://send?text=GFG Example for whatsapp sharing"
data-action="share/whatsapp/share"
target="_blank">
Share to whatsapp
</a>
</body>
</html>
Guarde este archivo y ábralo en el teléfono móvil.
Producción:
Ejemplo 2: En este ejemplo, tomaremos la entrada del usuario y enviaremos ese mensaje usando JavaScript. En este ejemplo, hemos definido una clase para mostrar contenido solo en dispositivos móviles.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to add whatsapp share
button on website?
</title>
<style type="text/css">
/* To show on small size screen only */
@media screen and (min-width: 500px) {
.mobileShow {
display: none
}
}
</style>
</head>
<body>
<h3>Whatsapp sharing</h3>
<input class="mobileShow"
type="text" name="message">
<button onclick="share()" class="mobileShow">
Share to whatsapp
</button>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
// Function to share on whatsapp
function share() {
// Getting user input
var message = $("input[name=message]").val();
// Opening URL
window.open(
"whatsapp://send?text=" + message,
// This is what makes it
// open in a new window.
'_blank'
);
}
</script>
</body>
</html>
Producción:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por aman neekhara y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA