Instalando o botão "Curtir", "Tweet" e "+1" em blogs do Blogger

Compartilhar:
O Facebook e o Twitter são redes sociais muito utilizadas, sendo assim cada uma tem seus widgets. Mas você vê em todos os blog e também aqui, os botões de Curtir (Like) e Tweet. Para adicionar estes botões basta fazer algumas coisinhas no seu HTML. Vamos conhecer?


1. Clique na guia Modelo e clique no botão Fazer backup/Restaurar e faça o download de seu modelo clicando em Fazer download completo do modelo.

2. Feche a janela e clique no botão Editar HTML.

3. Clique na opção: "Expandir modelos de widgets".

4. Pressione Ctrl+F do seu teclado para abrir o Localizador e procure pela linha HTML.

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

5. E imediatamente, insira este código logo abaixo da linha em HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='float: left; margin: 3px;display: inline;'><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'/><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'/><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone></div></b:if>

 6. Caso queira inserir no código com uma borda dentro de uma caixa.

<b:if cond='data:blog.pageType == "item"'>


<div style="border:1px solid #DDD;-moz-border-radius:6px;-webkit-border-radius:6px;-goog-ms-border-radius:6px;border-radius:6px;margin:10px 0px 10px;">


<table border='0' cellpadding='5' cellspacing='0' width='100%'>

<tr>
<td style='text-align:justify;'>

Gostou deste artigo? Então clique no botão ao lado para curti-lo e Twitta-lo!! Aproveite para nos <a href="link do seu facebook" target="_blank">adicionar no Facebook</a>, seguir no <a href="link do seu twitter" target="_blank">Twitter</a> e assinar nosso <a href="link do seu feed" target="_blank">Feed</a>.

</td>
<td style='text-align:right;'>
COLE O CÓDIGO ACIMA AQUI!
</td>
</tr>
</table>
</div>
</b:if>
Lembre-se de fazer as modificações nos locais indicados!

7. Visualize seu modelo clicando em no botão Visualizar, se estiver tudo correto, clique no botão Salvar.

8. Para podê-lo deixar tanto visível na página inicial do blog quanto nas postagens, basta apagar as partes em negritos dos códigos dos passos 5 e 6.

Atualização — 05.02.2013 às 20h27m
► Postagens Relacionadas:

53 Comentários

BFBrasil disse...

Brother, já tentei de tudo, todos os codigos... nada está funcinando no meu www.battlefield3brasil.com. Gostaria de sua ajuda para solucionar este problema. Até encaminhei um email para você.

Aguardo seu contato.

10 de agosto de 2011 às 23:09
JACN disse...

BF3Brasil: No meu blog de testes deu tudo certo! Eu creio que seja o seu template que não aceita! Mas para facilitar, mostre qual a mensagem aparece quando você tenta salvar!

11 de agosto de 2011 às 15:40
Maíra Rosedal disse...

Olá, gostaria de lhe agradecer pela imensa ajuda na instalação desses botões do face e twitter. Eu sou iniciante e não entendo nada de código de blog mas estou tentando aprender..rs. Eu queria tambem acrescentar este botão que vocês tem na página +share ... É possível eu acrescentar no meu blogger tb???? bjão valeu

23 de março de 2012 às 03:21
João Almeida disse...

Olá Maíra! Que bom que você gostou do artigo e pode ficar aqui de olho no blog que você irá aprender bastante. O botão "+SHARE", é do AddThis, que já ensinei um tempo atrás. Basta seguir o link a seguir: http://joao987.blogspot.com.br/2011/05/botoes-de-compartilhamento-addthis-como.html
Espero ter ajudado. Obrigado pela participação.

23 de março de 2012 às 21:30
Leo_Altz disse...

Obrigadão !

2 de abril de 2012 às 06:51
João Almeida disse...

De nada Leo! Obrigado pela participação e volte sempre!

2 de abril de 2012 às 13:56
cleiton santana disse...

Muito boa a tutorial, funcionou legal em meu blog, vlw.
Cleiton Santana, Blog: http://www.vemganhar.com

11 de abril de 2012 às 04:41
João Almeida disse...

Obrigado pelo elogio e fico feliz que tenha gostado, Cleiton.

11 de abril de 2012 às 19:37
Isabela Ribeiro disse...

