Botão para Compartilhamento

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:

script anterior pode ser colocado num arquivo externo ou incorporado no código HTML. Você pode testar no botão a baixo:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Estou pronto para lhe atender

MARREIRA DIGITAL © 2021. Todos os direitos reservados

Me ligue ou manda um zap ae!

(92) 982195748

QR Code https://api.whatsapp.com/send?phone=5592982195748

Link direto para meu WhatsApp