Como adicionar simples botões de partilha de redes sociais no website (com GTM)
Está na hora de adicionar botões de partilha de redes sociais no vosso site e têm de encontrar qual o serviço a utilizar. A minha sugestão é utilizarem o Google Tag Manager (GTM) para resolver de forma simples a partilha nas redes sociais.
No exemplo que criei, adicionei apenas as seguintes redes: Facebook, Twitter, LinkedIn, WhatsApp e Email. Estes botões que não utilizam imagens (para carregar mais rápido) e não contam para o tempo de carregamento do vosso site (SEO friendly).
Exemplo nesta página (se não estiverem a visualizar o vosso browser ou Adblocker poderá estar a bloquear o GTM).
Índice
Adicionar botões de partilha de redes sociais no website com GTM (implementação)
1 O primeiro passo é fazer o download do container do Google Tag Manager (GTM) de botões de partilha.
Download botões de partilha GTM
2 Para instalar as configurações de GTM do cookie banner é necessário entrar na parte de “Admin” e escolher a opção: “Importar contentor” admin –> importar contentor (imagem infra).
3 Eis os passos a seguir de forma a adicionar esta configuração sem alterar as configurações/tags já existentes no vosso GTM:
- Selecionar o ficheiro do download
- Selecionar o workspace (espaço de trabalho) existente
- Selecionar “intercalar”
- Selecionar “mudar o nome de etiquetas em conflito”.
4 Podem ainda alterar o Trigger (acionador) de forma a disparar estes botões de partilha apenas nos artigos de blog do vosso website.
Como funciona esta configuração (contexto)
Esta configuração de botões de partilha funciona através de dois scripts que são adicionados ao site pela opção de HTML personalizado no Google Tag Manager.
Estes scripts são:
- Script da FontAwsome que vai carregar os ícones de redes sociais que botões vão utilizar.
Isto é importante porque carregar todo o script deste tipo de letra e ícones é mais rápido do que adicionar imagens separadas para cada botão com uma boa qualidade. - O segundo script é uma biblioteca de JavaScript com o nome de sharer.js.
Esse script permite que os links dos ícones criados a cima se transformem em botões com a função de partilha mediante cada serviço.
Por último, é adicionado um estilo (com CSS) de botões flutuantes do lado direito.
O lado direito é utilizado porque permite uma mais fácil partilha na versãio mobile. Sim estes botões de partilha são mobile friendly.
GEEK NOTE: Se quiserem podem remover serviços de partilha, simplementes removendo a lina de HTML correspondente ao serviço (imagem infra).
Porque é bom utilizar este método (razão)
Vantagens de utilizar botões de partilha pelo GTM
A ideia foi de criar botões de partilha em redes sociais que fossem fáceis de instalar e que não impactassem a velocidade do vosso site.
A velocidade de carregamento do website é cada vez mais importante e o Google Tag Manager faz o carregamento assíncrono.
Neste tipo de botões de partilha por GTM vossos não necessitam de uma empresa/serviço externo que pode medir os vossos utilizadores.
Porque é melhor que serviços como AddThis Share Buttons
Existem algumas desvantagens em utilizar serviços de botões de partilha em redes sociais como AddThis:
- serem demasiado pesados por carregarem vários serviços de partilha
- utilizam cookies e necessitam de concentimento por ser uma empresa externa
- medem os nossos utilizadores e necessitam de concentimento por ser uma empresa externa
Se tiverem feedback ou necessitarem de ajuda estou por aqui e podem sempre falar comigo. Espero que este artigo vos ajude.