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
Colocar Botões de Compartilhamento em Forma de Coração no Blog
4/ 5
Oleh

29 Comentários

20 de abril de 2012 15:12 delete

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

Reply
20 de abril de 2012 15:26 delete

Reinaldo
vou procurar saber sobre outras imagens

Reply
20 de abril de 2012 17:17 delete

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

Reply
21 de abril de 2012 12:04 delete

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

Reply
15 de maio de 2012 08:54 delete

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

Reply
22 de maio de 2012 16:40 delete Este comentário foi removido pelo autor.
22 de maio de 2012 17:07 delete

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

Reply
17 de junho de 2012 13:11 delete

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!

Reply
11 de dezembro de 2012 23:16 delete

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

Reply
12 de dezembro de 2012 00:26 delete

mas não apareceu nada no seu blog?

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

Reply
17 de fevereiro de 2013 21:22 delete

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?

Reply
18 de fevereiro de 2013 00:10 delete

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

Reply
29 de março de 2013 17:25 delete

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

Reply
29 de março de 2013 21:50 delete

Cristiane você achou a pagina do html do blog?

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

Reply
4 de abril de 2013 08:56 delete

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

Reply
4 de abril de 2013 10:57 delete

Cleyton
trocar a cor do que?

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

Reply
2 de maio de 2013 16:53 delete

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/

Reply
2 de maio de 2013 18:28 delete

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

Reply
2 de maio de 2013 21:53 delete

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

Reply
1 de setembro de 2013 02:56 delete

Olá, eu gostaria de saber como troca as imagens que ficam passando em um banner, por exemplo no banner 3D?

Reply
1 de setembro de 2013 09:54 delete

Solange existem diversos códigos que fazem os banners ficar passando a maioria é no formato slide, mas precisa pesquisar por um código para criar slides com banners.

embora alguns efeitos sejam feitos com flash que é um programa de animação mas isso já é bem mais complicado de fazer.

Reply
10 de outubro de 2013 22:21 delete

Gente eu entendi mal ou não funcionou não saiu embaixo de cada postagem, ou e para compartilhar só o blog.por favor me ajudem.http://www.recicladorum.blogspot.com.br/ preciso compartilhar as postagem individuais sera que da obrigado.

Reply
10 de outubro de 2013 22:36 delete

acho que esse código compartilha a pagina atual que a pessoa está navegando, ou seja, só vai compartilhar o post se estiver na pagina dele.

Reply
25 de junho de 2014 19:42 delete

O código funcionava legal. Em todas as páginas do blog. Mas agora, só está aparecendo na página inicial. Como corrigir esse erro?

Reply
25 de junho de 2014 22:46 delete

tem que colocar o código que mostramos dentro de uma condicional b:if ...

veja aqui:
Conteúdo diferente nas paginas do blog

Reply