Criar Botão Personalizado para Compartilhar Posts no Facebook

Como fazer um botão Curtir do Facebook personalizado. Você pode criar um botão ou link de texto para compartilhar as postagens do seu blog no Facebook. Esse código do Facebook dá mais uma opção para compartilhar links em sua timeline, em grupos, ou para os seus amigos através do Facebook. Com apenas um link num link de texto ou imagem abre a caixa de dialogo do Facebook com todas essas opções para compartilhar seus posts, ou seja, é praticamente o mesmo efeito do botão curtir do Facebook só que muito mais leve, pois usando somente texto em vez de scripts. Outra vantagem é poder personalizar como quiser esse botão de compartilhamento de postagens do blog. Veja o final deste post um link de demonstração.

Criar Botão Personalizado para Compartilhar Posts no Facebook

Código Personalizado do Botão Curtir (Compartilhar) do Facebook


Como já falamos você pode usar um link de texto como botão compartilhar no Facebook e neste caso o código é deste jeito:

<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Compartilhar no Facebook
</a>

Apenas altere o texto compartilhar no Facebook como desejar. Mas se quiser criar um banner para usar como botão do Facebook. Veja como é simples colocar a imagem neste trecho de html e usar imagem como botão curtir do Facebook apenas usando esse outro código:

<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
<img src="endereço da imagem" />
</a>

Veja alguns links para ajudá-lo a fazer banner ou editar imagens:
Criar Banner para Blogs: Programas e Sites para Editar Imagens
Editar e Otimizar as Imagens do Blog: Carregar Imagens mais Rápido

Colocar Botão Curtir Personalizado no Blog

O modo de colocar o código no blog é muito simples e o mesmo para link de texto ou imagem. Entre na pagina layout > adicionar Gadget > html/javascript e cole o código. Veja outros acessórios do Facebook para seu blog:
Colocar Gadget de Posts Recomendados do Facebook no Blog
Corrigir Problemas dos Comentários do Blogger e Facebook Juntos no Blog
Incorporar Postagens do Facebook no Blog (Embedded Posts)

Esse botão compartilhar sempre enviará a pagina que está sendo visitada para o Facebook, ou seja, não é necessário alterar nada no código, pois quando alguém clicar no botão a pagina que será compartilhada no Facebook será a pagina que seu visitante está naquele momento não importa se é uma pagina de postagem, pagina dos marcadores ou pagina inicial do blog.

Veja também:
Como Integrar o Blog ao Facebook e Gerar mais Visitas
Aplicativos do Facebook para Blogs e Sites - Social Plugins

As principais vantagens deste código do Facebook é que você pode usar o texto ou imagem que desejar e, além disso, não deixa sua pagina lenta (desde que não use imagens muito grandes ou Gifs Animados). Agora cabe a você fazer alguns testes e avaliar se usar um link de texto ou imagem como botão curtir ou enviar para o Facebook pode trazer bons resultados para seu blog.

Demonstração do Link para Compartilhar no Facebook

