Eu não gostava muito desse modo de botões, que para funcionar, deve ser incluído no HTML do Blogger e aparece em cada post parecendo fazer parte dele e mais próximo do artigo, mas atendendo a vários pedidos depois que postei os botões de compartilhamento do blogger e os códigos para usar como gadget de compartilhamento(para blogs e sites), similar aos que mostro abaixo e, que eram bem mais fáceis de instalar, agora vou mostrar esse novo modelo, que é apenas para o blogger.Será um pouco difícil de adicionar esses botões, para que seu blog não pese muito, uma parte vai no HTML e outra vai ser na parte de gadgets, e, como eu não sei em que parte do seu blog você quer que os botões apareçam, você terá que ler e fazer com atenção, e, também pelas opções que teremos.
Onde deve ser adicionado no HTML do blogger?
Não sei, depende de onde você quer que apareça, e, em certas áreas o blogger 'não aceita', dá erro, é legal, primeiro, você colocar o código de seu modelo em um blog de testes e experimentar nele antes, até para ver onde é possível acrescentar os códigos abaixo e onde os botões aparecerão.Passo 1Como adicionar códigos no HTML do blogger:
Antes, quero alertar que são poucos os casos que se adiciona códigos diretamente no HTML do blogger, existe a opção de adicionar gadget do tipo Html/JavaScript, mas para esses botões, precisaremos fazer de ambos os modos.Para códigos que vão diretamente no HTML:
Acesse o > Blogger
Vá em > Design ou Modelo(para quem usa nova interface do blogger)
Em > Editar HTML ou botão HTML(nova interface do blogger)
Baixe seu modelo clicando num link que diz Baixar modelo completo e salve ele(dúvida, clique)
Marque a opção > Expandir modelos de widgets, e, depois de adicionar os códigos, não esqueça de salvar o modelo na página do blogger.
Passo 2Locais onde pode tentar adicionar os códigos no HTML do blogger
Acima mostrei como acessar o HTML, agora mostrarei onde, no HTML do blogger, pode ser possível adicionar alguns códigos e onde eles irão 'aparecer', as linhas de códigos abaixo tem semelhanças, as vezes, até se repetem mais de uma vez no HTML, talvez algumas não existem em seu modelo, e, como cada modelo é diferente, talvez pela quantia de elementos que foram adicionados ou quais atualizações o blogger efetuou nele..., devido a essas diferenças, eu não tenho como saber exatamente onde você vai adicionar os códigos dos botões e onde eles irão aparecer, e, nem sei dizer quais dessas áreas pode não aceitar códigos, sendo assim, você terá que testar os códigos que vou passar mais abaixo, para os botões. Veja onde pode colocar códigos e onde podem aparecer:<div class='post-header'>
O que estiver logo abaixo desse código aparece abaixo do título do post<div class='post-header-line-1'/>
O que estiver logo abaixo desse código aparece abaixo do título do post<div class='post-header-line-2'/>
O que estiver logo abaixo desse código aparece abaixo do título do post<div class='post-footer'>
O que estiver logo abaixo desse código aparece abaixo do post, no final do artigo.<div class='post-footer-line post-footer-line-3'>
O que estiver logo abaixo desse código aparece abaixo do post<div class='post-footer-line post-footer-line-2'>
O que estiver logo abaixo desse código aparece abaixo do post<div class='post-footer-line post-footer-line-1'>
O que estiver logo abaixo desse código aparece abaixo do post.Para encontrar essas linhas de códigos, use as duas teclas de atalho Ctrl + F, abaixo de uma dessas linhas de códigos, acrescente os códigos de botões, salve o modelo e vai no blog ver onde os botões aparecem, lembrando que cada linha de código acima, pode estar em dois lugares no HTML.
Passo 3Código de botões twitter, curtir, G+1 e Orkut, que vai no HTML do blogger
Como eu disse antes, essa parte do código é para o HTML do blogger, abaixo das linhas de código que mostrei acima, lembrando que precisa marcar aquela opção Expandir modelos de widget.Logo abaixo, os dois quadros de códigos tem o mesmo efeito, são para o HTML, apenas que, um deles está com anotações e o outro é reduzido, escolha apenas um dos códigos.
<div class='orkutwiter'>
<!-inicio facebook->
<div id='fb-root'/><div class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='165' expr:data-href='data:post.url' style='float:left'/>
<!-fim facebook inicio twiter->
<div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' expr:data-url='data:post.url' href='//twitter.com/share' rel='nofollow' title='Tweetar'/></div>
<!-fim twiter inicio google+1->
<g:plusone expr:href='data:post.url' size='medium' style='float:left;width:120px;'/>
<!-fim google+1 inicio orkut->
<a expr:href='"//promote.orkut.com/preview?nt=orkut.com&tt=" + data:post.url + "&du=" + data:post.title' rel='nofollow' style='text-decoration:none;'><img alt='Compartilhe no orkut' src='//2.bp.blogspot.com/-u3IIVZhRBnU/T2RWKIyXcaI/AAAAAAAAGEQ/08wnEVGjPfI/s1600/orkut-9.png' style='width:55px;height:20px;border:0;background-color:transparent;padding:0;margin:0px;' title='Enviar para Orkut'/></a>
<!-fim orkut-></div>Você pode procurar esse trecho de código data-via='foitestado' e substituir foitestado, pelo seu nome de usuário do Twitter
Passo 4Javascript para os botões g+1(google+1),Twitter e Facebook funcionarem
Esse código abaixo, é necessário para o funcionamento dos botões com os 'balões' de contagem e comentário, você escolhe um, o código reduzido ou o explicado, e adiciona como gadget do tipo HTML/JavaScript, pra ver como coloca códigos na área de gadget do blogger, clique, abaixo dele eu explico porque essa parte vai na área de gadget e não no HTML do blogger.
<!- Script envia facebook e google+1-><script type='text/javascript'>window.___gapisync=false;(function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='https://apis.google.com/js/plusone.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);lang:'pt-BR';})();
// abaixo script facebook
(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)) return;js=d.createElement(s);js.id=id;js.src='//connect.facebook.net/pt_BR/all.js#xfbml=1';fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>
<!- Script externo do twitter->
<script src='//platform.twitter.com/widgets.js' type='text/javascript'></script>Esses códigos Javascript não vão no HTML do blogger, porque aqueles botões irão aparecer em todos os posts, se a Home(página inicial) do seu blog tem 10 postagens, os botões vão aparecer 10 vezes, mas, o scripts não precisam aparecer todas essas vezes, até porque o código dele pesa um pouco seu blog, imagine multiplicar ele por 10, os códigos que serão colocados no HTML são tags Html(modificadas para o blogger), e, se seu blog tem 12 posts na Home, as tags Html dos botões precisam aparecer 12 vezes, uma para cada post, mas o script não, por isso não colocamos eles juntos no HTML do blogger, dessa forma, você tem mais trabalho para instalar, mas seus visitantes irão navegar em blog um pouco mais leve do que se estivesse colocado tudo no HTML.
Problemas com o botão e balão do Facebook
Nos testes que fiz, o sccript do Facebook é meio lento, nem sempre ele aparece, sendo assim, no meu blog eu substituí //connect.facebook.net/pt_BR/all.js#xfbml=1 por esse //connect.facebook.net/en_US/all.js#xfbml=1 que é mais para o público de USA(Estados Unidos), talvez eu mude no futuro, o problema é que o botão curtir e enviar muda para Like e Send, e talvez a instrução do balão de enviar para um grupo muda para inglês, eu não sei porque com o Script para USA o botão falha menos vezes, talvez o Facebook de mais carga de banda para ele, ou por causa do fuso, talvez quando ele é muito solicitado aqui no Brasil, lá ele está sendo pouco solicitado, quem quiser trocar, é por sua conta...Balão do Facebook fica cortado pelo layout do blog
Outro problema que notei, em alguns modelos, do blogger ou não, quando o visitante clica no botão enviar do Facebook, aquele quadro ou balão que aparece fica pela metade ou não inteiro, para resolver isso é possível usar Css, eu vou passar o código Css que resolve o problema, mas ele deve ser adicionado no local correto, que é onde coloca Css no HTML do blogger, não sabe, clique, além disso, talvez você precise alterar o numero do código:.fb_edge_comment_widget{margin-left:-68px}O código acima puxa mais para a esquerda aquele balão de envio de mensagem do Facebook, percebam que o número -68 está com um sinal de 'menos'(número negativo), se você tirasse o sinal de negativo ele empurraria o balão para a direita, mas o que precisamos mesmo é trazer ele mais a esquerda, se você precisar pode aumentar o número negativo e ele vai mais a esquerda.
Outra opçãoBotões aparecem só na página de postagem, não na Home
Quem quiser que os botões só apareçam nas postagem e não na Home-page de seu blog, nesse caso pode adicionar o código abaixo no HTML, como expliquei no passo 1 e 2, e, o código abaixo já tem os scripts, sendo assim, você não precisa fazer o passo 3 e 4, pois, como esse código não vai aparecer na Home, ele aparecerá uma vez apenas, no post.Atenção, essa é uma segunda opção, que substitui aquelas acima, dos passos 3 e 4, esse código abaixo tem efeito parecido mas diferente, se você optar por essa, não deve fazer o que está nos passos 3 e 4 acima.
Muito obrigado era exatamente o que eu queria
ResponderExcluirparabéns pelo trabalho ^^
Parabéns, de todos que eu li esse foi o único que funcionou comigo.
ResponderExcluirAi galera tentei o explicado ai não funcionou, depois tentei o reduzido e du tudo certo.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOlá moço,
ResponderExcluirMuito bom seu tutorial, só uma dúvida de alguém muito iniciante, parece que o contador do twitter ainda não está rolando. É isso mesmo? Testei com meu twitter, mas não saiu do zero.
O código acima é só para blogs e sites que usam a plataforma blogger, se for seu caso e você colocou o código corretamente, aí deve dar certo, só que, o botão do twitter ele só aparece a nova contagem se você twitar mesmo e depois que recarregar a página de seu blog que foi twitada.
ExcluirNossa, Funcionou certinho!! os Blogs que ia de dicas para isso só falava do AddThis, os botões enviavam o link da página inicial não a do post! valeu! abrçs
ResponderExcluir