No meu blog não funcionou..... :(

22 de abril de 2012 às 01:31
João Almeida disse...

Izabela, qual parte não funcionou em seu blog?

22 de abril de 2012 às 21:50
Silvia Carolyne disse...

Olá... fiz exatamente como vc colocou mas não apareceu os boões... O meu blog é blogger, e não sei pq não estou conseguindo =/

1 de junho de 2012 às 19:08
João Almeida disse...

Tudo varia de template para template. Procure os códigos em seu template e tente novamente.

1 de junho de 2012 às 19:42
luc ⚓ disse...

Olá, queria saber como posso fazer os botões aparecerem sempre e não só quando as pessoas clicam na postagem. Queria que ela aparecesse em cada post ja quando entrassem no blogger. Tem como?

21 de julho de 2012 às 00:52
João Almeida disse...

Olá Luc! Para deixá-los visíveis na página inicial, basta procurar por ou por .
Depois pague-os. Logo após, procure por e apague-o. Pronto. Espero lhe ter ajudado.

30 de julho de 2012 às 23:33
Herick Martins Schaiblich disse...

Ei, estou muito alegre com esse tutorial. Já estou há um tempo pesquisando, e todos os que tentei até agora os bottons apareciam, mas simplesmente não funcionavam no meu blog. Este deu certinho, além de ficar exatamente no lugar que eu queria no post.
Porém, como a pessoa abaixo, luc, eu gostaria de deixar que aparecesse na página inicial, não apenas quando se vai para o post específico. Tentei seguir as instruções que você deu à ela, mas esse código não aparece aqui. Tem mais alguma dica que possa me dar quanto a isso?
Desde já, muito grato mesmo pelo tutorial!

24 de agosto de 2012 às 21:33
João Almeida disse...

Ficamos gratos em saber que tudo deu certo! A explicação que dei para o luc não está correta, pois modifiquei o código recentemente. Então, procure nos códigos dos passos 5 e 6 a linha ou
e apague-as. Depois procure na última linha do código 5 ou 6 a linha e depois apague-a.
Este é o único modo de deixá-lo visível na página inicial dentro dos posts.

24 de agosto de 2012 às 21:45
Herick Martins Schaiblich disse...

Muito obrigado, consegui ajeitar, ficou certinho!
Abraço, voltarei sempre para ver as novidades e tirar duvidas. ;)

25 de agosto de 2012 às 01:39
João Almeida disse...

Não foi nada, aliás, o meu trabalho é ajudar a quem precisa! Volte sempre e abraços!

25 de agosto de 2012 às 14:07
YaCastro disse...

Primeiro código que funcionou certinho no meu blog... Obrigada! :*

30 de agosto de 2012 às 22:26
João Almeida disse...

De nada e voltes empre!

31 de agosto de 2012 às 12:32
Mod Júnior disse...

Olá João vlw pela dica, o meu também deu certo, mas como faço pra colocar os botões depois da portagem? agradeço desde de já!

5 de setembro de 2012 às 00:32
Mod Júnior disse...

Olá João, Parabéns pelo tutorial, funionou no meu aqui tbm, mas gostaria de saber como colocar esses botões no final da portagem e tbm como adcionar o botão G+ no mesmo! agradeço desde de já!

5 de setembro de 2012 às 00:33
João Almeida disse...

Caso você esteja falando no rodapé das postagens como o que usamos aqui, é muito simples. Siga todos os passos, mas no momento do passo 4, ao invés de procurar o que descreve na postagem, utilize este:
post-footer-line post-footer-line-3
Espero lhe ter ajudado.

5 de setembro de 2012 às 12:55
André Romoaldo disse...

muito obrigado meus amigos!! funcionou perfeitamente : )

13 de setembro de 2012 às 13:02
João Almeida disse...

Por nada. Volte sempre e abraços!

13 de setembro de 2012 às 13:41
João Almeida disse...

A postagem será atualizada!

13 de setembro de 2012 às 13:42
Liz Nunes disse...

Fiz tudinho, mas no meu blog não mudou nada :'(
O que pode ter acontecido?

13 de setembro de 2012 às 23:04
João Almeida disse...

Não sei. Você encontrou todas as tags?

13 de setembro de 2012 às 23:11
Ramon Alves disse...

Queria saber como ele fica no lado direito??

1 de novembro de 2012 às 14:36
João Almeida disse...

Ele já se encontra alinhado à direita.

1 de novembro de 2012 às 17:44
Central Six disse...

meu blog não tem esse codigo e agora?

28 de novembro de 2012 às 16:58
João Almeida disse...

Procure somente por: <div class="post-header-line-1
Acho que irá encontrar!

28 de novembro de 2012 às 20:35
PAGONEJA disse...

Boa tarde...vc podia explicar como colocar os botoes de compartilhamento iguais ao seu hein

ficou TOP assim ;/

abraços

8 de dezembro de 2012 às 11:19
João Almeida disse...

Basta você procurar por: e adicionar o código do passo 5 ou 6 abaixo da linha.

8 de dezembro de 2012 às 19:45
Fernanda Peron Soranzo disse...

