Botões de Partilha — Facebook, X, WhatsApp e Mais Sete, Sem Scripts de Terceiros, para PrestaShop

O método habitual custa a privacidade dos seus clientes

A maioria dos módulos de botões de partilha incorpora os widgets das próprias redes. Isso significa que o script do Facebook, o do X e o do LinkedIn carregam nas suas páginas, colocam os cookies deles e registam quem visitou — quer alguém partilhe alguma coisa, quer não.

O resultado é um banner de consentimento, mais um parágrafo na política de privacidade, três pedidos a terceiros em cada página e uma loja mais lenta. Em troca, ganha um botão de partilha.

Este módulo segue exatamente o caminho oposto.

Nada carrega até alguém clicar

Não existe qualquer código de rede social nas suas páginas. Nem adiado, nem carregado preguiçosamente, nem escondido atrás de um ecrã de "clique para carregar" — simplesmente não está lá.

Os botões são elementos <button> HTML normais. O endereço de partilha é montado por um pequeno script nosso, no seu próprio servidor, no momento em que alguém clica — e só então se abre uma janela para o Facebook, o X ou o WhatsApp. Antes desse clique não há nenhum endereço do Facebook na sua página para o navegador pré-ligar, nada que faça fugir um referrer e nada a que consentir.

Os únicos dois ficheiros carregados são nossos e vêm do seu próprio domínio.

Dez sítios para partilhar

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, copiar a ligação e o painel de partilha do próprio telemóvel.

Oito vêm ligados de origem. O Telegram e o Reddit ficam disponíveis para quando os quiser, desligados por predefinição para a fila não ficar sobrecarregada.

Dois deles nunca tocam na internet. O botão de copiar a ligação coloca o endereço na área de transferência. O botão de partilha entrega-o ao painel de partilha do sistema operativo, por isso, no telemóvel, o seu cliente recebe as aplicações reais dele — aquelas em que efetivamente fala com pessoas — em vez do seu palpite sobre quais interessam.

Esse botão nativo só aparece nos navegadores que o suportam, portanto ninguém vê um botão que não faz nada.

Deve parecer a sua loja, não 2013

Quatro definições, e todas as combinações funcionam: preenchido, contorno ou minimal; arredondado, circular ou quadrado; três tamanhos; e cores de marca ou um único tom neutro.

São cinquenta e quatro aspetos diferentes antes sequer de decidir se mostra etiquetas de texto ou um cabeçalho. Os ícones são desenhados como SVG embutido na página — sem tipo de letra de ícones para descarregar, sem sprite de imagens, sem CDN — por isso herdam a cor da folha de estilos e mantêm-se nítidos em qualquer tamanho. Há também um modo escuro que segue a definição do sistema do visitante.

Um limite dito com honestidade: as cores de marca são as verdadeiras e estão fixas por rede. A sua escolha é entre cores de marca e neutro, não um seletor de cor.

Por baixo do produto, ao lado do ecrã ou onde quiser

Por predefinição, aparece uma fila de partilha por baixo do produto. Há também uma barra flutuante — na margem esquerda ou direita, em todas as páginas ou apenas nas de produto — que fica desligada até a ativar e que passa para o fundo do ecrã nos telemóveis.

Além disso, o módulo implementa a interface de widget do PrestaShop, por isso {widget name='socialpower'} coloca os botões em qualquer template do tema. Como todas as colocações passam pelo mesmo código, mover o módulo para outro hook em Aspeto → Posições funciona de verdade, e não pela metade.

3,7 KB e mais nada

Uma folha de estilos e um script — 3,7 KB comprimidos em gzip no total. Sem jQuery. Sem framework. Sem pacote de polyfills. Sem tipo de letra web.

O script é carregado no fim da página, por isso nunca bloqueia a renderização, e termina de imediato nas páginas que não têm botões nenhuns.

Para sermos diretos sobre um ponto: esses dois ficheiros pequenos são registados em todas as páginas do front-office, e não apenas nas que mostram botões. Numa loja normalmente configurada, o PrestaShop agrupa-os com os próprios recursos do tema, pelo que o custo prático é nulo — mas são dois ficheiros, não zero, e preferimos dizê-lo a deixá-lo descobrir sozinho.

O que o módulo não faz, de propósito

Não há contadores de partilhas, e isso é uma decisão, não uma falha. O Facebook, o X e o LinkedIn retiraram os respetivos pontos de contagem públicos entre 2015 e 2018. Qualquer módulo que ainda lhe mostre um número está a mostrar um número desatualizado ou a pagar a um terceiro por ele — e pagar a um terceiro significa enviar-lhe os dados dos seus visitantes. Preferimos não mostrar número nenhum a mostrar um errado.