30 comentários :

  1. Olá Fabiano,
    Esse botão também funciona se for colocado direto no HTML para aparecer no final das postagens?
    Grande abraço,
    Almir Ferreira.

    ResponderExcluir
  2. eu não testei colocar esse código diretamente no html para aparecer no fim dos posts, mas acredito que funcione, afinal o link compartilha a pagina atual então compartilhará cada post sem problemas

    se tiver problemas na hora de salvar a alteração veja aqui:
    Mensagem de Erro ao Salvar Alterações no HTML do Blogger

    provavelmente é erro de codificação do html.

    ResponderExcluir
  3. Olá Fabiano,
    Coloquei esse código no rodapé das postagens com uma imagem e tá funcionando perfeitamente. E parece ser ainda mais leve do que o botão do próprio facebook.
    Grande abraço e valeu por mais uma ótima dica.

    ResponderExcluir
  4. Concordo com você. Usar esse código é mais leve que o botão curtir porque aqui não precisamos de códigos externos para mostrar o link para compartilhar afinal a janela só é carregada após o clique

    ResponderExcluir
  5. Olá Fabiano,
    eu tinha criado um blog faz mais ou menos 1 mês, ai tava tudo bem, só que hoje quando eu fui acessar meu blogger, tudo dele mudou. Tipo, quando você entra nele tava tudo organizado, agora ta tudo estranho, desorganizado, tem como arrumar isso?

    ResponderExcluir
  6. KoGaMa Planeta você deve ter colocado algum código no blog que gerou erros com outros códigos que já tinha ou apagou algo por engano.

    é difícil dizer onde é o problema, tente lembrar das ultimas alterações que fez e tente desfazer

    exclua seu histórico de internet pode ser só um erro de carregamento da pagina

    ResponderExcluir
  7. Ele mostra o contador de compartilhamentos?

    ResponderExcluir
  8. Fabiano,
    Antes de você me falar que tinha um código errado, já tinha ido meu blog. Mas hoje as 17:30 o blog ficou tudo desorganizado novamente, eu acho que não é um erro de html, por que, parece que ele tem um tipo de horário para se desorganizar, ontem mesmo foi as 17:00. Obrigado

    ResponderExcluir
  9. tente excluir seu histórico de internet. Um problema que aparece e some sozinho deve ser algum erro no carregamento da pagina.

    ResponderExcluir
  10. Amigo, colei o código em meu site, mas nos testes, a janela que se abre mostra apenas o link, sem o nome da página e a descrição. No seu exemplo mostra tudo, como proceder? Desde já agradeço.

    ResponderExcluir
  11. Coloquei o código, mas na janela de compartilhamento não aparece o titulo e nem a descrição do site, apenas o link, como fazer aparecer todas as informações?

    ResponderExcluir
  12. nos testes que fiz ele funcionou igual ao botão curtir do Facebook.

    com o botão curtir as informações aparecem completas?

    ResponderExcluir
  13. Obrigado funcionou direitinho.

    ResponderExcluir
  14. Valew mais uma vez! :)

    ResponderExcluir
  15. Oi, coloquei no meu site mas sempre no primeiro clique a caixa abre sem a imagem, tem que fechar ela e a partir do segundo clique aparece. É assim em todos os posts. Se possível poderia passar o código dessa caixinha pra quem fez um app lá no FB e tem um Id? grata.

    ResponderExcluir
    Respostas
    1. esse problema da imagem não aparecer no primeiro clique acontece com todos os códigos que já testei (inclusive com os botões do Addthis para compartilhar)

      mas isso não interfere em nada. A imagem é compartilhada junto com o post, mesmo que ela não apareça na caixa de compartilhamento

      Excluir
  16. Obrigado Fabiano, mas no meu caso não deu certo mesmo, a imagem dentro do face aparece sempre um quadrado cinza, acho que é pq uso outra plataforma, não é no Blogger e não to conseguindo fazer via criar uma aplicativo lá no Face, to tentando achar alguma dica na net, mas tá difícil.

    ResponderExcluir
    Respostas
    1. o quadrado cinza é erro na imagem.

      veja nesta parte do código:

      img src="endereço da imagem"

      você tem que colocar a url de uma imagem neste trecho do código.

      Excluir
  17. Não, não é isso. É assim: Abre a caixa igual a sua aqui do seu blog, aparece a imagem q quero compartilhar tudo igual como no seu blog, aí compartilho no Face, só que lá no Face a imagem que aparecia na caixa de compartilhar fica um quadro cinza. Qdo compartilho o seu aqui acima, vai normal. Pfv nao publique esse post, vou passar meu email pra vc responder e te passo o site pra vc ver. Obrigada. mahxstella@gmail.com

    ResponderExcluir
    Respostas
    1. talvez o problema esteja no formato da imagem .png ou pelo fundo transparente

      tente usar uma imagem no formato .jpg

      Excluir
  18. Pfv tente compartilhar pra vc ver o q acontece, no caso é jpg, desculpa, mas vendo talvez tenha alguma ideia:http://www.desapegapiracicaba.com.br/board/outros/livro/7-1-0-19 e obrigado de novo, é q isso é mui importante pra o q quero montar.

    ResponderExcluir
    Respostas
    1. agora apareceu a imagem da postagem.

      parece tudo certo.

      Excluir
  19. Não dá certo Fabiano, é lá dentro do Face que não aparece a imagem, ou aparece um quadrado cinza. Faz um teste compartilhando somente pra vc, pfv.

    ResponderExcluir
    Respostas
    1. parece tudo certo.

      o único erro que achei foi o código < img src= > depois das duas imagens daquele post, mas não sei se é isso que gerou o problema.

      Voce tentou compartilhar outras paginas do seu blog para ver se dá certo?

      Excluir
  20. Olá Fabiano, bem...vc já me ajudou uma vez e cá estou para pedir HELP novamente. Peguei um destes Templates prontos da Web e apliquei ao meu blogger, mas mudei várias coisas dentro do HTML. Aliás, ressalto que foi com vc, aqui neste espaço que aprendi a mexer nas configurações de html. Mas agora queria sua ajuda no seguinte:compartilhar no facebook. Quando eu faço isso, vai tranquilo, mas aparece um sinal de til (~) entre o título do post e o nome do blog. Não consigo tirar de modo algum. Vc poderia me ajudar? BLOG: http://biblioteconomiasocial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. não achei o sinal de ~ no seu blog, acho que é gerado automaticamente para separar o titulo da postagem e o nome do blog.

      veja aqui o código do titulo do blog:
      Personalizar e Otimizar Título do Blog

      tente colocar algum sinal para separar o titulo do blog e da postagem para ver se resolve, mas isso é só um palpite infelizmente não tenho certeza de como resolver isso porém acredito que isto não prejudique o blog

      Excluir
  21. Como colocar esse código no Wordpress?

    ResponderExcluir
  22. eu não encontrei o código para usar no wordpress.

    deve ser possivel, mas não tenho o código

    ResponderExcluir