O MarvelBlog, site dedicado a notícias sobre o universo dos quadrinhos, incorporou uma nova barra de compartilhamento social em sua publicação de 7 de setembro de 2025. O recurso, assinado pelo desenvolvedor David Mumpower e atualizado em 5 de setembro do mesmo ano, utiliza o plugin jQuery Sharrre para integrar botões de Twitter e Facebook e reposicionar o componente conforme o usuário rola a página.
Configuração dos botões de redes sociais
O script inicia assim que o documento é carregado. Com a chamada $(document).ready(), o código encapsula toda a lógica de configuração. No trecho dedicado ao Twitter, o seletor #twitter recebe a função sharrre com as seguintes opções:
- share: { twitter: true } — habilita o compartilhamento na rede.
- template: ” — define um layout vazio, permitindo personalização visual posterior.
- enableHover e enableTracking — ambos definidos como false para reduzir chamadas desnecessárias.
- buttons: { twitter: { via: ” } } — zera o parâmetro “via”, evitando menções automáticas.
- click — abre a janela de compartilhamento ao acionar o botão.
O mesmo padrão é repetido para #facebook, com a diferença no objeto share, que aponta para facebook, e em buttons.layout, configurado como ‘box_count’ para exibir o contador de partilhas.
Barra rolável e reposicionamento inteligente
Para garantir que a barra permaneça visível sem atrapalhar a leitura, o código cria uma variável $_shareContainer e monitora a posição do elemento com relação ao topo do cabeçalho ($_header) e ao fim do artigo ($_postEntry). A função shareScroll() determina três situações-chave:
- Topo da página — enquanto o leitor ainda não alcançou o início do conteúdo principal, a barra é posicionada de forma absoluta, acompanhando a margem superior.
- Rolagem intermediária — quando o visitante passa da altura estipulada em topSpacing, a barra muda para position: fixed e permanece visível no canto definido.
- Fim do artigo — ao atingir o rodapé do texto, a barra volta a ser relativa para evitar sobreposição com elementos finais.
A função shareMove(), acionada em eventos de resize, recalcula posições sempre que a largura da janela é alterada. Esse ajuste é essencial para dispositivos de tamanhos variados, especialmente porque o código limita a ativação da barra fixa a resoluções acima de 719 pixels, buscando uma experiência consistente em telas de smartphones.
Performance e otimizações
Para reduzir impactos no desempenho, o script emprega dois métodos de controle de frequência de eventos: _.throttle para scroll e _.debounce para resize. Essas técnicas, comuns em bibliotecas como Lodash, restringem o número de execuções por segundo, evitando cálculos repetitivos que poderiam sobrecarregar o navegador.
Outra precaução adotada é o setTimeout de dois segundos, responsável por recalcular a variável contentBottom depois que imagens carregadas tardiamente alteram o comprimento da página. Com isso, a barra de compartilhamento continua a respeitar o limite inferior do texto, mesmo quando novos elementos aumentam a altura do artigo.
Detalhes técnicos da implementação
O controle de espaçamento vertical é centralizado na função _setTopSpacing(). Se a largura da janela ultrapassa 1.024 pixels, o script adiciona a altura da navegação principal (.nav-wrap) ao valor base de 20 pixels. Caso contrário, mantém apenas essa margem mínima. Esse cálculo garante que a barra não encoste no topo do navegador, independentemente da presença de menus fixos ou cabeçalhos expansíveis.
Imagem: Disney
Quando a rolagem atinge limites específicos, o script altera dinamicamente as propriedades top, left e position de $_shareContainer. Ao voltar para a posição original, ele redefine esses atributos para evitar estilos residuais, uma prática recomendada para compatibilidade entre navegadores.
Implicações para leitores e editores
Para o público do MarvelBlog, a mudança simplifica o ato de compartilhar reportagens em redes sociais, tornando o processo acessível em qualquer ponto da leitura. Do ponto de vista editorial, a solução pode ampliar o alcance orgânico dos conteúdos, já que facilita a divulgação espontânea por parte dos fãs. Além disso, o uso de chamadas assíncronas e otimizações de eventos ajuda a manter o tempo de carregamento em níveis aceitáveis, um fator relevante para SEO, segundo diretrizes de desempenho publicadas pelo Google.
Se você se interessa por outras implementações de recursos web que impactam a experiência do usuário, vale conferir os artigos disponíveis na seção de tecnologia do portal Remanso Notícias.
Curiosidade
O plugin Sharrre utilizado pelo MarvelBlog foi criado originalmente em 2012 para facilitar a contagem de compartilhamentos sem sobrecarregar páginas com múltiplas requisições externas. Embora redes como o Twitter tenham alterado sua API ao longo dos anos, a biblioteca continua popular entre desenvolvedores que buscam integrar botões sociais de forma leve e personalizável, alinhando design e desempenho em projetos online.
Para mais informações e atualizações sobre tecnologia e ciência, consulte também:
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ê!
