O objetivo desta postagem é mostrar como criar um botão para compartilhar páginas da internet no WhatsApp.
Ele pode ser útil, por exemplo, para compartilhar artigos de blogs e sites de notícias.
O botão utiliza HTML, CSS e JavaScript.
Link de compartilhamento do WhatsApp
O principal elemento do botão é o link de compartilhamento do WhatsApp. Na verdade, são dois.
O primeiro possui o seguinte formato [2]
whatsapp://send?text=[CONTEÚDO]
O segundo link tem a seguinte forma [1]
https://api.whatsapp.com/send?text=[CONTEÚDO]
O parâmetro text contém o conteúdo que será compartilhado. No nosso caso, vamos compartilhar apenas a URL e o título da página onde está o botão.
Se qualquer um dos links for aberto num celular com o WhatsApp instalado, o aplicativo iniciará automaticamente para que o usuário possa escolher, na sua lista de contatos, quem receberá o conteúdo. Contudo a primeira forma funciona apenas em celulares, já a segunda forma funciona também no WhatsApp Web.
Independente da sua escolha, o conteúdo que será compartilhado deverá estar codificado para URL. Não se preocupe, pois isso pode ser feito utilizando a função encodeURIComponent() do JavaScript [3].
Para obter a URL da página onde o botão está, utilizaremos a propriedade window.location.href [4] do JavaScript. Já para obter o título da página, utilizaremos a propriedade document.title.
Iniciaremos com o seguinte documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Botão do WhatsApp</title>
</head>
<body>
<a href="" id="whatsapp-share-btt" rel="nofollow" target="_blank">WhatsApp</a>
</body>
</html>
Utilizaremos o seguinte código em JavaScript para criar a URL de compartilhamento e alterar o link do HTML anterior:
//Constrói a URL depois que o DOM estiver pronto
document.addEventListener("DOMContentLoaded", function() {
//conteúdo que será compartilhado: Título da página + URL
var conteudo = encodeURIComponent(document.title + " " + window.location.href);
//altera a URL do botão
document.getElementById("whatsapp-share-btt").href = "https://api.whatsapp.com/send?text=" + conteudo;
}, false);
O script anterior pode ser colocado num arquivo externo ou incorporado no código HTML. Você pode testar no botão a baixo: