Mostrar Botões de Compartilhamento no Blogspot

Já mostramos diversos tutoriais sobre botões para redes sociais, mas ainda faltou falar sobre os botões para esses sites e agregadores de links feitos pelo próprio Blogger (Mostrar botões de compartilhamento). Você pode ativar essa opção pela pagina designer do modelo, mas precisa adicionar mais um código html para que funcione realmente os botões para Orkut, Twitter, Facebook e Google Buzz(Botão do Facebook, Twitter, Google Buzz no mesmo Gadget).

compartilhar blogger
Como já dissemos o primeiro passo é ativar esse acessório na pagina designer do modelo clicando para editar as postagens e marcando a opção Mostrar botões de compartilhamento.

Antes de começar recomendamos fazer um backup do HTML do seu blog. Agora entre na pagina editar html, marque para expandir modelos de widgets, procure por <div class='post-header-line-1'> ou <post.body/> e depois adicione esse código logo abaixo:
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

codigo de fonte do blog
Agora clique para salvar e visualize seu blog. Se quiser modificar o lado que os botões aparecem no seu blog volte a pagina editar html (Onde colocar os códigos no blog) e coloque essa linha de código CSS:

.post-share-buttons{float:left}

html do blogger
Do jeito que está os botões ficarão do lado esquerdo das postagens e para colocar do lado direito troque a palavra left por right no código acima.

Essa é mais uma opção para divulgar seu blog nas redes sociais(Botão para as redes sociais - AddThis), mas precisamos lembrar que o principal é ter um conteúdo interessante no blog para que as pessoas tenham motivos para usar esses botões para recomendar suas postagens a outras pessoas.

