Adicionar botão +1 do Google de forma assíncrona

Gustavo Paes, 18/06/2011

O botão +1 (plus one) do Google permite que os visitantes indiquem a página. Essa indicação será usada para dar mais relevância ao resultado de busca. Quanto mais uma página tiver indicações, mais no topo ela fica. Portanto é uma boa ideia ter um botão desse.

Entretanto, adicionar simplesmente o script no head da página pode deixá-la mais lenta. Para resolver isso, é possível carregar o script de forma assíncrona, permitindo que elementos mais importantes da página sejam carregadas juntas com o script do google e não após.

No rodapé do seu site / blog, antes do </body>, adicione o seguinte código:

<script>
(function(d) {
  var g = d.createElement("script"),
    h = d.getElementsByTagName("head")[0];
  g.async = true;
  g.src = "https://apis.google.com/js/plusone.js";
  h.appendChild(g);
})(document);
</script>

No lugar onde você quer que o botão do +1 apareça, insira esse código:

<div class="g-plusone" data-size="medium" data-count="false"></div>

Recomendo usar esse div ao invés da tag g:plusone por ser válido no HTML5 e funcionar no IE8. O parâmetro data-count é o que define se exibirá o contador de pessoas que google-recomentaram ou não.

Suporte ao IE7

É bom saber que o Google não dá mais suporte ao IE7. Todos seus produtos podem parar de funcionar em algum momento nesse navegador.

Com o Google +1 é a mesma coisa. E nesse caso o script nem funciona no IE7. Portanto, não ache que é um bug caso você ainda use o IE7. Verifique se carrega nos demais navegadores.