[Blogger - Customização] - Instalando o botão +1 (mais um) em blogs do Blogger

No artigo anterior eu mostrei a você como funciona a mais nova ferramenta do Google, o botão +1 (mais um, ou em inglês: plus one), que você já pode conferir em funcionando aqui no blog. E como prometido, hoje eu mostrarei a você como adicionar esse botão em um blog do Blogger. Existe duas maneiras de adicionar esse botão, e eu mostrarei as duas, ficando a seu critério utilizar a que mais lhe interessar. A "instalação" desse botão é bem simples, mas preste atenção em todos os passos do tutorial para evitar qualquer tipo de problema.

Botão "Plus one" padrão em blogs do Blogger


Se você gosta de usar os recursos nativos do Blogger, fique sabendo que há um botão plus one que já vem integrado aos botões de compartilhamento nativo da plataforma. Veja abaixo como adicioná-los.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout > Postagens no blog > Editar. Na janela que se abrir, procure a opção Mostrar botões de compartilhamento, como ilustra a imagem abaixo.


2. Após marcar esta opção, clique no botão Salvar. Agora é só ir no seu blog e verificar como ficou.

ATENÇÃO: se você utiliza um template não-nativo do Blogger, pode ocorrer dele não possuir os códigos necessários para mostrar os botões de compartilhamento padrão. Portanto, se você quiser utilizar esta opção, deverá pesquisar na web como instalar os botões de compartilhamento padrão do Blogger, ou começar a utilizar um template nativo.

Instalação manual do botão "Plus one" (em qualquer lugar do blog)


Se você não gosta de usar os botões de compartilhamento nativos do Blogger, ou utiliza um template que não suporte os botões de compartilhamento padrão (geralmente os templates criados por terceiros), basta seguir os passos abaixo para fazer a instalação manual.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</head>

3. Imediatamente acima deste código, cole este outro código.

<!-- Código do botão Plus One -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'pt-BR'}
</script>
<!-- Fim do código do botão Plus One -->


4. Agora eu mostrarei como adicionar esse botão abaixo do título dos artigos, mas se você tiver conhecimentos sobre os códigos do seu template, você pode adicionar o botão aonde você quiser. Clique novamente dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

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

5. Imediatamente abaixo deste código, cole este outro código.

<b:if cond='data:blog.pageType == "item"'>
<div style="border: 1px solid #DDD;-webkit-border-radius: 6px;border-radius: 6px;margin: 10px 0;">
<table border='0' cellpadding='5' cellspacing='0' style="width: 100%'>
<tr>
<td>
Gostou deste artigo? Então clique no botão ao lado para recomendá-lo aos seus contatos do Google! 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 DO BOTÃO PLUS ONE AQUI
</td>
</tr>
</table>
</div>
</b:if>


6. Altere a frase destacada em azul para qualquer outra que você quiser. Mude também a parte destacada em vermelho para o que é pedido. Se você tiver conhecimentos em HTML você pode alterar o código da maneira que você quiser, ou, se você preferir, pode utilizar apenas o código do botão. Abaixo você poderá ver todas as opções de botão disponíveis até o momento. Veja qual dos botões lhe agrada mais, copie o código desse botão e cole no lugar que foi destacado em rosa no código acima.

Estilo Demonstração Código do botão
Pequeno
(simples)
Médio
(simples)
Padrão
(simples)
Grande
(simples)
Pequeno
(com balão)
Médio
(com balão)
Padrão
(com balão)
Grande
(com balão)
Pequeno
(com contagem)
Médio
(com contagem)
Padrão
(com contagem)
Grande
(com contagem)
Pequeno
(contagem e frase)
Médio
(contagem e frase)
Padrão
(contagem e frase)
Grande
(contagem e frase)

7. Para finalizar, clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Agora, ao acessar seu blog, deverá estar aparecendo abaixo do título dos seus artigos o botão plus one do Google, como ilustra a imagem.


Lembre-se que você não precisa utilizar o código do passo 5. Se você quiser colocar o botão em qualquer outra parte do seu template, você pode utilizar somente o código dos botões que foram citados no passo 6.

Atualização — 27.04.2012 às 06h15
O artigo foi atualizado para refletir as mudanças realizadas no painel de controle da plataforma Blogger, e para atualização dos códigos do botão, devido a uma mudança feita na estrutura dos mesmo pela equipe do Google.

