segunda-feira, 21 de junho de 2010

Como colocar e ativar os botões de compartilhamento do Blogger (atualizado 27/04/11)

Atualização 27/04/2011: Foi adicionado o botão Promova no Orkut. Fiz uma atualização no código abaixo! Leia mais aqui.
Atualização 24/06:
Os botões de compartilhamento estão disponíveis para todos os usuários do Blogger, conforme anunciado aqui no Blogger Buzz. De acordo com o anúncio, a equipe do Blogger planeja incluir mais serviços no futuro (quem sabe Digg, Myspace, Orkut(blergh!!), Yahoo Meme, entre outros). Seria interessante a possibilidade de podermos adicionar serviços além do que eles sugerem. Vamos esperar para ver.

Conforme eu já tinha descoberto antes, o Blogger in Draft adicionou mais uma funcionalidade aos seus usuários, os botões de compartilhamento, principalmente para o Twitter, Google Buzz e Facebook, como podem ver acima deste post.

Caso seu template não seja nativo do Blogger, você terá que incluir manualmente o código abaixo, abaixo da <div id='main-wrapper'>(vá em painel de controle >> Design >> Editar HTML >> marque expandir modelos de widgets, use control + F para localizar.)

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:post.sharePostUrl'>
      <a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&am<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
  </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
  </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
  </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
  </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
  </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=415,width=690&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
  </a></b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

Para ativar, vá no painel de controle do Blogger in Draft >> Design >> Page elements(elementos de páginas) e clique em Editar nas Postagens do Blog:

Marque a caixinha, reposicione onde você quer que os botões fiquem e clique em Editar.

Na ocasião em que publiquei a novidade, o código da ativação ainda não estava presente nos templates, mas ele já apareceu para todos que tem templates nativos do Blogger. Caso seu template seja nativo mas modificado ou não nativo, você deve incluir manualmente esse código. Graças ao @pizcos, do Pizcos Blog , ele me alertou no Twitter (Bendito Twitter, e ainda tem gente que "acha" que ele vai matar os blogs), sobre qual código deveria ser colocado no template.

Vá em Painel de controle >> Design >> Editar HTML >> Clique em expandir modelos de widgets e procure (control + F) por <p class='post-footer-line post-footer-line-3'> ou <div class='post-footer-line post-footer-line-3'> e cole imediatamente após o código abaixo:

<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>

E salve o seu template. Pronto. Os botões de compartilhamento já aparecem em cada post de seu blog.

Eu fiz uma modificação nesses botões, eu só queria que eles aparecessem apenas nos posts, e não na página inicial. Para tanto apliquei uma condicional, ficando assim o código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
</b:if>

E acabei colocando-os acima dos posts, abaixo do título manualmente, já que nas opções de postagens, não consegui reposicioná-lo (culpa das inúmeras modificações que fiz no template, apesar dele ser nativo.). Se alguém estiver com esse problema, vá em Painel de controle >> Design >> Editar HTML >> Clique em expandir modelos de widgets e procure (control + F) por <div class='post-body entry-content'> e cole o código acima abaixo desta linha.


Para terminar, um bordão que nunca canso de dizer: "CHUPA WORDPRESS!!!"

Eu kibei este post... DE MIM MESMO! Logo estou perdoado, certo?

Agradeço ao @pizcos pela ajuda e ao @hordones pela citação antes feita. A Blogosfera é realmente um lugar de cooperação e de amizade! E eu só tenho a aprender com isso.

