Criando um botão de compartilhamento do Twitter

Nesta postagem, mostrarei como criar um botão para compartilhar páginas da internet no Twitter.

Link de compartilhamento do Twitter

O link do Twitter para compartilhamento é [1]

https://twitter.com/intent/tweet?url=[URL]&text=[TEXTO-DO-TWEET]&via=[NOME-DE-USUARIO-DO-TWITTER]&hashtags=[LISTA-DE-HASHTAGS]

• URL é o link da página que será compartilhada, que será exibida no Twitter na forma de uma URL curta;
• text é a descrição ou título da página que será compartilhada (vamos colocar o título da página, mas você é livre para escolher o que quiser);
• via é um nome de usuário do Twitter (sem o @ no início) que será incluído no conteúdo compartilhado. Como sugestão, você pode colocar o Twitter do site onde o botão será incorporado;
• hashtags é uma lista de hashtags (sem o # no início) separadas por vírgula, que serão incluídas no Tweet;

Ainda existe o parâmetro related, que é uma lista de nomes de usuários. Entretanto, essa lista é utilizada pelo Twitter apenas para que ele exiba um lista de sugestões de contas para seguir.

Os parâmetros essenciais, em minha opinião, são text, URL e via (principalmente os dois primeiros). Neste artigo, vamos utilizar apenas os parâmetros URL (obtido através da propriedade window.location.href) e text, que será o título da página (obtido através de document.title). Se você for utilizar mais parâmetros, tome cuidado, pois o Twitter tem um limite de 280 caracteres, portanto utilize apenas o que for realmente necessário.

Os parâmetros devem estar codificados para URL (faremos isso com a função encodeURIComponent() do JavaScript). Inicialmente, vamos utilizar o seguinte código HTML

<a href="" id="twitter-share-btt" rel="nofollow" target="_blank" class="twitter-share-button"></a>

O script a seguir cria a URL de compartilhamento e a atribui ao link do HTML anterior.

        //Constrói a URL depois que o DOM estiver pronto        
        document.addEventListener("DOMContentLoaded", function() {
            var url = encodeURIComponent(window.location.href);
            var titulo = encodeURIComponent(document.title);
            //var via = encodeURIComponent("usuario-twitter"); //nome de usuário do twitter do seu site
            //altera a URL do botão
            document.getElementById("twitter-share-btt").href = "https://twitter.com/intent/tweet?url="+url+"&text="+titulo;
            
            //se for usar o atributo via, utilize a seguinte url
            //document.getElementById("twitter-share-btt").href = "https://twitter.com/intent/tweet?url="+url+"&text="+titulo+"&via="+via;
        }, false);
        

Esse método não funciona em páginas AMP, pois este tipo de página impede o uso de scripts que não façam parte do projeto AMP. Além disso, o botão também não funcionará se usuário bloquear os scripts do navegador.

Observação: você não precisa utilizar o evento DOMContentLoaded se o script for colocado abaixo do código HTML do botão.

Personalização do botão

Utilizarei a seguinte imagem para ser o ícone do botão [2]:

Ícone do Twitter do Iconfinder

Você pode utilizar a imagem que quiser. A única recomendação é que ela seja quadrada. O código em CSS é dado a seguir

        .twitter-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], você deve colocar o link da imagem escolhida. Se preferir, utilize uma URL de dados em Base 64. Normalmente, sites de ícones, como o Iconfinder, disponibilizam uma opção para criar a URL em Base 64 de seus ícones. A principal vantagem dessa opção é que fica tudo embutido no código da página, isto é, você não depende de arquivos externos.

Se a imagem que você escolher não for quadrada, utilize o valor contain na propriedade background-size para que não haja distorções.

Você pode testar o botão a seguir:

Nesse exemplo, utilizei um ícone em Base 64.

Download dos códigos

A versão final desse botão pode ser obtida nos links abaixo

• Botão do Twitter no GitHub
• Botão do Twitter no Google Drive

Considerações finais

Como última dica, implemente as meta tags do Twitter (se necessário) para que o Twitter crie um card/snippet com um resumo da página. Dessa forma, o conteúdo é apresentado de maneira mais elegante na rede social. Para maiores informações sobre as meta tags do Twitter, consulte os links nas referências [3].

Leia também

Mais botões de compartilhamento:

• WhatsApp
• Facebook
• Google+
• Pinterest
• LinkedIn
• e-mail

Referências

• [1] Tweet Web Intent. Acesso em 26 de maio de 2018.
• [2] IconFinder: Twitter Icon by Xinh Studio. Acesso em 27 de maio de 2018.
• [3] Optimize Tweets with Cards. Acesso em 26 de maio de 2018.