Botão de curtir e compartilhar sem entregar a visita à rede social

O blog de tecnologia da empresa tem, em cada artigo, uma fileira de botões: curtir, compartilhar, seguir. Abra um artigo com o DevTools na aba Network e conte: antes de qualquer clique, a página já falou com três domínios de redes sociais, baixou scripts, abriu iframes e, se o navegador permitir, mandou os cookies da conta de quem está lendo. Ninguém curtiu nada, mas a visita já foi registrada por terceiros. A resposta curta: troque widgets por links de compartilhamento comuns, que não carregam script nenhum. Se um widget for indispensável, carregue só depois que a pessoa pedir, com um clique que diga claramente que conteúdo da rede será carregado.

Na maioria dos sites, os links simples fazem tudo o que o widget fazia, a página fica mais leve e o banner de cookies passa a ter menos coisa para controlar.

O que o widget envia antes do clique

Um botão social embutido não é uma imagem. É um script ou um iframe servido pelo domínio da rede. Para desenhar o botão, o navegador precisa pedir esse conteúdo, e cada pedido leva o IP do visitante, o navegador, o idioma e a hora. Na maioria dos widgets, a URL da página onde o botão está vai como parâmetro, porque a rede precisa saber o que seria curtido. Ou seja, mesmo com uma política de referrer restritiva, a rede sabe exatamente qual artigo foi aberto.

Os cookies dependem do navegador e da configuração. Alguns navegadores bloqueiam ou isolam cookies de terceiros por padrão; outros os enviam em mais situações. Quando o cookie vai junto, a visita fica ligada à conta da pessoa na rede social, mesmo sem clique. E como o widget vem de outro domínio, a rede pode mudar o que ele faz a qualquer momento, sem que você publique nada. Plugins sociais também mudam de forma ou são descontinuados; confira a página oficial antes de depender de qualquer um.

Por isso o widget social é medição ou marketing, não recurso essencial. Ele entra no mesmo controle descrito em banner de cookie honesto: nada antes da escolha, e a recusa precisa impedir o pedido.

Como substituir o widget passo a passo

1. Liste os widgets. Na aba Network, com cache desligado, filtre pelos domínios das redes e anote quais aparecem em cada tipo de página.
2. Pergunte o que cada um entrega. O contador de curtidas mudou alguma decisão nos últimos seis meses? Normalmente a resposta é não.
3. Troque compartilhar por links. Cada rede tem uma URL de compartilhamento que abre a tela de postar com o endereço preenchido. É um link comum, sem script.
4. Ofereça o compartilhamento nativo. No celular, a Web Share API abre a folha de compartilhar do sistema, com todos os apps que a pessoa usa.
5. Se precisar de um widget, use clique para carregar. Mostre um botão seu; o iframe da rede só entra quando a pessoa clicar.
6. Tire widgets de páginas sensíveis. Login, checkout, área do cliente e documentos não precisam de botão social.
7. Teste com recusa. Recuse os cookies e confirme na Network que nenhum domínio de rede social é pedido.

Exemplo: barra de compartilhamento sem script de terceiro

No artigo "Backup que restaura", o HTML gerado pelo servidor já traz as URLs codificadas. Os formatos abaixo são os de uso público mais comum; confira a documentação de cada rede, porque esses endereços mudam de tempos em tempos:

<nav aria-label="Compartilhar este artigo">
  <a href="https://wa.me/?text=Backup%20que%20restaura%20https%3A%2F%2Fblog.exemplo.com.br%2Fbackup"
     target="_blank" rel="noopener noreferrer">WhatsApp</a>
  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.exemplo.com.br%2Fbackup"
     target="_blank" rel="noopener noreferrer">Facebook</a>
  <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fblog.exemplo.com.br%2Fbackup"
     target="_blank" rel="noopener noreferrer">LinkedIn</a>
  <button type="button" data-compartilhar hidden>Compartilhar</button>
</nav>

Gere a parte codificada no servidor com a função de codificação de URL da sua linguagem (encodeURIComponent em JavaScript, rawurlencode em PHP). O rel="noopener noreferrer" impede que a aba aberta controle a sua e evita enviar o cabeçalho de referência. Nada é pedido à rede até a pessoa clicar.

O botão nativo aparece só onde o navegador suporta:

const botao = document.querySelector('[data-compartilhar]');

if (botao && navigator.share) {
  botao.hidden = false;
  botao.addEventListener('click', async () => {
    try {
      await navigator.share({ title: document.title, url: location.href });
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('Falha ao compartilhar', err);
      }
    }
  });
}

O AbortError é a pessoa fechando a folha de compartilhar, o que não é erro.

Exemplo: widget que só carrega quando a pessoa pede

Se o marketing faz questão do botão oficial, coloque no lugar dele uma caixa com texto claro. O endereço do iframe vem do gerador oficial da rede e fica num atributo, sem ser carregado:

<div data-widget-social data-titulo="Botão da rede social"
     data-src="URL_DO_IFRAME_GERADA_PELO_SITE_OFICIAL">
  <button type="button">Mostrar botão da rede social (carrega conteúdo da rede)</button>
</div>

<script>
document.querySelectorAll('[data-widget-social]').forEach((caixa) => {
  caixa.querySelector('button').addEventListener('click', () => {
    const iframe = document.createElement('iframe');
    iframe.src = caixa.dataset.src;
    iframe.title = caixa.dataset.titulo;
    iframe.width = '300';
    iframe.height = '80';
    caixa.replaceChildren(iframe);
  }, { once: true });
});
</script>

O clique é uma escolha explícita para aquele widget, naquela página. Se o site usa uma política de segurança de conteúdo (CSP), libere o domínio da rede só em frame-src, não em script-src.

E o contador de curtidas?

É a objeção mais comum, e a resposta costuma ser simples: o número aparece na rede, não precisa aparecer no seu artigo. Se o time quer saber quanto o conteúdo circula, a ferramenta de análise da própria rede mostra isso na página da empresa, sem rastrear quem só leu o texto no seu site. Medir cliques nos links de compartilhamento também é possível na sua própria análise, dentro do que o consentimento cobre.

O mesmo raciocínio vale para o SDK completo da rede, que costuma vir junto com os botões e pesa mais ainda; ele tem um guia próprio em SDK social no carregamento.

Erros comuns

• Widget no template global. Toda página, inclusive login e checkout, passa a avisar a rede de cada visita.
• Tratar o botão como essencial. Ele carrega antes do banner e a recusa não impede nada.
• Achar que sem clique não há envio. O pedido sai para desenhar o botão, com a URL da página junto.
• Iframe com permissão de script liberada na CSP inteira. Um domínio de terceiro ganha poder de rodar código em todas as páginas.
• Não testar com cookies recusados. O plugin de consentimento promete bloquear e o widget continua aparecendo na Network.
• Manter o widget pelo contador. Você paga em privacidade e desempenho por um número que ninguém usa.

Checklist

• Nenhum domínio de rede social aparece na Network antes de um clique.
• Compartilhar usa links comuns, gerados com codificação correta.
• O botão nativo aparece só quando navigator.share existe.
• Widgets indispensáveis carregam só depois de um clique explícito.
• Login, checkout e área do cliente não têm botão social.
• Com cookies recusados, nenhum script de rede é pedido.
• Links externos usam rel="noopener noreferrer".

Abra o artigo mais lido do seu blog com a aba Network aberta e não clique em nada: quantos domínios de redes sociais a página chamou antes de a pessoa decidir qualquer coisa?