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.

Referências

Siga o blog por e-mail

Receba notificações de novas postagens e novidades do blog por e-mail.

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

Nenhum comentário:

Postar um comentário