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

Marcadores: , ,