Criando um botão de compartilhamento do Google+

Nesta postagem, mostrarei como criar um botão para compartilhar páginas da internet no Google Plus (ou Google+).

Aviso importante: o Google+ será encerrado em agosto de 2019.

Saiba mais sobre o fim da rede social: Google anuncia o fim do Google+.

Link de compartilhamento do Google+

O link do Google+ para compartilhamento é [1]

https://plus.google.com/share?url=[URL]&hl=[CÓDIGO-DA-LÍNGUA]

O único parâmetro obrigatório é a URL. O parâmetro hl é o código da língua, que, no caso do Brasil, é pt-BR [1]. A URL da página pode ser obtida pela propriedade window.location.href, que deve estar codificada (faremos isso com a função encodeURIComponent() do JavaScript).

Inicialmente, vamos utilizar o seguinte código HTML

<a href="" id="google-plus-share-btt" rel="nofollow" target="_blank" class="google-plus-share-button"></a>

O script a seguir cria a URL de compartilhamento e a atribui ao link do HTML anterior.

//Constrói a URL depois que o DOM estiver pronto
document.addEventListener("DOMContentLoaded", function() {
   var url = encodeURIComponent(window.location.href);
   var idioma = "pt-BR";
   //altera a URL do botão
   document.getElementById("google-plus-share-btt").href = "https://plus.google.com/share?url=" + url + "&hl=" + idioma;
   }, false);

Esse método não funciona em páginas AMP, pois este tipo de página impede o uso de scripts que não façam parte do projeto AMP. Além disso, o botão também não funcionará se usuário bloquear os scripts no navegador.

Personalização do botão

Utilizarei a seguinte imagem para ser o ícone do botão [2]:

Ícone do Google+ do Iconfinder

Você pode utilizar a imagem que quiser. A única recomendação é que ela seja quadrada. O código em CSS é dado a seguir

.google-plus-share-button{
   display: inline-block;            
   width: 40px;
   height: 40px;
   margin: 5px;
   background-size: 100% 100%; /* ou 'contain' */
   background-image: url("[URL-DO-ICONE]");
   background-repeat: no-repeat;
   background-position: center;
}

Em [URL-DO-ICONE], você deve colocar o link da imagem escolhida. Se preferir, utilize uma URL de dados em Base 64. Normalmente, sites de ícones, como o Iconfinder, disponibilizam uma opção para criar a URL em Base 64 de seus ícones. A principal vantagem dessa opção é que fica tudo embutido no código da página, isto é, você não depende de arquivos externos.

Se a imagem que você escolher não for quadrada, utilize o valor contain na propriedade background-size para que não haja distorções.

Você pode testar o botão a seguir:

Nesse exemplo, utilizei um ícone em Base 64.

Download dos códigos

A versão final desse botão pode ser obtida nos links abaixo

• Botão do Google+ no GitHub
• Botão do Google+ no Google Drive

Considerações finais

Você também pode criar um botão de compartilhamento no site Google Developers [1]. Entretanto, as opções de personalização são um pouco limitadas e você não pode escolher a imagem do ícone.

O Google+ extrai informações da página para criar um card/snippet com um resumo do conteúdo compartilhado. Os dados são extraídos de quatro formas [3]:

1. Microdata: as informações são extraídas da marcação microdata Scheme.org;
2. Open Graph: as informações são obtidas a partir das meta tags Open Graph;
3. Tags title e meta description: as informações são obtidas a partir das tags title, da meta tag description e será escolhida uma imagem da página para ser a miniatura;
4. "Melhor palpite": o Google+ irá escolher as informações que ele acredita que darão uma boa descrição do conteúdo da página.

Essa lista está em ordem de precedência, sendo que a marcação microdata tem a maior prioridade.

Leia também

Mais botões de compartilhamento:

• WhatsApp
• Facebook
• Twitter
• Pinterest
• LinkedIn
• e-mail

Referências

• [1] Google+ Platform: Share. Acesso em 12 de maio de 2018.
• [2] IconFinder: Google Plus Icon by Xinh Studio. Acesso em 12 de maio de 2018.
• [3] Google+ Platform: Snippet. Acesso em 12 de maio de 2018.