104 comentários:

  1. Oii!
    Sempre passo por aqui para tirar minhas dúvidas e sempre consigo. Muito obrigada pela ajuda.
    É tanta coisa que dá para colocar em um blog que muitas vezes, fico perdida e com receio de deixa-lo com cara de árvore de natal. Estou indo aos pouquinhos e focando principalmente no conteúdo, o que acho mais importante.
    Obrigada, Rosa.

    ResponderExcluir
  2. Olá! Boa tarde!

    Parabéns pelo teu excelente blog, que já me ajudou bastante.

    Gostaria de pedir se você poderia postar uma nova ferramenta para "efeito neve" caindo sobre o blog, pois o antigo não se adaptou bem aos novos temas do Blogger.

    Aguardo respostas.

    Obrigado, desde já!

    Abraços,

    P.H.

    ResponderExcluir
  3. Olá! Acompanho o dicas para blog e gosto muito de todas as informações. Umas me interessam mais do que outras, mas todas são interessantes ao publico em geral.
    Existe algo nas dicas de você(s) que me chama a atenção: Em todas elas percebo um principio valioso: A Honestidade. Isso para mim é tudo. Parabéns! A Honestidade hoje em dia é rara, mas quando encontrada precisa ser qualificada e valorizada. Continuem assim. Acredito que por isso vocês tem muito sucesso no que fazem.
    Abraços,
    Lila

    ResponderExcluir
  4. Lila Rosana
    obrigado pelos elogios

    Pedro Henrique
    vou procurar algo que funcione bem com os novos templates do blogger, mas tenho que admitir que esses novos modelos apresentam muitos problemas com os códigos que funcionavam perfeitamente em blogs e sites.

    ResponderExcluir
  5. Cara. To aprendendo muuuito c/vcs. Obrigado mesmo

    ResponderExcluir
  6. Muito Obrigada pela dica,não estava conseguindo ativar estes botoes...
    Mais uma vez me ajudou muito :)

    ResponderExcluir
  7. Obrigado, Fabiano.

    Bom domingo e início de semana para vocês!

    P.H.

    ResponderExcluir
  8. O meu comentário não tem nada a ver com o post e por isso pesso desculpas. Mas preciso muito de ajuda. Tenho um blog e recentemente mudei de templante (para o clinic, o nome se não me engano) e gostaria de manter o painel com o menu, slider... porém, ao invés de pequenos resumos de postagens, gostaria de voltar a outra configuração, como a deste blog.

    Aí vai o link do blog para entender melhor a minha situação: www.piseiroso.blogspot.com

    Agradeço desde já, abraço a todos.

    ResponderExcluir
  9. Tiberio Ribeiro
    se trocou o template do blog e não salvou um cópia do antigo não tem como voltar, tente usar nossa pesquisa para achar um resumo da postagem como está no seu blog e pode tentar usar nosso tutorial para desfazer isso.

    ResponderExcluir
  10. não consegui localizar nenhum dos 2 htaml q vc colocou ou <div class='post-header-line-1'

    me ajuda!
    bjos
    seu blog é demais

    ResponderExcluir
  11. Na verdade é uma dúvida... fiz tudo o que você falou ai, mas... como faço agora para colocar link's nesse botões? Eles não ficaram clicáveis!

    Olha só como ficou: http://dicasfreestyle.blogspot.com

    ResponderExcluir
  12. você marcou a opção na pagina designer? tem que clicar para editar as postagens e marcar para mostrar esses botões

    ResponderExcluir
  13. no meu blog esses botoes nao tem cores..tem como colocar cores neles como eles sao?

    abraços

    ResponderExcluir
  14. e como deixa no centro? coloca center?

    ResponderExcluir
  15. isso mesmo é só colocar center, assim:

    <center>código aqui</center>

    ResponderExcluir
  16. Oi tudo bem?
    eu consegui colocar os botões, mas quero que eles fiquem embaixo do post, tipo do lado do link dos comentários sabe? tem como?
    Obrigada.
    www.coisasdecarina.blogspot.com
    bjus.

    ResponderExcluir
  17. mexer na posição desses botões é um pouco complicado, vou preparar um tutorial mostrando os locais certos do html

    ResponderExcluir
  18. Olá.. eu consegui colocar os botões.. mas qdo clico no link dfiz que a pagina que eu procuro não existe...
    gostaria de saber o que está errado...

    ResponderExcluir
  19. infelizmente se aparece com erro não temos como corrigir os códigos internos do blogger

    ResponderExcluir
  20. Queria um post com o tema "Como achar blogs com o mesmo tema para fazer parcerias".

    ResponderExcluir
  21. é uma duvida interessante, vou procurar por algo que facilite encontrar novos parceiros

    ResponderExcluir
  22. estou aprendendo muito com o dicas para blog:
    querem ver o resultado entre no:
    http://mundoanimal50.blogspot.com/

    ResponderExcluir
  23. Oi Fabiano.. não encontrei o caminho... "pagina designer do modelo clicando para editar as postagens e marcando a opção Mostrar botões de compartilhamento."

    vc sabe me dizer se nesses modelos novos do blogger o caminho é o mesmo?.. pq só colar o código que vc forneceu não fica linkado certo...
    obrigada

    ResponderExcluir
  24. é necessário fazer uma alteração de código na pagina editar html do blog, além de marcar a opção na pagina designer

    ResponderExcluir
  25. a alteração eu fiz.. pra marcar a opção é que não to encontrando o caminho

    ResponderExcluir
  26. Michael Jackson I love you most
    para marcar a opção é na pagina designer, clique para editar a postagem é o quadrado maior

    ResponderExcluir
  27. Excelente, me ajudou muito.
    Vocês são os caras.
    Continuem assim.

    ResponderExcluir
  28. Pessoal,

    Vocês são sensacionais, procuro há meses um jeito de colocar esses benditos botões no meu blog, e visitando vocês aqui, procuro aqui e ali, achei esse abençoado post explicando tudo direitinho!

    Parabéns e sucesso sempre para vocês!!

    Cris

    ResponderExcluir
  29. Fabiano, não consigo colocar o código no meu blog,
    os códigos do desing do meu blog é muito grande, não encontrei, será que não tem um jeito mais fácil de colocar?
    Obrigada.
    Silvânia.

    ResponderExcluir
  30. use o ctrl F para achar trechos no html do seu blog

    ResponderExcluir
  31. OLÁ, FABIANO! EU QUERO UMA ORIENTAÇÃO SUA SOBRE BOTÕES... EU USO O WINDOWS LIVE WRITER PARA POSTAR MEU BLOG (BLOGGER), MAS GOSTARIA DE SABER SE HÁ UM BOTÃO PARA O WRITER QUE EU POSSA USAR NO GOOGLE CHROME... POR EXEMPLO, TENHO UM BOTÃO DO TWITTER, DO ORKUT, NO GOOGLE CHROME E QUERIA SABER SE EXISTE UM DO WRITER PARA QUE EU POSSA ABRIR O WRITER PELO GOOGLE, SEM TER QUE MINIMIZAR E ABRIR O WRITER.
    PODE ME AJUDAR?
    VALEU, UM ABRAÇO!

    ResponderExcluir
  32. Anonimo não sei responder sobre botões para o chrome ... ou windows writer... raramente uso esses programas...

    ResponderExcluir
  33. parceiro...sabe dizer pq o botao do orkut do addthis nao ta funcionando mais?abraços

    ResponderExcluir
  34. o botão enviar para orkut está dando problemas faz tempo... parece que o site(orkut) perdeu o interesse nele

    ResponderExcluir
  35. Fabiano,

    Obrigada por mais essa ajuda.

    ResponderExcluir
  36. Infelismente não consegui colocar os botões. Fui em Design mas não aparece. Eu uso o Blogguer/Blogspot. Help!

    ResponderExcluir
  37. parece que esses botões padrão estão com algum problema, também não consegui colocar em um dos blogs que tenho... o jeito foi usar o addthis

    Botão para as redes sociais - AddThis

    ResponderExcluir
  38. no meu blog ficou na parte de cima da postagem e invisível, o que eu fiz de errado?

    ResponderExcluir
  39. Cris Mota
    provavelmente apagou algum trecho errado... infelizmente não tenho como explicar melhor

    ResponderExcluir
  40. Oi Fabiano,

    Obrigada pelo seu trabalho, tenho uma pergunta, Eu coloquei o botão de compartilhamento (usei sua dica), agora aparece um outro botão ao lado dele, não sei o que significa, pode me ajudar?
    Abs
    Ivy Freitas

    ResponderExcluir
  41. Ivy Freitas
    acabamos de publicar um tutorial falando sobre esse novo botão, ele é do google é uma especie de botão curtir, veja aqui: Colocar Botão +1 do Google no Blog

    mas certamente ele será util para seu blog

    ResponderExcluir
  42. Olá,
    Como faço para colocar esses botões na parte inferior da postagem.
    Tentei pelo Design - postagem...Mas não deu certo.
    Quero que fique assim como a sua postagem.
    Afinal,alguém só compartilhará algo que leu.
    Obrigado desde já!

    ResponderExcluir
  43. se não aparecer no seu template tente colocar na pagina editar html o código que mostramos

    ResponderExcluir
  44. Olá, adorei seu passo a passo, deu tudo certo, porém os botões estão acima do poste, gostaria de colocá-los em baixo de cada poste, vc poderia me dar mais uma ajudinha? Por favor!!
    Desde já agradeço.
    http://anjos-anjos04.blogspot.com/

    Me mende uma mensagem!!!

    ResponderExcluir
  45. aqui falamos para colocar o código depois do trecho header-line-1 se procurar no seu html achará esse mesmo trecho com o numero 2 ou 3 então se colocar o código depois de um deles ficará embaixo da postagem

    ResponderExcluir
  46. Fabiano

    Infelizmente não consegui.
    Nem imagina como preciso...
    Forte abraço.
    Muitas felicidades.

    e.mensaleiro@gmail.com

    ResponderExcluir
  47. Eu troquei o template do blogspot e sumiram todos os botões de compartilhamento, procurei por ai a fora, mas nada dava certo! Só fui encontrar aqui!! Com as explicações fáceis e objetivas!! era tudo que eu precisava! OBRIGADÃO!!!

    ResponderExcluir
  48. amigo, gostaria que vc me ajudasse, os botões ficaram na parte superior do post. Eu fiz exatamente como recomendado...

    visaoevandrolima.blogspot.com

    Pode me ajudar, por favor?

    ResponderExcluir
  49. Evandro Lima
    para ficar no topo coloque o código antes do < post.body >

    ResponderExcluir
  50. Fabiano,você é uma pessoa muito bacana, ensina,compartilha.Agradeço muito, vc já me ajudou bastante.Vou pedir sua ajuda mais uma vez, faz tempo que estou tentando colocar estes botões no meu blog, tentei agora,mas ñ deu certo.
    Você faz ideia do que aconteceu?pois fiz exatamente como vc instruiu, dá uma forcinha + uma vez...
    Um forte abraço

    ResponderExcluir
  51. na maioria funciona normalmente, mas já tentei colocar em alguns templates e não deu certo... acho melhor usar o addthis

    ResponderExcluir
  52. Fabiano,conseguir colocar os botões.
    Sabe o que era? eu já tinha um antes só do twitter,aí eu excluir e coloquei este.
    Valeu mesmo! Você é muito especial para nós blogueiros inexperientes e para os experientes também.Você não é uma pessoa egoísta, tenta ajudar,ensinar.Que Deus te abencoe e te dê bastante saúde.
    Um abraço forte!

    ResponderExcluir
  53. maravilhoso este blog, caraca, nunca pensei que iriam ensinar os "truques" de verdadeiros mestres, pena que não posso postar o endereço do meu blog, senão postaria, está lindissimo, parece com o novo designer do baixaki, kkkkkkkkkkkk!

    ResponderExcluir
  54. Já tentei tudo quando é tutorial , e os botões de compartilhamento do meu blog não ficam certo.
    Ele fica no lugar certo, que é no fim do post, mas fica invisível e todo bagunçado.
    www.bugigangazdanet.blogspot.com
    Quem puder me ajudar por favor responde aqui ou manda um e-mail por favor.
    natalia.ss10@gmail.com

    ResponderExcluir
  55. Natalia Sousa
    em alguns templates parece que sempre dá erro esses botões padrão do blogger....

    por isso já fiz varios tutoriais mostrando outros botões de compartilhamento, por exemplo o addthis que uso atualmente: Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais

    ResponderExcluir
  56. Olá fabiano, eu gostaria de saber como coloco este acessorio que voce tem em todas as postagem que no seu aso o titulo é Outros tutoriais para ajudar Blogueiros, eu queria saber como que se coloca este acessorio, mais claro com outro nome

    ResponderExcluir
  57. ☠Thais Caroline ✔✖
    aquilo é feito com o site linkwithin, veja aqui Mostrar assuntos relacionados no blog

    ResponderExcluir
  58. Oi Fabiano!

    Obrigada por mais essa dica.
    De primeira o código não funcionou, ele ficou invísivel, mas aí fiz o seguinte:

    1 - Fiz uma limpa no meu HTML e tudo o que estava relacionado a share eu apaguei;

    2 - Add antes de ]]>, esse trecho:

    .share-button {display: inline-block;}

    3 - Segui o seu passo a passo e aí sim, deu tudo certo!

    Muito obrigada!Dani

    ResponderExcluir
  59. Dani
    você disse: Fiz uma limpa no meu HTML

    isso é uma ótima dica e não somente para o assunto deste post, mas para tudo no blog...

    ResponderExcluir
  60. cara vou divulga seu blog no meu o seu blog é muito bom

    ResponderExcluir
  61. no meu nao pegou esse...queria tanto por esses que jah vem com o blog ;/

    ResponderExcluir
  62. ebaa..consegui...vlww
    mais kd o botao do orkut? n tem
    no outro template meu tinha ;/

    ResponderExcluir
  63. no meu nao ta aparecendo nem o orkut neo o +1 ;/

    alguma solução?
    abraços

    ResponderExcluir
  64. @Soh Pagode pode ser o seu template que está com algum erro, se colocou os códigos que mostramos era para aparecer o botão

    ResponderExcluir
  65. eu acho que jah sei pq... deve ser pq no html nao tem o codigo do orkut e nem do google 1+
    só tem do mail,blogger,twitter e face...acho q tem q acrescentar os que falta... vc tem os codigo igual a esse?

    ResponderExcluir
  66. @Soh Pagode por isso gosto do addthis ele tem mais opções e se modifica conforme o visitante, por exemplo se clicar no sinal de + e recomendar nossa postagem em alguma outra rede que não esteja aparecendo na proxima vez que entrar em uma de nossas paginas essa rede aparecerá automaticamente, isso é uma grande vantagem pois quem recomenda uma vez numa rede tem a tendencia de fazer novamente

    ResponderExcluir
  67. mais esse addthis nao pesa o blog?
    eu usava ele,mas sentia q pesava o blog ;/
    consegui o codigo do orkut em outro template..mais no +1 nao consigo ;/

    ResponderExcluir
  68. o ruim desse addthis que eu coloca na pagina inicial né, daí cada postagem fica com os botoes em baixo...mais na hora que vou compartilhar,ele só compartilha a pagina inicial do blog e nao a postagem, entende?
    pra compartilhar a postagem tenho que entrar na msm ;/
    entendeu?
    tem como fazer com que compartilhe a postagem?

    ResponderExcluir
  69. @Soh Pagode sim do jeito que usamos ele compartilha a pagina atual, inclusive a pagina inicial.

    mas pode usar outro código para mostrar os botões somente no final da postagem, alias publicamos hoje sobre isso: Barra com Botões Curtir, Google +, Retweet e Hack Leia mais

    lá não falamos sobre o addthis, mas pode ser usado no lugar de qualquer botão daquele código

    ResponderExcluir
  70. oi amigo, olha mudei o templeste e tem os botoes mas não aprecem e tentei mudar no htmil e não funciona. Tem mais alguma opção?

    Aguardo

    Boa noite

    ResponderExcluir
  71. o código é só esse e marcar a opção na pagina modelo

    ResponderExcluir
  72. oi Fabiano, no meu blog apareceu acima e a baixo do post, como faço para que fique só a cima?

    ResponderExcluir
  73. Leninha - LTScrapsAnimados
    provavelmente você colocou o código duas vezes, tem que achar e apagar um deles

    ResponderExcluir
  74. eu fikei muito tempo tentando achar o codigo pra editar o html mais nao achei oq eu fao?

    ResponderExcluir
  75. use o ctrl f para procurar.

    mas use poucas palavras senão pode não achar por causa de espaço em branco ou algum outro detalhe

    ResponderExcluir
  76. Vejo que quando eu clino no do Facebook, na janela que se abre, em vez de aparecer uma pequena parte da postagem, aparece o último comentário.

    É assim mesmo? Sei que a pessoa que compartilha pode editar, mas acho quase ninguém faz isso, então queria que já fosse com parte do começo da postagem.

    Esse código aí é para resolver isso ou só para eles aparecerem (o que não é meu problema, pois aparecem).

    ResponderExcluir
  77. acho que não temos como editar ou controlar o que acontece quando clica no botão compartilhar

    ResponderExcluir
  78. Vc sabe como tirar os botões de compartilhamento da pagina inicial e deixá-los somente quando abrir a postagem?

    ResponderExcluir
  79. Cássio Santiago
    tente usar o código dos botões deste jeito:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div class='post-share-buttons'>

    <b:include data='post' name='shareButtons'/>

    </div>

    </b:if>

    é como fizemos aqui Conteúdo diferente nas paginas do blog

    mas isso só vai mostrar os botões na pagina das postagens. Na pagina de marcadores não aparece.

    ResponderExcluir
  80. era para funcionar.

    mas consegui salvar o código ou deu erro de html?

    ResponderExcluir
  81. na pagina individual da postagem, aparece o botão duplicado

    ResponderExcluir
  82. tente usar o ctrl F e ver se não tem duas vezes o mesmo código dos botões, provavelmente é esse o problema

    ResponderExcluir
  83. Não consegui filho, mas estou com problemão de saude em familia. uma outra hora eu tento...

    ResponderExcluir
  84. Olá tudo bem?
    Quando compartilho no facebook uma postagem, só aparece o título da postagem mas nao aparece o resumo, como vejo em outros compartilhamentos. Voce sabe como faco para mudar isso?
    Obrigada!!

    ResponderExcluir
  85. Fabiano como faço para excluir os botões de compartilhamento padrão do Blogger? Já desmarquei, só que continua aparecendo...Acredito que só pelo HTML isso será possivel. No aguardo.

    ResponderExcluir
  86. tente achar esse código que mostramos no seu html e apagar ... assim os botões não aparecem

    ResponderExcluir
  87. Fabiano quero excluir esses botões do meu blog
    Qual a parte do código tenho que apagar?

    ResponderExcluir
  88. para retirar os botões é só desmarcar a opção na pagina layout clicando para editar as postagens.

    ou apagar o html que aparece na segunda imagem deste tutorial
    http://3.bp.blogspot.com/_-v7nVhXnPEc/TMLOlTitWlI/AAAAAAAABm4/Qgu6ar136eI/s400/blogger-codigo-fonte.jpg

    ResponderExcluir
  89. Já tentei essas duas opções, e não é simples assim...
    Dá erro sempre!
    Não tem outra parte em que podemos apagar essa "coisa" meu filho?

    ResponderExcluir
  90. teoricamente deveria ser possivel apagar o html. Quando você tentou veja se não apagou uma div junto por engano..

    pode também usar o estilo:

    .post-share-buttons{display:none}

    em vez de float:left como está no exemplo do tutorial.

    ResponderExcluir
  91. Deu certinho com essa opção .post-share-buttons{display:none}
    colocado antes de Body{
    Aff... Suei aqui!
    Brigadim por mais essa Fabiano!

    ResponderExcluir
  92. Fabiano, acho que me torno até inconveniente com tanta dependência, mas preciso de mais um ajudinha.
    No outro blog, esses botões foram colocados pela Share e configurados, mas não preciso deles num blog que se tornou particular. O problema é que esqueci onde foi colocado esse código. Pode me dizer onde?

    ResponderExcluir
  93. o código deve estar na pagina editar html ou em um gadget, veja aqui:Achar e Resolver Problemas com Códigos HTML no Blog

    infelizmente o unico jeito é achar e apagar o código.

    ResponderExcluir
  94. Olá Fabiano!
    Esses shares do Blogger são bem úteis, mas os disponibilizados pelos sites de compartilhamento são mais completos.
    []'s

    ResponderExcluir
  95. eu estou tendo esse problema apenas no google chrome.

    ResponderExcluir
  96. se o código está certo no seu blog tente excluir o histórico de internet porque pode ser erro no carregamento da pagina

    ResponderExcluir