Criando um botão de compartilhamento do Facebook

Como o título sugere, nesta postagem mostrarei como criar um botão para compartilhar páginas da internet no Facebook.

Leia também: Botão para compartilhamento de conteúdo no WhatsApp

Link de compartilhamento do Facebook

O Facebook possui uma URL própria para compartilhar conteúdo, que possui a seguinte forma

https://www.facebook.com/sharer/sharer.php?u=[URL]

O único parâmetro necessário é a URL da página que será compartilhada, que pode ser obtida via JavaScript através da propriedade window.location.href. A URL deve estar devidamente codificada (faremos isso com a função encodeURIComponent() do JavaScript).

Inicialmente, vamos utilizar o seguinte código HTML

<a href="" id="facebook-share-btt" rel="nofollow" target="_blank" class="facebook-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() {            
            //altera a URL do botão
            document.getElementById("facebook-share-btt").href = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(window.location.href);
        }, false);
        

Duas observações devem ser levadas em conta aqui. Em primeiro lugar, esse método não funciona em páginas AMP, pois este tipo de página impede o uso de scripts próprios. Em segundo lugar, se usuário bloquear os scripts no navegador, então o botão também não funcionará.

Personalização do botão

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

Ícone do Facebook 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

        .facebook-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 Facebook no GitHub
• Botão do Facebook no Google Drive

Considerações finais

Você também pode criar um botão de compartilhamento no site Facebook Developer [1]. Entretanto, as opções de personalização são um pouco limitadas e você não pode escolher a imagem do ícone.

É extremamente recomendado que você tenha implementado as meta tags Open Graph nas páginas que serão compartilhadas no Facebook, pois com isso o Facebook poderá criar cards com um resumo da página compartilhada.

Se o usuário tiver bloqueado os aplicativos externos nas suas configurações de privacidade, o Facebook não permitirá o compartilhamento. Por quê? Também não sei, pois o método de compartilhamento apresentado utiliza um link do próprio Facebook e não de um aplicativo externo.

Leia também

Mais botões de compartilhamento:

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

Referências

• [1] Facebook for Developers: Botão Compartilhar. Acesso em 10 de maio de 2018.
• [2] IconFinder: Facebook Icon by Xinh Studio. Acesso em 10 de maio de 2018.