Botão para compartilhamento de conteúdo no WhatsApp

Por
| 

O objetivo desta postagem é mostrar como criar um botão para compartilhar páginas da internet no WhatsApp.

Botão para compartilhamento de conteúdo 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:

WhatsApp (Teste)

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]

Ícone do WhatsApp
Ícone do WhatsApp do Iconfinder

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

Sugestões de livros para estudantes de computação na Amazon (patrocinado): Lista de Livros

Obrigado pela leitura! Se você puder, considere apoiar financeiramente o Blog Cyberini, Chave Pix: cyberpix9@gmail.com

Doar com PayPal

Siga o blog

Redes sociais: Facebook, Twitter, YouTube, Pinterest, Instagram, Telegram

Importante: utilize o bom senso na hora de comentar. Acesse a política de privacidade para maiores informações sobre comentários.

36 comentários:

  1. No chrome funciona, mas no firefox não, como resolver?

    ResponderExcluir
  2. Excelente o artigo!
    estou 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!

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
    2. Mas 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

      Excluir
    3. Entendi. Eu fiz dois exemplos com a imagem num diretório e upei numa pasta zipada no Google Drive. Clica aqui para acessar.

      Mas, basicamente, é só colocar o caminho relativo do diretório onde está a imagem.

      Excluir
    4. Obrigado! estou mais proximo do resultado que estou querendo obter!
      vou 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!

      Excluir
    5. Você quer compartilhar o link da imagem no Whatsapp?

      Nesse 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);

      Excluir
    6. Exatamente! quero passar o link pelo whatsApp mas, não manjo muito de PHP não!
      mas suas ideias estao me ajudando muito! obrigado!

      Excluir
    7. De nada! Espero que você consiga resolver o problema!

      Excluir
    8. Henrique, 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.

      Desejo mesmo comparitlhar a imagem, vc sabe se é possível?

      Obrigado

      Excluir
    9. O arquivo em si eu não sei se é possível. O método da postagem só permite compartilhar texto e, consequentemente, URLs.

      Excluir
  3. Boa 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?

    ResponderExcluir
    Respostas
    1. Sim, é 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.

      Excluir
  4. Olá Henrique, boa tarde. Tudo bem? É possível enviar uma imagem diretamente do site para o Whatsapp? Não a URL, mas a imagem mesmo.

    ResponderExcluir
    Respostas
    1. Não, pois o método apresentado no artigo só permite compartilhar conteúdo em formato de texto (tipo a URL)

      Excluir
  5. Blz. 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?

    ResponderExcluir
    Respostas
    1. Dei uma pesquisada aqui, porém não encontrei como fazer isso.

      Excluir
    2. Obrigado pelas rápidas e boas respostas. Parabéns pelos seus posts!

      Excluir
  6. Excelente artigo.
    Mas eu quero saber como eu posso compartilhar a imagem, o título e uma breve descrição.

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
    2. Você poderia me dar uma ajuda?
      É 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.

      Excluir
    3. 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
      .

      Uma das possíveis soluções, conforme a resposta da questão, seria implementar todas as tags OpenGraph.

      Excluir
  7. 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
    https://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 ?

    ResponderExcluir
  8. Muito bom o seu Blog, obrigado pelas dicas.
    Como 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 ????

    ResponderExcluir
    Respostas
    1. Obrigado! Eu uso um framework chamado W3.CSS.

      Eles tem umas classes para criar contêineres e uma classe chamada w3-right para deixar esses contêineres alinhados à direita.

      Excluir
  9. Muito obrigada, valeu pelo post e parabéns pelo blog!

    ResponderExcluir
  10. Parabé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 :)

    ResponderExcluir
  11. nao está mais funcionando, aparece uma mensagme: ABOUT SRC.. etc

    ResponderExcluir
    Respostas
    1. Estranho. Eu fiz um teste aqui no desktop e no celular e está funcionando normalmente

      Excluir