Ola! Adorei a explicação, e foi o único código que funcionou no meu blog. Gostaria de saber como faz para aparecer no tweet o final "via @meu twitter"

4 de janeiro de 2013 às 00:10
João Almeida disse...

Olá! Obrigado e para fazer isso, basta substituir o código Tweet

4 de janeiro de 2013 às 00:16
Marina disse...

ooi, eu fiz isso só que com o codigo de outro site, e queria saber se com esse, os curtis de cada postagem aparece na pagina inicial. Porque no que eu coloquei, os curtis de cada postagem só é possivel ser visualizada quando você ve a postagem separadamente, e na pagina inicial fica com curtis da pagina, com os mesmo numeros em todas as postagens. Assim ó http://www.thetrashion.com/
Obrigda.

5 de janeiro de 2013 às 19:38
Euquerobiologia disse...

Olá! Como eu faço para colocar as postagens relacionadas assim como está aqui no seu site?

Eu uso o linkwhitin mas prefiro um modelo como este seu, somente os links dos posts relacionados. Teria como ser idêntico a este seu, e dai eu só alteraria a cor da barra azul antes dos posts?

Grato!
www.euquerobiologia.com.br

16 de março de 2013 às 23:56
Maikon Christhian de França disse...

Boa tarde João,

Estou tentando fazer igual vc passou ao Guest, os botões até ficam aparecendo, mais entre a linha que separa a próxima postagem, sabe o que devo fazer? meu modelo é o bloger simples. blog voando na rede.

29 de abril de 2013 às 16:15
João Almeida disse...

Não entendi, fica entre o corpo das postagens e os botoes de próxima e anterior postagens?

29 de abril de 2013 às 19:42
Maikon Christhian de França disse...

Boa noite João,

O meu blog é o modelo simples do blogger, entre uma postagem e outra tem um separador em forma de linha, quando eu coloco o código abaixo do qual você passou (post-footer-line post-footer-line-3) ao salvar as alterações os botões ficam bem no meio desta linha, existe algum outro lugar que eu possa estar colocando os códigos para ficar no rodapé abaixo das postagens?

29 de abril de 2013 às 20:57
João Almeida disse...

Pode me passar algum e-mail? Será mais fácil assim.

29 de abril de 2013 às 21:11
Maikon Christhian de França disse...

maikon_chris@hotmail.com

29 de abril de 2013 às 21:16
andre disse...

O E-grana é um excelente afiliado e vem desde 2003, monetizando blogs e sites
segundo suas visitas.

Veja as vantagens de usar o E-grana
como afiliado em seu site ou blog.

Valor mínimo para receber pagamento
de apenas R$ 50,00.

Relatórios em tempo real.

Pagamentos efetuados mensalmente, de
forma rápida.

Suporte 24 horas e 7 dias da semana.

com seu site você ganha a cada 1000
exibições

R$ 2,00 a cada 1000 visualizações
únicas de pop-unders

R$ 0,50 a cada 1000 visualizações
únicas de banners.

Faça parte você também do E-grana http://ads.egrana.com.br/indica/739

12 de maio de 2013 às 18:51
Garotas Bacanas disse...

Fiz direitinho e nada aconteceu :(

2 de agosto de 2013 às 21:39
João Almeida disse...

Tudo foi achado? Todas as linhas?

2 de agosto de 2013 às 22:25
Diogo Guilherme disse...

Olá, bom ainda não fiz a instalação do mesmo, pois gostaria de saber se os botões irão aparecer no começo ou no final da postagem eu gostaria de por no final da postagem, antes de autor da postagem, tags. Aguardo, respostas

18 de agosto de 2013 às 02:00
João Almeida disse...

Olá Diogo! Basta susbtituir o código do passo 4 por este: . Espero ter ajudado. Qualquer coisa, volte a me contatar. ^^

21 de agosto de 2013 às 15:57
João Almeida disse...

Pode me passar um email pra disponibilizar um tutorial?

21 de agosto de 2013 às 16:00
João Filho disse...

Olá João. Coloquei os botões no meu blog e percebi que quando curto uma postagem que fica na pagina principal, automaticamente a outra postagem também recebe uma curtida. Gostaria de uma ajuda. Obrigado!

10 de setembro de 2013 às 16:38
Pedro Silva disse...

não consegui,joao por favor me adicione,pra ver se voce consegue pra mim via controle remoto.

11 de setembro de 2013 às 02:35
João Almeida disse...

É o mesmo link, por isso que recebe. Isso é normal. :)

11 de setembro de 2013 às 14:37
baixariah disse...

Bem loco

27 de outubro de 2014 às 12:26

Postar um comentário