sexta-feira, 16 de novembro de 2012

Adicionar botões "Curtir" e "Twittar" abaixo do título da postagem

Wazaa! Há algum tempo recebi um pedido para postar um tutorial sobre como colocar os botões "Twittar" e "Curtir" abaixo do título da postagem do blog.
Para adicionar os botões, é muito simples, vamos aos códigos, sem rodeios:

Procure a tag abaixo, com o atalho Ctrl+F:

<div class='post-header-line-1'/>

Logo abaixo dela, cole o seguinte código, e salve seu template.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='float: left; margin: 3px;display: inline;'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div></b:if>

Muito simples. Veja um exemplo abaixo, e se quiser ver como ficaria o resultado no blog, acesse nosso outro blog, clicando aqui, e acesse uma das postagens.

15 comentários:

  1. Como que coloca esse codigo dentro e fora das postagens???

    ResponderExcluir
    Respostas
    1. use este código no lugar do que está por cima:

      <div style='float: left; margin: 3px;display: inline;'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

      Excluir
  2. Obrigaduuuuuuuuuuuu consegui...há tempos que queria colocar os codigos abaixo da postabem Blessed Be..!!!
    Pense num cara legal Esse cara é voce". risos,

    ResponderExcluir
  3. Muito bom leonardo! o problema eh que uso o blogger e a tag

    div class='post-header-line-1'/
    não aparece no código do tema que estou usando.

    Como devo proceder pra alterar

    Abraços

    ResponderExcluir
  4. Oi Leonardo, gostei em fim conseguí um código que fique
    exatamente onde quero, mas não queria que tivesse contage,
    como faz pra retirar, ficar somente os botões com os ícones
    das redes sociais; e tem como colocar de outras redes?

    ResponderExcluir
  5. Infelizmente no meu não funcionou. Encontrei o código certinho no html depois de clicar em "expandir widgets", adicionei o código e fiz todo tutorial certinho mas não funcionou :(

    ResponderExcluir
  6. Comigo também não aconteceu nada, fiz tudo certinho e vi esse tutorial em diversos blogs, porque não tá dando certo?

    ResponderExcluir
  7. Muitoooo obrigada!!!!!
    Você foi a salvação da minha vida!!!
    Sempre que eu colocava os botões eles compartilhavam a página e não a postagem. E também mostravam a mesma numeração de compartilhamentos em todas as postagens! Agora com o seu tutorial ficou tudo certinho!!!
    Valeu mesmo!!!

    ResponderExcluir
  8. Eu estou usando um modelo que também não apareceu o div class='post-header-line-1'/, coloquei só post, coloquei com barra, sem barra e não encontrou. Pode ter caso que não tenha essa div ou esteja com outra nomenclatura? Abraços.

    ResponderExcluir
    Respostas
    1. procure
      :) pesquisei muito e esse também serve,dai coloque o cod embaixo

      Excluir