78 comentários:

  1. Oi Cidão,

    Eu activei os botões, mas não aparecem no meu blog. Devo adicionar o código que forneceste? Estou espantada porque estou usar os novos templates do Blogger...estranho.

    Bem, ficarei à espera da tua resposta.
    E não, o Twitter jamais substituirá os blogs.

    Beijos

    ResponderExcluir
  2. Afe, esqueci de subscrever para ler a resposta...vê se pode!

    Ciao

    ResponderExcluir
  3. @Max Coutinho

    Você verificou a existência do código acima no template? Se não, terá que incluir manualmente mesmo. :)

    ResponderExcluir
  4. Oi Cidão,

    Obrigadão pela dica! Vou fazê-lo nos dois blogues.

    És um verdadeiro gato!

    Ciao

    ResponderExcluir
  5. Tá lá! Ativei os tarzinhos dos botões de compartilhamento graças às dicas!

    ResponderExcluir
  6. E quando o blog não é nativo e também não possui a tag div id='main-wrapper'? O código deve ser incluído onde? Pois o meu layout não possui essa tag, já procurei com o ctrl+F, já li LINHA POR LINHA e simplesmente não existe essa tag no meu layout. Quero saber o que fazer nesse caso. Obrigada!

    ResponderExcluir
  7. @May Ishii

    Então procure essa linha:

    <b:includable id='backlinks' var='post'>

    E cole o código acima dela. :)

    ResponderExcluir
  8. Obrigada, foi muito útil pra mim.

    ResponderExcluir
  9. Muito obrigado! Ótimo post, completo!

    ResponderExcluir
  10. Vlw pela ajuda amigo, graças as suas dicas consegui recolocar os botões que sumiram depois que troquei de template. Vlw mesmo...

    ResponderExcluir
  11. Olá...
    Já tenho todos os botões no meu blog, mas... (sempre tem um 'mas'), gostaria de colocar também um botão de redirecionamento pro meu canal no Youtube.
    Como poderia fazer? Obrigada desde já.
    Seu blog é ótimo, parabéns pelo trabalho.

    ResponderExcluir
  12. @CrisViduani


    Redirecionar para o YouTube uma postagem? Não tem sentido. Agora você pode criar um link em algum lugar no blog para alguém visitar o seu canal. E aí você escolhe uma imagem e "linka" . Um abraço!!!

    ResponderExcluir
  13. Olá. Tentei instalar ele em meu blog. Ele até chega a aparecer, mas os links dão erro.

    A url de destino fica assim: http://nomedoblog.blogspot.com/#target=nomedoserviço

    E reparei que no seu, a url é baseada na ID do blog + ID do post + o serviço selecionado.

    Caso possível, gostaria que me ajudasse.

    Aguardo seu retorno, abraço!

    ResponderExcluir
  14. Obrigada! Se não fosse sua ajuda, eu jamais teria conseguido colocar os botões de publicação nas minhas postagens.
    Beijos,
    Ben.

    ResponderExcluir
  15. Puxa vida, o meu tinha sumido faz tempo e eu não conseguia colocar novamente de nenhum jeito e desse jeito que você explicou é super fácil e deu certinho.
    Obrigada!!!
    Aninha

    ResponderExcluir
  16. Adoreiiii os seus créditos aparecerem quando eu dei ctrl+c. Como faz isso??

    ResponderExcluir
  17. Olá, gostei muito das suas dicas, sei que esta é uma postagem já antiguinha, mas é que estou com problemas para ativar esses botões de compartilhamento no meu blog.

    Eu marquei a opção de ativar os botões na janela de editar postagens do blog, mas mesmo assim eles não aparecem. Tentei colocar os códigos que você forneceu, mas quando tento visualizar, o blogger dá uma mensagem de erro.

    Ficaria imensamente grato se puder me ajudar, meu blog é este:

    http://mais1bg.blogspot.com/

    Agradeço desde já!

    ResponderExcluir
  18. @Luís Sérgio


    Os códigos acima são do próprio blogger, que caso você não os tenha, terá que incluir manualmente, nos locais exatos que eu explicitei.
    Nesse caso, não há o que modificar.

    ResponderExcluir
  19. @SARASWATTI


    Obrigado digo eu, por visitar e usufruir deste meu humilde blog!!! :)

    ResponderExcluir
  20. @Lilian Schineider



    É uma proteção contra cópias de conteúdo (Procure pelo Tynt no Google). No caso de códigos que disponibilizo, pode deletar. :)

    ResponderExcluir
  21. @M. Murad



    Os códigos que disponibilizei são nativos do próprio Blogger, e que muitas vezes não aparecem ou não dão certo quando se usa um template que não é nativo, como o seu, por exemplo. Muitas vezes quando mando procurar no template tal linha de código, eles podem não existir num template pego de outro site, aí o problema é sério, porque tem que encontrar as linhas equivalentes, e isso só analisando todo o seu template minuciosamente.

    ResponderExcluir
  22. Olá, muito bom seu post, já tinha tentado colocar esses benditos botões desde o começo, e só agora deu certo, valeu!!!!

    ResponderExcluir
  23. Coloquei a linha da class='post-share-buttons acima da

    e recebi este erro:

    O widget id "Blog1" não pode conter o elemento: "div". O widget só pode conter elementos b:includable.

    Alguma idéia? Desde já muito obrigado. Claudio

    ResponderExcluir
  24. @Pluspixel


    Mas você não está colocando um widget. Tem alguma coisa errada. O ódigo tem que ser colocado direto no template em design>>editar html.
    Se você colocar via elementos de páginas irá dar erro sim.

    ResponderExcluir
  25. Aqui não encontrei o ponto final para o meu problema (culpa do meu template não ser nativo), mas depois de muito meditar nas suas dicas, encontrei uma maneira de mostrar o compartilhamento. Enfim, Crazyseawolf blog's foi uma luz no fim do túnel.
    Muito obrigado!

    ResponderExcluir
  26. Aqui não encontrei o ponto final para o meu problema (culpa do meu template não ser nativo), mas depois de muito meditar nas suas dicas, encontrei uma maneira de mostrar o compartilhamento. Enfim, Crazyseawolf blog's foi uma luz no fim do túnel.
    Muito obrigado!

    ResponderExcluir
  27. Olá bom dia!!
    Então, coloquei a bendita barra para compartilhar e foi tudo ok!!!
    Mas.... antes de fazer isto tinha clicado em um ícone no blog de uma amiga e apareceu um ícone +1 Pleasseee tem como retirar!!??? Já fiz de tudo e nada!!! Me ajuda aí!!! Vou aguardar sua resposta!!!
    Grata,

    Caroline
    http://bycarolinermoreno.blogspot.com/

    ResponderExcluir
  28. @Caroline Moreno


    Esse novo ícone é o Google +1, o botão "Curtir" do próprio Google. Ele agora faz parte do conjunto de botões de compartilhamento do Blogger.

    ResponderExcluir
  29. Oii, Ta certo.. mais tem como tirar ele???
    Obrigadaaa!
    CaroL

    ResponderExcluir
  30. olá, fiz os passos q vc ensinou para os botoes de compartilhamento.. e realmente eles foram colocados lá... mas estao invisíveis... qdo se passa o mouse em cima do lugar onde eles ficam, é possivel identifica-los, mas eles permanecem invisiveis... o q faço?

    felipeheiderich.blogspot.com

    paz

    ResponderExcluir
  31. @Caroline Moreno


    Se ele apareceu automaticamente junto com os outros botões, não.

    ResponderExcluir
  32. @Felipe Heiderich


    Estranho, eles não ficam invisíveis, mas não ficam coloridos. Apenas quando o mouse é passado por cima é que adquire a cor.

    ResponderExcluir
  33. Cidão, graças ao teu tutorial eu finalmente consegui colocar os botões de compartilhamento para aparecerem só nas postagens e não em todas, na página principal. Já havia colocado uma vez e ficou horrível. Mas eu tentei colocar logo abaixo do título do post e não consegui, não achei o código :/

    Beijo e obrigada, meu querido!!!

    ResponderExcluir
  34. Perfeita a diga! Deu super certo! Valew mesmo brother!

    ResponderExcluir
  35. Brow no meu HTML contem o primeiro código, só q quando ativo os botoes, não aparecem nas postagens :s
    Oq faço?

    ResponderExcluir
  36. Aconteceu isso comigo: O widget id "Blog1" não pode conter o elemento: "div". O widget só pode conter elementos b:includable.
    E eu estava mexendo Diretamente no Template Html.. Poderia me ajudar? Meu template foi criado pelo programa Artistter!

    ResponderExcluir
  37. Adorei mesmo a dica! Quando ativei os botões eles não apareceram, então segui sua dica e salvei. De imediato apareceram ao final das minhas postagens. Show de bola!

    Valeu mesmo!

    ResponderExcluir
  38. oi tentei adicionar o code e quando salvo diz

    "Não foi possível analisar o seu modelo por não estar bem formado. Certifique-se de que todos os elementos XML estão fechados correctamente.
    Mensagem de erro de XML: The reference to entity "am" must end with the ';' delimiter.
    Error 500"

    O que fazer pois queria muito adiconar os botoes

    ResponderExcluir
  39. Foi a única dica que deu certo
    Obrigado

    ResponderExcluir
  40. Não consegui. Aliás, esse processo está sofrível. Há muitas horas estou em cima desse html, como não tem essa linha que vc menciona, não consigo encontrar um lugar para colocar o código.

    O template não é nativo do blogger, tentei colocar nas linhas de "content", mesmo assim não aparece.

    teria alguma forma de inserir os botões manualmente em algum lugar do código?

    ResponderExcluir
    Respostas
    1. Como o seu template não é nativo do Blogger, fica difícil ajudar. As linhas de código que sempre menciono em alguns tutoriais estão presentes tantos nos templates clássicos quanto nos do Designer de modelo.
      Sugiro que você contate o autor do template para obter as informações que você precisa.

      Excluir
  41. Valew muiiiiiiiito cara! Resolveu meu problema, que já durava meses! Serviço de utilidade pública!

    ResponderExcluir
  42. Não estou conseguindo de jeito nenhum! Já visitei diversos sites; tentei diversos códigos e nunca dá certo; Eu fiz tudo certinho no primeiro código q voc mandou, e apareceu uma mensagem de erro, dizendo para eu me 'certificar de q todos os elementos XML estão fechados adequadamente'. To tentando tbm, colocar botões do ShareThis e como os do Blogger, os botões não aparecem! O único q chegou a aparecer foi um do AddThis, porém aparecia no canto superior do blog, sendo q preciso abaixo de cada post.
    Espero que algm consiga me ajudar!

    ResponderExcluir
    Respostas
    1. Os erros aparecem porque os códigos não devem estar sendo colocados no lugar certo.
      Quanto ao Addthis, ele deve ser colocado no local onde indiquei no post também.
      Se bem que o AddThis não funciona direito em meus blogs, então nem mais tento usá-lo.

      Excluir
  43. o meu tbm nao é nativo aparece tudo mais no blog n aparece ja tentei de tudo mais enfim espero um dia ter uma luz kkkkkkkkkk

    ResponderExcluir
    Respostas
    1. Esse é o problema dos templates não nativos. Às vezes certas linhas de códigos não existem e infelizmente você tem que contatar a pessoa que disponibilizou o template.

      Excluir
  44. Valeu meu caro! Finalmente uma solução efetiva. Viva a blogosfera!!!!

    ResponderExcluir
  45. Respostas
    1. Como não deu? Visitei seu blog e os botões estão lá. Não entendi!

      Excluir
    2. Oi, Aparecido.

      Depois de muito procurar, testar e falhar, consegui pegar as dicas daqui e funcionaram:

      http://www.dicasparablogs.com.br/2011/11/curtir-google-retweet-leia-mais.html

      Só que mudei um pouquinho o código para desaparecer a cor de fundo e a borda.

      Tchau

      Excluir
  46. Parabéns pelo post. Estava procurando isso desesperadamente, ajudou muito. Agora os botões só aparecem na página da postagem como eu queria!! Obrigada :D

    ResponderExcluir
  47. Seu site sempre foi chou de bola.
    Seu site é chou de bola.
    Seu site sempre vai ser show de bola.
    PARABÉNS.
    http://www.hinologica.com.br/

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google