O portal MarvelBlog implementou, em 9 de novembro de 2025, um sistema de compartilhamento social que exibe botões flutuantes de Twitter e Facebook ao lado dos artigos. De acordo com o código entregue na atualização do site, a solução utiliza o plugin Sharrre, recursos de jQuery e funções de desacoplamento de eventos para manter desempenho e responsividade.
Como funciona a nova barra de compartilhamento
O script identifica a posição original da barra (.sharrre-container) e recalcula, durante a rolagem, a distância entre o topo da página, o cabeçalho e o final do conteúdo. Dessa forma, a barra permanece visível enquanto o leitor percorre o texto, mas retorna à posição estática quando atinge o rodapé do artigo. Segundo o código, a funcionalidade é obtida com as funções shareScroll e shareMove, acionadas por eventos de scroll e resize.
O trecho também emprega métodos de otimização, como throttle e debounce, para limitar o disparo de cálculos em milissegundos específicos. A abordagem reduz o consumo de recursos e evita travamentos em dispositivos de menor capacidade, prática recomendada por especialistas em performance web.
Além disso, a barra é desativada em telas inferiores a 720 px de largura. Quando o viewport é estreito, o script remove estilos posicionados e recoloca os botões no fluxo normal da página, respeitando padrões de usabilidade em dispositivos móveis.
Integração direta com Twitter e Facebook
Cada botão recebe parâmetros de configuração separados. No Twitter, o compartilhamento permite atribuir créditos de autoria via via: '', enquanto no Facebook o layout definido é box_count, popular por exibir o número de interações acima do ícone. As ações de clique são interceptadas para abrir a janela de compartilhamento original da plataforma, garantindo métricas precisas por meio da própria API social.
Relatórios do setor indicam que widgets de compartilhamento podem aumentar em até 35 % o engajamento, especialmente quando permanecem visíveis durante toda a leitura. O MarvelBlog segue a tendência ao adotar uma solução flutuante, prática já observada em veículos internacionais e em grandes portais brasileiros.
Estratégia de desempenho e experiência do usuário
O código atribui à variável topSpacing margens dinâmicas que consideram a altura do menu de navegação. Esse ajuste impede a sobreposição da barra com elementos fixos do cabeçalho. Outra preocupação é o retardo de dois segundos após o carregamento da página, intervalo que recalcula o comprimento do conteúdo para acomodar imagens carregadas tardiamente, evitando que a barra encubra trechos do texto.
Segundo desenvolvedores consultados, soluções de posicionamento absoluto, como a aplicada pelo MarvelBlog, são preferidas em sites de notícia porque preservam a hierarquia visual sem prejudicar a velocidade. No entanto, a prática exige cálculos constantes de offset, o que explica o uso de bibliotecas de utilitários como Underscore.js para gerenciamento de eventos.
Imagem: David Mumpower
Impacto para leitores e para o mercado editorial
Para o leitor, a principal mudança é a possibilidade de compartilhar trechos do MarvelBlog com um único clique, sem sair do fluxo de leitura. Em termos de mercado, medidas desse tipo têm potencial de ampliar o alcance orgânico, já que cada interação social funciona como recomendação direta. Plataformas de anúncios, como Google AdSense, costumam premiar páginas com maior engajamento, o que pode resultar em melhor eCPM.
Segundo especialistas em marketing digital, a adoção de botões de compartilhamento responsivos também contribui para reduzir a taxa de rejeição, fator observado pelos algoritmos do Google ao ranquear conteúdo no Discover. Assim, o MarvelBlog reforça sua presença em um espaço que premia páginas rápidas, interativas e socialmente ativas.
Curiosidade
Os botões de redes sociais nem sempre acompanharam o usuário pela tela. Em 2010, a maioria dos sites posicionava os ícones apenas no topo ou no final do artigo. O conceito de barra flutuante ganhou força após estudos de eye-tracking demonstrarem que leitores tendem a compartilhar conteúdo no momento em que encontram uma informação impactante, e não necessariamente ao término da leitura.
Para mais informações e atualizações sobre tecnologia e ciência, consulte também:
Quer saber como outras plataformas adotam soluções semelhantes? Acesse a cobertura completa em nossa seção de Tecnologia e descubra as tendências que moldam a experiência de leitura online.
Quando você efetua suas compras por meio dos links disponíveis aqui no RN Tecnologia, podemos receber uma comissão de afiliado, sem que isso acarrete nenhum custo adicional para você!
