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
Utilizaremos o seguinte código em JavaScript para criar a URL de compartilhamento e alterar o link do HTML anterior:
O script anterior pode ser colocado num arquivo externo ou incorporado no código HTML. Você pode testar no botão a baixo: