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 o link a seguir:
Customizando o botão
Agora que já temos o principal, vamos personalizar o botão. Para isso, utilizaremos a imagem a seguir, que foi obtida no site IconFinder [5]
Criaremos uma classe em CSS para customizar o botão (se você preferir, utilize o ID)
.whatsapp-share-button {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
background-size: 100% 100%; /* ou 'contain' */
background-image: url("[URL-DO-ICONE]");
background-repeat: no-repeat;
background-position: center;
}
Em [URL-DO-ICONE], colocaremos a URL da imagem escolhida para o ícone. Você pode colocar a imagem que quiser, porém é recomendado que a imagem seja quadrada. Se não for o caso, mude o valor de background-size para contain, pois dessa forma a imagem não será distorcida e nem cortada. Como eu não quero depender de nenhum arquivo externo, então utilizarei uma URL de dados em Base 64, que contém a imagem embutida na própria URL [6]:
Basta colocar a URL anterior em [URL-DO-ICONE] e remover o texto âncora da tag <a></a>.
O botão gerado terá tamanho 40×40px, com 5px de margem ao redor. Como ele é um bloco inline, então você pode alinhá-lo como se fosse um texto.
O botão pronto pode ser testado abaixo
Código completo
A versão final desse botão pode ser obtida nos links abaixo
Bônus: Blogger
Se você utiliza o Blogger, ao invés de obter a URL da página via JavaScript, você pode utilizar as tags da linguagem de templates do Blogger:
- Tag do título:
<blog.pageTitle/> - Tag da URL:
<blog.url/>
Considerações finais
O botão criado funciona em qualquer situação, a única exceção é se o usuário tiver bloqueado os scripts do navegador, algo que é bem raro. Isso não se aplica se você utilizar as tags do Blogger, como apresentei anteriormente.
Caso você esteja utilizando alguma linguagem no seu site como Java ou PHP, por exemplo, acredito que seja melhor criar o link do botão no lado do servidor.
Isso evita o problema de scripts desativados e te dá maior controle sobre a URL compartilhada. Por exemplo, você pode incluir parâmetros na URL para monitorar o tráfego, ou até mesmo criar uma URL curta gerada pelo servidor para tornar o conteúdo compartilhado mais agradável visualmente.
Por fim, consulte as referências.
Leia também
Mais botões de compartilhamento:
Referências
- [1] WhatsApp: Usando a Conversa em um Clique. Acesso em 9 de maio de 2018.
- [2] WhatsApp: I'm an Android developer, how can I integrate WhatsApp with my app?. Acesso em 9 de maio de 2018.
- [3] W3Schools: JavaScript encodeURIComponent() Function. Acesso em 9 de maio de 2018.
- [4] W3Schools: JavaScript Window Location. Acesso em 9 de maio de 2018.
- [5] IconFinder: WhatsApp Icon by Xinh Studio. Acesso em 9 de maio de 2018.
- [6] LEBLANC, MARTIN (26 de novembro de 2013). Base64 encoding assets–the what, when and how. Acesso em 9 de maio de 2018.
Obrigado. Ajudou bastante!!
ResponderExcluirNo chrome funciona, mas no firefox não, como resolver?
ResponderExcluirOlá! O botão (parte visual) ou a URL que não funcionam?
ExcluirNo Firefox pra desktop funciona sim
ExcluirExcelente o artigo!
ResponderExcluirestou com a seguinte situação, quero passar uma Url para uma imagem, ela esta dentro img/foto.png!
é possível? me ajudaria muito qualquer informação!
Sim, é só você substituir [URL-DO-ICONE] no CSS pelo diretório onde a imagem está. Daí é só ajustar a altura e a largura da imagem nos atributos width e height, também no CSS.
ExcluirMas nesse caso eu mudaria apenas a imagem do icone? Eu queria em vez de passar a URL do site passar um URL de uma imagem que está no diretório IMG/foto.png
ExcluirEntendi. Eu fiz dois exemplos com a imagem num diretório e upei numa pasta zipada no Google Drive. Clica aqui para acessar.
ExcluirMas, basicamente, é só colocar o caminho relativo do diretório onde está a imagem.
Obrigado! estou mais proximo do resultado que estou querendo obter!
Excluirvou detalhar melhor, estou usando a API html2canvas, com ela salvo um screeshot em uma pasta Upload, é gerado um nome aleatorio de imagem eu queria pegar a URL dessa imagem que acabou de ser gerada e retornar ela pro link do botao!
estou usando como base de estudo o Exemplo 3 desse artigo! https://makitweb.com/take-screenshot-of-webpage-with-html2canvas/
ficaria muito grato com qualquer ajuda! agradeço desde ja!
Você quer compartilhar o link da imagem no Whatsapp?
ExcluirNesse caso, considerando o exemplo que você me passou, você vai precisar pegar o URL único da imagem gerado pelo PHP no servidor e passar como resposta da requisição (eu não manjo muito de PHP, então não tenho como te ajudar mais).
Daí no JavaScript do botão você pode fazer algo assim:
document.addEventListener("DOMContentLoaded", function() {
var URL_IMG = [URL da imagem no servidor gerado pelo PHP];
document.getElementById("whatsapp-share-btt").href = "https://api.whatsapp.com/send?text="+URL_IMG;
}, false);
Exatamente! quero passar o link pelo whatsApp mas, não manjo muito de PHP não!
Excluirmas suas ideias estao me ajudando muito! obrigado!
De nada! Espero que você consiga resolver o problema!
ExcluirHenrique, preciso compartilhar uma imagem gerada pelo usuário que no final pode compartilhar no Facebook ou Whats, consegui enviar o link, mas não ficou legal.
ExcluirDesejo mesmo comparitlhar a imagem, vc sabe se é possível?
Obrigado
O arquivo em si eu não sei se é possível. O método da postagem só permite compartilhar texto e, consequentemente, URLs.
ExcluirBoa noite, Eu consigo compartilhar o URL do site diretamente para meu número de celular. Eu quero receber a mensagem quando o cliente acionar o botão. E solicitando informações sobre o produto da url. É possível fazer isso?
ResponderExcluirSim, é possível, porém você vai ter que utilizar a seguinte URL: https://wa.me/[SEU-NÚMERO-DE-WHATSAPP]/?text=[URL-DO-PRODUTO]. Para mais informações, consulte o FAQ do próprio WhatsApp: Usando a Conversa em um clique.
ExcluirOlá Henrique, boa tarde. Tudo bem? É possível enviar uma imagem diretamente do site para o Whatsapp? Não a URL, mas a imagem mesmo.
ResponderExcluirNão, pois o método apresentado no artigo só permite compartilhar conteúdo em formato de texto (tipo a URL)
ExcluirBlz. Obrigado meu amigo. Mas você sabe dizer se é possível compartilhar a imagem diretamente? Tipo, tenho uma galeria e em cada imagem ter a opção de enviá-la para o Whatsapp?
ResponderExcluirDei uma pesquisada aqui, porém não encontrei como fazer isso.
ExcluirObrigado pelas rápidas e boas respostas. Parabéns pelos seus posts!
ExcluirObrigado!
ExcluirExcelente artigo.
ResponderExcluirMas eu quero saber como eu posso compartilhar a imagem, o título e uma breve descrição.
O link de compartilhamento do Whatsapp só permite compartilhar texto e, consequentemente, uma URL. Se o texto tiver uma URL, ele irá pegar os dados das tags Open Graph (og:image, og:description e og:title) para criar um card com imagem, título e descrição.
ExcluirVocê poderia me dar uma ajuda?
ExcluirÉ que eu já procurei em muitos sites e nada.
Eu usei as tags Open Graph (og:image, og:description e og:title) e mesmo assim não aparece nada no whatsapp, mas quando partilho no facebook, aparece sem nenhum problema.
Hmmm... Estranho. Eu estava pesquisando no Stackoverflow e achei uma problema similar: Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work
Excluir.
Uma das possíveis soluções, conforme a resposta da questão, seria implementar todas as tags OpenGraph.
Olá, Henrique, gostaria de criar um botão CTA para usar no whatspp , clicando nele abrir uma url no chrome. Não tenho a minima ideia de como fazer isto no meu celular. Queria usar uma destas imagens
ResponderExcluirhttps://www.google.com/search?q=imagem+bot%C3%A3o+com+dedo+clique+aqui&sxsrf=ALeKk037pzzqAifdvGRLn6mARhxuajh3IA:1582333549655&tbm=isch&source=iu&ictx=1&fir=TwRIi70nW1Xg_M%253A%252C4iAT_bER5nWnuM%252C_&vet=1&usg=AI4_-kR6aoQ299ILVtGbH0Bh1ZMS3rdFpw&sa=X&ved=2ahUKEwi_tpLp--PnAhWvH7kGHRnGDpwQ9QEwAHoECAkQBQ
mandar um texto de instruções primeiro e em seguida o botão click que seja asssociado ao link url que será chamado.
Você pode me ajudar ?
Eu acho que o Whatsapp não permite isso.
ExcluirMuito bom o seu Blog, obrigado pelas dicas.
ResponderExcluirComo eu faço para colocar uma barra igual a que vc tem no topo superior à nossa direita, com o botão para compratilhar em todas as redes sociais, incluindo telegram e whatsapp ????
Obrigado! Eu uso um framework chamado W3.CSS.
ExcluirEles tem umas classes para criar contêineres e uma classe chamada w3-right para deixar esses contêineres alinhados à direita.
Muito obrigada, valeu pelo post e parabéns pelo blog!
ResponderExcluirDe nada, Kizzy!
ExcluirParabéns pelo conteúdo, cara! Estou procurando essa informação há semanas e não acho em lugar nenhum e encontrei tudo aqui de um jeito simples e objetivo. Valeu mesmo, sucesso :)
ResponderExcluirObrigado, Ingrid!
Excluirnao está mais funcionando, aparece uma mensagme: ABOUT SRC.. etc
ResponderExcluirEstranho. Eu fiz um teste aqui no desktop e no celular e está funcionando normalmente
Excluir