Como adicionar o botão +1 do Google ao seu site

Como adicionar o botão +1 do Google ao seu site

Veja como colocar o botão “+1″ do Google em suas páginas e dar a oportunidade para leitores, usuários e clientes recomendarem as suas páginas para os amigos e muitas outras pessoas através da melhora do seu ranking nas páginas de busca do próprio Google.

O que é o botão “+1″?

Uma das novidades mais interessantes do ano, o botão “+1″ criado pelo Google, possibilita que usuários indiquem que uma página, post ou site é relevante, interessante para eles. É bem parecido com o botão “Curtir” do Facebook, porém está ligado à rede social do próprio Google, a Google+ (Plus). Ele já pode ser visto em grande parte dos portais e blogs e é uma ótima ferramenta para melhorar a interação dos usuários com o seu site.

Qual a vantagem em usá-lo?

Quando clica no botão “+1″, é como se o usuário dissesse para o Google “Ei, eu acho que essa página tem um conteúdo interessante e pode ajudar outras pessoas”. E a empresa já deu indicações de que o número de usuários que clicam no botão “+1″ de uma determinada URL tem impacto no seu ranking de buscas. Ou seja, se vários usuários clicarem no botão “+1″ da sua página é bem provável que você suba algumas posições nas páginas de busca. E mais, se um dos meus contatos tiver clicado no botão “+1″ de uma das páginas do seu site, essa página aparecerá como recomendada pra mim quando eu fizer uma busca no Google.
Depois de clicar no botão o usuário pode ainda fazer um comentário sobre a página, fazendo assim um post no seu perfil do Google+ (se tiver um perfil lá) e gerarando ainda mais tráfego para seu endereço.

Código

Vou mostrar aqui como usar a opção de carregamento assíncrona do botão, aquela em que o botão será adicionado após o carregamento da sua página, deixando-a mais rápida e impedindo que qualquer problema nos servidores do Google possam vir a prejudicar seu site.
São basicamente duas partes. A primeira é o botão em si, que usa a seguinte tag:

<g:plusone size="medium" annotation="inline"></g:plusone>

Basta colocar este trecho de código no lugar onde você quer que o botão apareça. Abaixo do título da página ou ao final do texto do post, por exemplo. Perceba que ela tem duas propriedades, size e annotation. Logo mais vou explicar como você pode usá-las para obter a melhor configuração para o seu caso.

Depois, ao final da página coloque o código que irá carregar substituir a tag acima pelo botão em si. Note que este código deve vir sempre depois da tag do botão.

<script type="text/javascript">
window.___gcfg = {lang: 'pt-BR'};

(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);
})();
</script>

Note aqui que colocamos, logo no início da tag, a opção “lang” configurada com o valor ‘pt-BR’. Isso é importante pois configura o botão para usar o idioma “Portugês do Brasil”.

Tamanho e tipo

Usando as propriedades size e annotation é possível alterar o tamanho e o tipo do botão “+1″. Existem 4 tamanhos (size) disponíveis: Small (pequeno) 24px de largura, Medium (médio) 20px, Standard (padrão) 24px e Tall (largo) 60px. Além disso você pode escolher entre três maneiras diferentes de exibir a o número de pessoas (annotation) que já clicaram e marcaram aquela página com ‘+1′: Inline (linha de texto), Bubble (balão) e None (nenhum). Combinando essas opções você terá 12 tipos diferentes de botão:


Tupo o que você precisa fazer é escolher qual das combinações melhor se ajusta ao seu layout e alterar a tag do botão ajustando estas propriedades.

Alguns exemplos:

<g:plusone size="standard" annotation="bubble"></g:plusone>

<g:plusone size="medium" annotation="inline"></g:plusone>

<g:plusone size="tall" annotation="bubble"></g:plusone>

<g:plusone size="small" annotation="none"></g:plusone>


Você gostou deste post?






  • Zmich

    ae cara isso dai é por pagina ou por post?

  • Thonyrennan

    Segui todos os passos, a hora que publico a página o botão não aparece, oq pode ser??

  • Marcos Batista Campos

    como adicionar isto no blogger?

  • andre

    tambemquero saber, não funcionou, preciso de uma melhor explicação. obrigado

  • http://www.facebook.com/people/Israel-Santos/100002437372879 Israel Santos

    nao funciona
    da erro na funçao
    (function() {

  • Alfacinco

    nuito bo resolveu meu problema.tks