Não telefona para casa. Sem verificação de licença, sem analítica, sem qualquer chamada para nós.

Nada guardado, em lado nenhum

Sem cookies. Sem armazenamento no navegador. Sem tabelas na base de dados — não são criadas nenhumas, logo não fica nada para trás. O módulo grava doze definições e mais nada, e desinstalá-lo remove também essas.

Duas coisas que vale a pena nomear em vez de passar por cima, porque são APIs do navegador e não exatamente nada. Copiar a ligação usa a Clipboard API, que escreve localmente e não envia nada para lado nenhum. O botão de partilha entrega o endereço ao sistema operativo, e o que o sistema faz a seguir é assunto dele, não nosso. Nenhuma das duas é um problema; ambas merecem ser descritas com honestidade em vez de ficarem por dizer.

Feito para funcionar com teclado

Os botões são elementos <button> a sério, não ligações nem divs estilizadas, por isso recebem foco e ativam-se a partir do teclado como o navegador espera, e os leitores de ecrã anunciam-nos como botões. Cada um traz uma etiqueta com o nome da rede, e os ícones estão ocultos das tecnologias de apoio para nada ser lido duas vezes.

Três limites, ditos com clareza. O contorno de foco do navegador é substituído pelo nosso próprio indicador — uma elevação e uma sombra, que se lê bem nos estilos preenchido e contorno. No estilo minimal essa sombra é deliberadamente suprimida, pelo que o foco de teclado se manifesta aí apenas como uma pequena elevação e uma mudança de opacidade: se entre os seus clientes houver quem navegue por teclado, prefira preenchido ou contorno. E, dos três tamanhos, só o grande cumpre a diretriz de 44 pixels para alvos de toque; o mais pequeno tem 32 pixels.

Configure enquanto olha para o resultado

A página de configuração mostra uma pré-visualização construída a partir das definições que já gravou e do endereço da sua própria loja — o componente real, desenhado pelo mesmo código que a sua loja usa, e não uma captura de ecrã. Grave, e a pré-visualização é redesenhada com o que escolheu, para acertar a forma e o tamanho sem abrir a loja noutro separador. Ela atualiza-se ao gravar, não à medida que vai mexendo nas opções.

Traduzido em oito idiomas

Neerlandês, alemão, espanhol, francês, inglês, italiano, polaco e turco — todas as cadeias de texto, incluindo as que os seus clientes veem: o cabeçalho de partilha, os nomes das redes e a confirmação de cópia.

O português não faz parte dos oito. O módulo não inclui um ficheiro de tradução português, por isso, numa loja em português, os textos aparecem em inglês: o cabeçalho é Share, a confirmação depois de copiar a ligação é Copied! e o botão de copiar diz Copy link. Os nomes das redes — Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit — são iguais em qualquer idioma; o rótulo do e-mail aparece como Email. São poucas palavras e todas reconhecíveis, mas ficam em inglês até alguém as traduzir. Se quiser a loja inteiramente em português, essas cadeias podem ser traduzidas no back-office do PrestaShop, em Internacional → Traduções, escolhendo as traduções de módulos instalados para português — o módulo passa os textos pelo sistema de tradução normal do PrestaShop, portanto o que traduzir aí é o que os clientes passam a ver.

Compatibilidade

PrestaShop 1.7 até 9. Três hooks, mais a interface de widget, sem overrides e sem alterar o tema.

A versão 3 foi reescrita de raiz. Na atualização, as tabelas de base de dados do módulo antigo são eliminadas, os seus dezoito hooks antigos são desregistados e os ficheiros obsoletos são apagados do disco — incluindo as capturas de ecrã dos widgets que costumavam vir com ele.

Perguntas frequentes

Isto carrega o código do Facebook ou do X nas minhas páginas?

Não — e também não de forma adiada ou preguiçosa. Não há nenhum script de rede social nas suas páginas. Os botões são elementos <button> HTML simples e o endereço de partilha é montado pelo nosso pequeno script no momento em que alguém clica. Antes desse clique não há nada de nenhuma rede social na sua página.

Preciso de um banner de cookies por causa disto?

O módulo não lhe dá nada para declarar: não define cookies, não escreve nada no armazenamento do navegador e não faz qualquer pedido a terceiros antes de um clique. Depois de alguém clicar, essa pessoa vai para a página de partilha da rede em questão, e essa é uma relação dela com a rede. O que isso significa para o seu banner em concreto é uma pergunta para quem o aconselha em proteção de dados — podemos dizer-lhe exatamente o que o código faz, que é nada até haver um clique, mas não o que a autoridade de controlo espera da sua loja no seu conjunto.

