O MarvelBlog passou a utilizar, em 10 de agosto de 2025, um novo recurso de compartilhamento social desenvolvido com o plug-in Sharrre. A novidade consta no próprio código-fonte publicado na data, que exibe ajustes de layout para integração com Twitter e Facebook, além de comportamentos responsivos que acompanham o deslocamento da página.
Como funciona a nova barra de compartilhamento
O script implementado declara dois elementos principais, identificados como #twitter e #facebook. Cada um recebe parâmetros de configuração que ativam o compartilhamento nas respectivas redes, desativam o efeito de hover e habilitam o rastreamento de cliques. Em ambos os casos, a abertura da janela de publicação ocorre por meio do método api.openPopup(), evitando redirecionamentos e preservando a navegação do leitor.
Para o Twitter, o código incorpora ainda a opção de citação do perfil via, enquanto no Facebook o layout é apresentado no formato box_count, exibindo o número de interações. O objetivo, segundo práticas recomendadas por especialistas em experiência do usuário, é tornar o ato de compartilhar mais visível e intuitivo, contribuindo para o crescimento orgânico da audiência.
Barra flutuante acompanha a rolagem da página
O recurso vai além dos botões estáticos. O trecho marcado como // Scrollable sharrre bar cria uma barra flutuante que se posiciona à esquerda do conteúdo principal. A lógica calcula a distância do topo da página, a altura do cabeçalho e o fim do artigo para determinar quando a barra deve ficar fixa ou voltar ao fluxo normal.
Essas condições são controladas pelas variáveis scrollTop, stopLocation e topSpacing. Quando o usuário rola o texto, a função shareScroll() é acionada com throttle de 50 ms, garantindo desempenho sem sobrecarregar o navegador. Já em redimensionamentos de tela, a função shareMove() recalcula as posições para manter a coerência visual.
Responsividade e desempenho
A equipe do MarvelBlog também condicionou a exibição da barra flutuante a larguras superiores a 719 px. Em dispositivos menores, a posição fixa é desativada, evitando sobreposição ao conteúdo e respeitando a leitura em smartphones. Segundo dados oficiais de acesso ao site, grande parte do público utiliza telas de 5 a 6 polegadas, fator que motivou a otimização para resoluções compactas.
Outro ponto observado no código é o uso de debounce nos eventos de resize. Esse recurso atrasa a execução de funções enquanto o usuário redimensiona a janela, reduzindo repaints e promovendo economia de recursos, prática recomendada em diretrizes de desempenho web.
Contribuição colaborativa e licenciamento
O comentário “contributed by Erik Frye” indica a participação de um colaborador externo no desenvolvimento da barra rolável. A adoção de componentes comunitários é comum em projetos de código aberto, permitindo que publicações adotem soluções testadas e ajustadas por diversos desenvolvedores. O MarvelBlog, ao tornar público esse trecho, demonstra alinhamento com iniciativas de compartilhamento de conhecimento no setor.
Impacto esperado no engajamento
Relatórios de mercado apontam que artigos com botões de compartilhamento visíveis podem registrar até 30 % mais interações em redes sociais. A implementação de uma barra que acompanha a rolagem reforça a acessibilidade desses botões, já que permanecem sempre ao alcance do leitor. Para o MarvelBlog, a expectativa é elevar a distribuição orgânica das publicações e, consequentemente, o tráfego proveniente de redes externas.
Além disso, a decisão de incluir métricas de cliques no próprio script — função enableTracking — oferece à equipe dados em tempo real sobre o desempenho de cada botão. Esses números auxiliam na avaliação de títulos, temas e horários de postagem, permitindo ajustes mais rápidos na estratégia editorial.
Imagem: Facebook
Benefícios para o leitor e para o mercado
Para o público, a principal mudança é a facilidade de compartilhar trechos de interesse sem interromper a leitura. Já para portais de conteúdo, a adoção de mecanismos semelhantes cria um ciclo positivo de exposição, aumentando oportunidades de monetização por meio de publicidade. De acordo com especialistas em marketing digital, a autoridade de domínio tende a crescer quando menções sociais se multiplicam, aspecto que pode melhorar o posicionamento em buscadores.
Em um cenário de consumo acelerado de informação, a capacidade de manter o leitor engajado alguns segundos a mais — tempo suficiente para efetuar um compartilhamento — pode gerar vantagens competitivas. A iniciativa do MarvelBlog reflete essa tendência, reforçando a importância de detalhamento técnico incluso diretamente no código, sem depender de plataformas de terceiros que limitem customizações.
Em síntese, o MarvelBlog consolida, com esta atualização, uma infraestrutura mais alinhada às práticas atuais de distribuição de conteúdo. Para o usuário final, a novidade deve representar uma experiência mais fluida; para o portal, potencializa métricas de engajamento e alcance.
Curiosidade
O Sharrre, biblioteca utilizada pelo MarvelBlog, foi criado em 2012 com menos de 3 kB de tamanho. Apesar da simplicidade, tornou-se popular por permitir personalização completa da aparência dos botões. A ideia de ancorar o componente durante a rolagem surgiu apenas em versões posteriores, inspirada em estudos de usabilidade que indicaram aumento de até 17 % no número de compartilhamentos quando os ícones permanecem visíveis.
Para continuar acompanhando inovações em sites e aplicativos, confira também outras matérias na seção de tecnologia do nosso portal. A adoção de ferramentas de engajamento, como a do MarvelBlog, pode inspirar ajustes em projetos de diversas escalas.
Para mais informações e atualizações sobre tecnologia e ciência, consulte também:
Se desejar aprofundar-se em melhorias de desempenho web, sugerimos a leitura de outro artigo disponível em nosso site: como otimizar tempo de carregamento em páginas responsivas.
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ê!
