Criando um botão de compartilhamento do Facebook

Por
| 

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

Criando um botão de compartilhamento do 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
Í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

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:

Referências


Siga o blog

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

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.

11 comentários:

  1. Meu maior problema tem sido quanto a imagem que o Facebook considera no compartilhamento. Não consigo corrigir para outra imagem. Consegue me ajudar?

    ResponderExcluir
    Respostas
    1. Boa noite, Rafael. O Facebook escolhe a imagem que está na meta tag og:image. Se você não tiver especificado essa tag, então ele vai escolher a imagem que julgar melhor.

      Consulte o guia do Facebook para Webmasters para maiores informações sobre como implementar as meta tags Open Graph: https://developers.facebook.com/docs/sharing/webmasters?locale=pt_BR

      Excluir
  2. nossa, muito bacana, antes dava bastante trabalho para compartilhar link, usava até um serviço externo, mas deixava o site mais lento. Parabéns pelo trabalho, esses script que facilitam o compartilhamento vão me ajudar demais.

    ResponderExcluir
  3. Muito bom o post, funcionou aqui, mas estou com um problema. Os botões de compartilhamento que criei estão em um laço pois carregam inúmeros posts, então ele funciona apenas em um botão nos demais não funciona.

    ResponderExcluir
    Respostas
    1. Olá, Victor. Obrigado pelo comentário. O botão só funciona se houver apenas um post por página, já que as informações são extraídas da página via Javascript.

      Caso a página tenha mais de um post, você vai ter que utilizar alguma linguagem de programação no lado do servidor para resolver o problema (PHP, Java, etc...), tomando cuidado para que cada botão de cada post tenha o seu próprio ID.

      Excluir
  4. Perfeito. Conteúdo que agrega valor aos criadores. Parabéns...

    ResponderExcluir
  5. Gostei... os códigos html ajudou no design dos botões.

    ResponderExcluir