Atualização — 28.07.2012 às 06h15
Novamente o código dos botões foram atualizados, agora para se adequarem ao novo padrão de linguagens da web: o HTML5.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 13 comentários neste artigo!

  1. Achei legal Igor. Mas qual é o efeito prático desse botão. Os botões do twitter e do facebook aparecem nas suas respectivas páginas. E esse?

    Abs!

    ResponderExcluir
  2. Igor: o efeito prático é o seguinte: ao clicar no botão +1, você estará informando aos seus contatos - da sua conta do Google (Orkut, Gmail e etc.) -, que você gostou deste artigo. E quando um dos seus contatos procurar ao no Google Search sobre o assunto do artigo que você gostou, ele verá que você (alguém da onfiança dele) deu voto para aquela página, o que poderá levá-lo a acessar a página. Você pode ver uma expicação mais “detalhada” no artigo: Novidade: botão +1 (mais um) para blogs do Blogger. Espero que isto esclareça, forte abraço.

    ResponderExcluir
  3. Como faço pra integrar os botões do twitter e do facebook com o +1, assim como vc fez? Eu já tenho no meu blog a dica antiga e não gostaria de mudar.

    Abs!

    ResponderExcluir
  4. Igor: não existe uma “integração” efetiva entre os botões do Addthis e o Plus One, eu só coloquei o botão do Plus One ao lado dos botões do Addthis. para fazer isto, basta você instalar o script do Plus One (passo 5) e em seguida colar o código do botão (eu utilizei o médio) ao lado do código do twitter no Addthis, ficará algo como:
    <a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
    <a class='addthis_button_tweet' tw:via='bloggandonaweb'/>
    <g:plusone size='medium'/>

    Espero que isso ajude! Abraços.

    ResponderExcluir
  5. Abaixo de todas as suas posts há alguns botões de tweet; Curtir, e mais um. Como fazer para ficá los invisíveis na página inicial?

    ResponderExcluir
  6. João Neto: o código fornecido no passo 7 deste tutorial, por padrão, só mostrará o botão nas páginas dos artigos. Mas se você quer saber qual código exatamente faz isso, são: a primeira e última linha do código do passo 7, tudo o que estiver entre essas duas linhas, só aparecerá na página dos artigos. Para mais informações sobre as condicionais do Blogger, aconselho que leia este artigo criado pela Clau, dona do blog, Mundo Blogger:
    Ocultar elementos em página específica
    Espero ter ajudado! Volte sempre.

    ResponderExcluir
  7. Muito obrigado Igor. Ajudou Mesmo!

    ResponderExcluir
  8. Oie ... conheci o blog hje e adorei!! Como faço pra colocar o botão ao lado dos do Add this.. como aqui no sue blog???
    Abraços

    ResponderExcluir
  9. Nara: fico feliz que tenha gostado do blog! Para adicionar o botão junto aos botões do AddThis, faça o seguinte:
    1 - Vá em Design > Editar HTML.
    2 - Marque a opção Expandir modelos de widgets.
    3 - Pressione Ctrl+F para abrir a janela Localizar do navegador.
    4 - Procure o código: <a class='addthis_counter addthis_pill_style'/>
    5 - Imediatamente acima deste código, adicione este outro código: <a class='addthis_button_google_plusone' g:plusone:size='medium'/>
    6 - Seu código do Addthis, deve ter ficado semelhante ao mostrado abaixo:
    <a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
    <a class='addthis_button_tweet' tw:via='bloggandonaweb'/>
    <a class='addthis_button_google_plusone' g:plusone:size='medium'/>
    <a class='addthis_counter addthis_pill_>

    7 - Para finalizar é só salvar as modificações! Espero que isso te ajude, volte sempre!

    ResponderExcluir
  10. Obrigada!! ;DD
    Deu certo!! Não esta conseguindo, o link q vc mandou localizar no meu faltava a / no final.. dai nao dava certo.. coloquei, entao funcionou ;DD

    Abraços

    ResponderExcluir
  11. Foi o único artigo que me ajudou!! parabéns

    ResponderExcluir
  12. Olá, adorei a dica!
    escuta só eu tenho uma barra especial que fica grudada no rodapé da tela no fundo, nessa barra eu queria adicionar somente o botão +1 como eu faço?

    ResponderExcluir
    Respostas
    1. Olá Sérgio, desculpe a demora em responder. Tudo dependerá de como é criada essa barra que você tem no seu blog. Se ela é criada com HTML dentro do seu template, ou se é algum gadget fornecido por um serviço, enfim... depende muito.

      Excluir