Que redes estão incluídas?

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, copiar a ligação e o painel de partilha do próprio dispositivo. Oito estão ligadas por predefinição; o Telegram e o Reddit vêm desligados, para os adicionar se quiser.

Mostra o número de partilhas?

Não, de propósito. O Facebook, o X e o LinkedIn desligaram os pontos de contagem públicos há anos, por isso um número hoje ou vem de um terceiro pago — o que significa enviar-lhe os dados dos seus visitantes — ou não é real. Preferimos não mostrar nada a mostrar algo errado.

Onde é que os botões aparecem?

Por baixo do produto, por predefinição. Há também uma barra flutuante para a margem esquerda ou direita, em todas as páginas ou só nas de produto, desligada até a querer. E {widget name='socialpower'} coloca-os em qualquer ponto de um template do tema. Também pode mover o módulo para outro hook em Aspeto → Posições e ele funciona lá corretamente.

Posso mudar as cores?

Pode alternar entre as cores de marca reais de cada rede e um único tom neutro, e escolher preenchido, contorno ou minimal, três formas e três tamanhos. O que não pode fazer é definir uma cor personalizada por rede — as cores de marca são as verdadeiras e estão fixas.

Vai tornar a minha loja mais lenta?

Uma folha de estilos e um script, 3,7 KB comprimidos em gzip no conjunto, sem jQuery e sem qualquer pedido externo. O script carrega no fim da página, por isso nunca a bloqueia. Vale a pena saber: esses dois ficheiros são registados em todas as páginas do front-office e não apenas onde os botões aparecem, ainda que o PrestaShop normalmente os agrupe com os recursos do seu tema.

É acessível?

Mais do que a maioria. Botões a sério em vez de ligações estilizadas, por isso o foco e a ativação por teclado funcionam nativamente e os leitores de ecrã anunciam-nos como deve ser, com uma etiqueta por rede e os ícones ocultos das tecnologias de apoio. Três ressalvas que vale a pena conhecer: o indicador de foco é a nossa elevação com sombra e não o contorno do navegador; essa sombra está desligada no estilo minimal, o que torna o foco de teclado bastante mais ténue aí, portanto escolha preenchido ou contorno se isso lhe importar; e só o tamanho grande cumpre a diretriz de 44 pixels para alvos de toque.

O botão do WhatsApp abre a aplicação no telemóvel?

Sim, embora não detetemos o dispositivo para isso. O botão usa sempre a ligação universal do próprio WhatsApp, e o WhatsApp trata do resto — a aplicação no telemóvel, o WhatsApp Web no computador.

O que é o botão de partilha que só aparece no meu telemóvel?

É o painel de partilha do sistema operativo, alcançado através da Web Share API do navegador. Dá ao seu cliente as aplicações reais dele em vez de uma lista fixa. Só aparece onde o navegador o suporta — o módulo verifica primeiro, por isso a quem visita num computador nunca é mostrado um botão que não faz nada.

Guarda alguma coisa sobre os meus visitantes?

Nada. Sem cookies, sem armazenamento no navegador, sem tabelas na base de dados — não cria nenhuma, logo não há nada para limpar depois. Grava doze definições de configuração e volta a removê-las na desinstalação.

Posso ver como vai ficar antes de gravar?

A pré-visualização da página de configuração é desenhada a partir das definições já gravadas e do endereço da sua loja, com o mesmo código que desenha os botões na sua montra — por isso o que vê é mesmo o que os clientes recebem, e não uma ilustração. Ela é redesenhada ao gravar e não enquanto mexe nas opções: para ver um aspeto novo, grave primeiro.

Em que idiomas é que o módulo fala?

Em oito: neerlandês, alemão, espanhol, francês, inglês, italiano, polaco e turco. Isso inclui as cadeias que os clientes leem mesmo, e não só o back-office. O português não está entre esses oito: sem ficheiro de tradução português, uma loja em português mostra esses textos em inglês — Share, Copy link e Copied! — até serem traduzidos no back-office.

O que aconteceu às minhas definições da versão 2?

A versão 3 foi reescrita e atualiza-se de forma limpa: as tabelas antigas da base de dados são eliminadas, os dezoito hooks antigos são desregistados, os modernos são registados no lugar deles e os ficheiros obsoletos são apagados do disco. Convém depois rever as definições de aspeto, porque agora são mais.