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

Obrigado pela leitura! Se você puder, considere apoiar financeiramente o Blog Cyberini. Qualquer valor doado contribui muito para a difusão do conhecimento.

Doar com PagSeguroDoar com PayPal


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.

23 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
  6. Olá, Henrique quando compartilho pelo facebook ele não pega a imagem, texto e titulo, só apresenta o dominio tenho a meta definida assim
    - property="og:url" content="https://www.dominio.br/informativo"
    - property="og:type" content="website"
    - property="og:title" content="titulo"
    - property="og:description" content="bla bla bla"
    - property="og:image" content="https://www.dominio.com.br/imagem.jpg"

    Obrigado

    ResponderExcluir
    Respostas
    1. O Facebook tem uma ferramenta de debug que indica se há algum problema na implementação das tags OpenGraph. Link a seguir: Depurador de Compartilhamento do Facebook.

      Aparentemente, você fez tudo certo.

      Excluir
    2. Olá Henrique, vou testar ela e passo uma posição, do que ocorreu. Obrigado

      Excluir
    3. Olá Henrique, consigo conversar contigo pelo whats? telegram? hogouts? ele está me dizendo que não tem as meta declarada, propriedades ausentes,og:url, og:type, og:title, og:image, og:description, fb:app_id. Obrigado

      Excluir
    4. Oi Gilson, eu não tenho essa disponibilidade. A metatag fb:app_id, embora exigida pelo depurador, não influencia no compartilhamento de conteúdo (eu não uso neste blog, por exemplo).

      As metatags do meu blog (deste post, como exemplo) são:

      <meta content='Criação de um botão em HTML/CSS/JavaScript para compartilhar conteúdo no Facebook.' name='description'/>

      <meta content='https://www.blogcyberini.com/2018/05/botao-para-compartilhamento-de-conteudo-facebook.html' property='og:url'/>

      <meta content='Criando um botão de compartilhamento do Facebook' property='og:title'/>

      <meta content='Criação de um botão em HTML/CSS/JavaScript para compartilhar conteúdo no Facebook.' property='og:description'/>

      <meta content='https://3.bp.blogspot.com/-ToHZtwHv_ME/WvYLw-TpdrI/AAAAAAAAH2A/F7DTRxbYpB4eaHnng9xF_wrRyRAlawROACLcBGAs/w1200-h630-p-k-no-nu/botao-do-facebook.jpg' property='og:image'/>

      <meta content='pt_BR' property='og:locale'/>

      <meta content='Blog Cyberini' property='og:site_name'/>

      <meta content='article' property='og:type'/>

      Excluir
    5. Lembrando que todas as metatags tem que ficar no head

      Excluir
  7. Bom dia, Henrique descobri o problema de não compartilhar a imagem, ela tem que ser extensão de jpg. Estava com a imagem em png.

    Obrigado pela força

    ResponderExcluir
    Respostas
    1. Fico feliz que você tenha conseguido resolver o problema, só achei estranho o fato da extensão do arquivo ser o problema, já que aqui no blog eu uso bastante imagens em PNG e não tenho problemas.

      Excluir
    2. Olá, pois é, achei isso estranho também, porque png acho melhor, mas troquei a imagem por jogo funcionou, ou talvez olhando agora pode ter sido o tamanho da imagem, a primeira tinha em 1920x1080 a nova é 1700x700. Talvez seja o tamanho, vou testar novamente amanhã e posto aqui. Obrigado

      Excluir
    3. Olá, Henrique testei agora pela manhã com imagem em tamanho diferente de PNG e não apareceu, a JPG em qualquer tamanho aparece. Muito estranho

      Excluir
    4. Aqui, no blog, as imagens que eu coloco na metatag og:image tem resolução de 960x480. Não lembro se o Facebook tem alguma restrição

      Excluir
    5. Pelo que eu li, tem restrição com imagem menor, com as maiores não tem problema.

      Excluir