Colocar Botões de Compartilhamento em Forma de Coração no Blog

Usar botões para compartilhar as postagens com formato de coração no blog pode ajudar (atrair a atenção) dos seus visitantes para os botões de compartilhamento das redes sociais e com isso ajudar a conseguir mais visitas de sites como Facebook, Twitter, Orkut, Pinterest e outros. Mas se você quiser mostrar botões no modelo padrão pode ver nosso post sobre: 7 Opções de Botões para Divulgar Blog nas Redes Sociais.

botões de compartilhamento em forma de coração

Para colocar esse acessório de compartilhamento de postagens em forma de coração no blogger você deve modificar o código HTML então sugerimos fazer backup do seu template antes de começar. Então entre na pagina editar HTML, use o ctrl F, encontre a linha </head> e coloque esse código antes dela:

<!-- Start Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->


Agora procure e insira esse outro código antes de </body>

<!-- Start Heart Share Code From http://www.spiceupyourblog.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a>
<!-- End Heart Share Code From http://www.spiceupyourblog.com/ -->


E já está tudo pronto. Se você quiser mudar o lugar que o coração aparece na sua pagina é só alterar o trecho:
<div style='position: fixed; bottom: 2%; left: 2%;'>

Para colocar na parte de cima da pagina troque bottom por top e se quiser o gadget de coração do lado direito troque left por right. Em ambos os casos o valor 2% é a distancia da margem da pagina então pode modificar isso como quiser. Apenas tenha cuidado com os outros sinais como, por exemplo, os dois pontos, ponto e vírgula porque eles fazem parte do código de posicionamento do botão para compartilhar e se apagar ou trocar algum de lugar o código não funciona corretamente no blog.

Como pode notar esse javascript foi desenvolvido pelo site Spice Up Your Blog e nós estamos apenas divulgando o código por achar que é interessante de usar um gadget em forma de coração para compartilhar postagens nas redes sociais. Mas é claro isso terá utilidade dependendo muito do tipo de conteúdo e visitantes do seu blog.

Veja outras dicas para compartilhar e divulgar seu blog:
Como Colocar Botão Pin it do Pinterest no Blogger ou Wordpress
Colocar botão Curtir e Enviar do Facebook em Todas as Paginas do Blog
5 Dicas para Ajudar na Divulgação de Blogs

Esse tutorial é para responder a uma duvida deixada em um dos comentários deste blog e aproveitamos para dizer que não publicamos tutoriais sobre outras perguntas e sugestões que recebemos porque nem tudo é possível fazer no blog ou são coisas que apresentam muitos erros conforme o template, mas realmente pesquisamos sobre todos os assuntos sugeridos. Abraços a todos! Related Posts with Thumbnails


Link desta Pagina

23Comentários:

Reinaldo disse...

pode botar outra coisa ao invez do coração?

Fabiano Roberto disse...

Reinaldo
vou procurar saber sobre outras imagens

Andson Boa Sorte disse...

muito bom, com isso pode ajudar as divulgar o blog.
valeu.

Reinaldo disse...

Obrigado :D

@fute_news disse...

Vocês pode fazer uma matéria explicando como colocar anúncios no blog?

Fabiano Roberto disse...

veja aqui sobre Opções para Criar e Colocar Anúncios Google Adsense Blogger

Lua Blanco Cover disse...

Adorei gente

Hogla Souto disse...

Ameiiiiiii... ficou show.

Hogla Souto disse...

Amei o coraçãozinho, ficou show...

Juli@ disse...
Este comentário foi removido pelo autor.
Juli@ disse...

eba,eu consiguii ficou muito lindo, obrigado pela dica fabiano roberto.

Igor Carvalho disse...

Parabéns pelo post, gostei muito e já apliquei no meu blog www.penseeame.com.

Quero parabenizar também o outro post que li e que ensina a por o gadget de redes sociais como você colocou aqui do lado direito, fica muito bom e é fácil de posicioná-lo.

Muita paz e luz no seu caminho!

Klizia Tomiko disse...

não consegui colocar no meu blog o coraçãozinho!:(

Fabiano Roberto disse...

mas não apareceu nada no seu blog?

veja se colocou o código completo... as vezes faltou alguma letra na hora de copiar

Julia Araujo disse...

eu consegui colocar mas não ficou bom :( metade da redes sociais vao para "baixo das postagens", tem como botar em um local mais largo do meu blog?

Fabiano Roberto disse...

no seu caso seria melhor mudar o gadget de lugar em vez de alterar as larguras do blog

Cristiane Simões disse...

Não consegui colocar o coração buaaaaaaa.Não achei as 2 palavras q vc mandou procurar apertei o Ctrl F mas ele deu resultado 0 de 0

Fabiano Roberto disse...

Cristiane você achou a pagina do html do blog?

tente pesquisar somente a palavra sem a barra, por exemplo: body

Pregador Cleyton disse...

kra, tem como trocar o cor???
mi da umas dicas para meu blog
cleyshow.blogspot.com.br

Fabiano Roberto disse...

Cleyton
trocar a cor do que?

a maior parte das cores do blog são códigos css ou imagens de fundo.

Fabianne disse...

Boa tarde Fabiano !!
Tentei mas na hora de salvar aparece essa mensagem
Mais do que um widget foi encontrado com id: HTML4. IDs Widget deve ser único poderia me ajudar ? http://www.artesfaby.blogspot.com.br/

Fabiano Roberto disse...

veja se você não copiou e colou duas vezes esse trecho do html em alguma mudança do html que tenha feito

Fabianne disse...

já conferi e não tem repetição não !! Até desmarquei a opção Mostrar botões de compartilhamento pra ver se era esse o motivo mas tbm não deu .
Que pena ....
Obrigada pela atenção

Postar um comentário

Gostou? Compartilhe!