Botão: Twitter, Curtir, Compartilhar e +1. Blogger.


Mais uma dica para os blogueiros que seguem meu blog, o blogger já possui botões padrões para compartilhamento que todo mundo já conhece, mas a questão é que vez ou outra trocamos o template e estes botões padrões não estão mais disponíveis. Então a solução é procurar na web os códigos dos botões para serem adicionados e encontramos muitos códigos e soluções externas como o Addthis, um site em que você cria o código e adiciona ao blog como se fosse um gadget. Mas o meu caso foi mais complicado, o addthis bagunçou o meu template, tentei adicionar somente o código do addthis através da edição em Html, ficou organizado bunitinho (apesar de ter ficado em inglês) mas os botões do facebook não funcionavam corretamente, então através de muitas pesquisas consegui o meu código simples e fácil, o que resultou nisto:



Vou passar o código e depois explico as possibilidades de editá-lo:

Painel do blogger > Modelo > Editar html > Aperte Ctrl + F

Cole o seguinte conteúdo para encontrá-lo: <footer class='post-footer'>

Encontrada a tag acima cole o código abaixo dela:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br>
<div style='float:right; padding:3px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='medium'/></div>
<div style='float:left; padding:3px;'>
<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:81px; height:20px'/>
</div>
<div style='float:left; padding:0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Compartilhar</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<div style='float:left; padding:3px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='Blog Nataniel Souza' href='http://twitter.com/share'>Twitter</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</br>
</b:if>

Agora vamos as explicações...

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

Este código serve para esconder os ícones da página inicial.

<br>

Esta chave serve para isolar o conteúdo, por exemplo, no meu blog além deste código de botões de compartilhamento eu tenho o código de Artigos relacionados o qual eu intitulo de "últimas postagens" que também fica localizado após a chave <footer class='post-footer'> e se eu não utilizar a chave <br> tanto o código de botões como o de postagens vão se misturar!

<div style='float:right; padding:3px;'>

Todo botão começa o seu código com essa chave, por tanto você verá que há 4 dessas chaves no código que lhe passei. Onde está escrito "Right" é lado em inglês que o botão será orientado. E o "padding: 3px" determina o deslocamento na vertical, do botão. Para deslocá-lo basta ir alterando o número.

No caso do curtir, você também pode alterar o "width:81px" e "height:20px" o primeiro determina o comprimento do espaço reservado ao botão, abaixo de 81 você já pode ir tirando, por exemplo, o balãozinho de números de pessoas que curtiram. O segundo determina a largura do espaço dado ao botão.

Onde está escrito "Compartilhar" pode-se escrever o que quiser. Este espaço está destinado ao que você quer que apareça no botão do facebook.

No botão twitter, aonde está 'Blog Nataniel Souza' você pode trocar pela frase que você quer que apareça depois de "via", e aonde está 'Twitter' é nome que aparecerá no botão.

No caso do +1 também pode-se alterar o tamanho do botão. Onde está escrito "medium", pode-se colocar "small" para pequeno e removendo a linha <g:plusone size='medium'/> o botão passa a ter o tamanho padrão (tamanho grande).

E mais uma dica, para postar os códigos html utilizei o site blogcrowds.com é só colar o código e ele lhe passará a versão que deve ser colada na postagem!

É isso aí galera, espero que o post tenha sido útil! Aproveitem e clique em twitter, curtir, compartilhar e também no +1! rsrsrs Abraços!


Previous Post
Next Post

post written by:

10 comentários:

  1. Olá! Poderia me ajudar? Adicionei esse código mas o nome do botão compartilhar ainda está em inglês, Share. Saberia me dizer o que pode ter ocorrido?

    Grato desde já.

    ResponderExcluir
    Respostas
    1. Amigo desculpe a demora em respondê-lo, mas vc já deu uma olhada nos botões atualizados?

      http://natanielsouza.blogspot.com.br/2012/08/colocar-curtir-enviar-tweet-e-1.html

      Qualquer dúvida estamos por aqui! :>)

      Excluir
  2. Parceiro, agora mudou completamente o modo de exibição do html do blogger, poderia me ajudar, não da mais para estender o template.

    ResponderExcluir
    Respostas
    1. Não tem erro amigo, vc deve procurar o local de sua escolha para posicionar os botões. Eu recomendo no final da postagem, para isso ponha após "post-footer", para procurar agora no novo Blogger é necessário clicar em "editar modelo", depois clicar dentro da área do código para então apertar "ctrl+f". Qualquer dúvida estamos aqui (o)

      Excluir
  3. vc sabe se tem como curtir a materia?pq no meu blog qd vc clica em curtir, nao aparece nada no face da pessoa e o compartilhar, nao compartilha a materia e sim o meu blog. Conseguiu me entender?rsrs

    ResponderExcluir
    Respostas
    1. Por favor, verifique este post: http://natanielsouza.blogspot.com.br/2012/08/colocar-curtir-enviar-tweet-e-1.html

      Excluir