Colocar Botao Google +1 No Seu Site ou Blogger no Modo Avançado e Mais Rapido

By | agosto 16, 2011

O novo botão Google +1 é o que faltava para a empresa entrar de vez na briga das redes sociais. Semelhante ao botão curtir do Facebook, o botão do Google +1 influencia os resultados de busca no índice do www.google.com, e ainda serve para fazer anotações para sua rede Social Google Plus.

Quando o botão Google +1 foi lançado eu escrevi um artigo mostrando como instalar ele nos artigos do seu site em html. Porém pouco tempo depois o Google melhorou o botão, adicionando recursos e deixando-o mais rápido. Resolvi então atualizar o artigo para cobrir as novas funcinalidades do botão.

Google +1 + Rápido

Para começar, agora o botão Google +1 é carregado no modo de javascrip asíncrono. Isto é, o código javascript não bloqueia a inicialização dos recursos da sua página. Ele é carregado de forma paralela, e isso agiliza todo o processo de navegação.

A página de construção do botão Google +1 é ainda o mesmo endereço.

As opções de tamanho são: Pequeno (15px), Padrão (24px), Médio (20px), Grande(60px).

Existem dois pedaços de código, um para ser inserido após todos os botões Google +1 da sua página, geralmente no rodapé, antes da tag de fechamento “body”.

Agora vamos ao código do botão. Este deve ser colocado onde você quer que ele apareça.

No botão é onde você define também o tamanho. Da maneira acima estamos colocando o botão tamanho padrão.

Tamanho pequeno

Tamano médio

Tamano grande

Colocando vários botões Google +1

Você pode colocar quantos botões quiser na sua página. O mais recomendado é perto do título do artigo e também no final dele.

Note que o botão Google +1 da maneira implementada acima, pega automaticamente o endereço da sua página. Caso você queira passar o endereço que deve ser marcado, faça da seguinte maneira:

O código acima instala o botão Google +1 grande marcando a url www.gusleig.com.

Isso serve por exemplo, para você colocar um botão do Google +1 para indicar o endereço principal do seu site. Esse botão poderia ficar por sugestão, na barra lateral do site, assim como eu coloquei no Gus SOS Brasil.

Instalando no WordPress

Para instalar no WordPress é facil. Edite o seu tema do arquivo single.php e procure pela palavra the_content. Experimente colocar logo abaixo o código do botão.

Edite o arquivo footer.php para encontrar a tag body e colar antes dela o código javascript para carregar o botão.

Onde Inserir o Google +1 no Blogger?

Para quem tem um site hospedado no Blogger, você deve editar o html da página para poder inserir o botão Google +1 customizado.

Acesse as configurações -> Design -> editar HTML. Marque a caixa “Expandir modelos de widgets”.

Para colocar depois do conteúdo, encontre o código:

Use (Ctrl+F) (Para pesquisar)

<div class='post-body entry-content'...

E cole (ctrl+v) logo abaixo, o seguinte código do botão do Google +1 modificado:

Clique em SALVAR MODELO.

Agora você precisa inserir no rodapé o código que cria botão no espaço determinado acima.

Clique em Elementos da página (ao lado do editar html).

No rodapé, clique em “Adicionar um Gadget”. Quando abrir a janela escolha “HTML/JavaScript”.

No conteúdo cole (ctrl+V) o seguinte código:

Salve e depois vá visualizar a sua página para ver como ficou.

Veja como instalar o botão de Curtir do Facebook no seu blog ou blogger.