Compartir contenido en Whatsapp usando jQuery 2 (Solo Móviles)

Nube Colectiva

hace 10 años

En esta página:

Demo Github

Demo Github

En esta oportunidad les quiero mostrar como compartir un enlace por Whatsapp mediante uno de los mejores frameworks de javascript (jQuery).

NOTA: Para ver la demo, necesitas abrirla desde tu dispositivo móvil que cuente con la aplicación Whatsapp instalada.

estilos.css

Creamos los estilos CSS para nuestro contenido:


   .whatsapp_btn {
    background-image: url('icon.png');
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block !important;
    position: relative;
    font-family: Arial,sans-serif;
    letter-spacing: .4px;
    cursor: pointer;
    font-weight: 400;
    text-transform: none;
    color: #fff;
    border-radius: 2px;
    background-color: #5cbe4a;
    background-repeat: no-repeat;
    line-height: 1.2;
    text-decoration: none;
    text-align: left;
}

.whatsapp_btn_small {
    font-size: 12px;
    background-size: 16px;
    background-position: 5px 2px;
    padding: 3px 6px 3px 25px;
}

.whatsapp_btn_medium {
    font-size: 16px;
    background-size: 20px;
    background-position: 4px 2px;
    padding: 4px 6px 4px 30px;
}

.whatsapp_btn_large {
    font-size: 16px;
    background-size: 20px;
    background-position: 5px 5px;
    padding: 8px 6px 8px 30px;
    color: #fff;
}
a.whatsapp { color: #fff;}

.whatsapp_btn {

background-image: url('icon.png');

border: 1px solid rgba(0, 0, 0, 0.1);

display: inline-block !important;

position: relative;

font-family: Arial,sans-serif;

letter-spacing: .4px;

cursor: pointer;

font-weight: 400;

text-transform: none;

color: #fff;

border-radius: 2px;

background-color: #5cbe4a;

background-repeat: no-repeat;

line-height: 1.2;

text-decoration: none;

text-align: left;

}

.whatsapp_btn_small {

font-size: 12px;

background-size: 16px;

background-position: 5px 2px;

padding: 3px 6px 3px 25px;

}

.whatsapp_btn_medium {

font-size: 16px;

background-size: 20px;

background-position: 4px 2px;

padding: 4px 6px 4px 30px;

}

.whatsapp_btn_large {

font-size: 16px;

background-size: 20px;

background-position: 5px 5px;

padding: 8px 6px 8px 30px;

color: #fff;

}

a.whatsapp { color: #fff;}

Listo con eso le damos los estilos a nuestro botón compartir Whatsapp ydemás contenidos.

Ahora necesitamos un botón html para poder compartir contenido:


<button class="whatsapp whatsapp_btn whatsapp_btn_large">Compartir</button>

<button class="whatsapp whatsapp_btn whatsapp_btn_large">Compartir</button>

Y también agregamos nuestra la función jquery para Compartir en diferentes dispositivos móviles:


$(document).ready(function() {
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
 $(document).on("click", '.whatsapp', function() {
        if( isMobile.any() ) {

            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
            var whatsapp_url = "whatsapp://send?text=" + message;
            window.location.href = whatsapp_url;
        } else {
            alert("Por favor usa tu Celular para probar esta Demo");
        }

    });
});

$(document).ready(function() {

var isMobile = {

Android: function() {

return navigator.userAgent.match(/Android/i);

BlackBerry: function() {

return navigator.userAgent.match(/BlackBerry/i);

iOS: function() {

return navigator.userAgent.match(/iPhone|iPad|iPod/i);

Opera: function() {

return navigator.userAgent.match(/Opera Mini/i);

Windows: function() {

return navigator.userAgent.match(/IEMobile/i);

any: function() {

return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

}

};

$(document).on("click", '.whatsapp', function() {

if( isMobile.any() ) {

var text = $(this).attr("data-text");

var url = $(this).attr("data-link");

var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);

var whatsapp_url = "whatsapp://send?text=" + message;

window.location.href = whatsapp_url;

} else {

alert("Por favor usa tu Celular para probar esta Demo");

}

});

Como verán estoy usando la función encodeURIComponent() la cual codifica un componente URI. Esta función codifica caracteres especiales. Por ejemplo, codifica los siguientes caracteres:, /? : @ & = + $ #
Listo ya hemos terminado !

NOTA: Repito de nuevo que para ver la demo, necesitas abrirla desde tu Celular que cuente con la aplicación Whatsapp instalada.

Puedes ver la DEMO .

Puedes descargar el código alojado en nuestro repositorio Github

Sigueme en Twitter: @pepoflex
Espero les sirva de mucho este tutorial.