Fazer com que os leitores compartilhem seu conteúdo é uma das melhores maneiras de alcançar um novo público. No entanto, os botões de compartilhamento padrão geralmente desaparecem de vista no momento em que um visitante começa a rolar a página.
Uma barra flutuante de compartilhamento social resolve isso, permanecendo visível o tempo todo, tornando conveniente para os leitores promoverem sua postagem. Testamos essa colocação em nossos próprios sites e descobrimos que ela consistentemente gera mais cliques e tráfego.
Neste guia, mostraremos como adicionar uma barra flutuante de compartilhamento social no WordPress.
Por que adicionar uma barra flutuante de compartilhamento social no WordPress?
Adicionar uma barra de compartilhamento social proeminente facilita para os visitantes compartilharem seu conteúdo em plataformas de mídia social como Instagram, Facebook e Twitter. Ao manter essa barra visível enquanto rola a página, você oferece uma maneira conveniente para os usuários compartilharem seu conteúdo a qualquer momento.
Isso pode levar a um aumento no engajamento, tráfego e reconhecimento da marca. Além disso, pode motivar os usuários a deixar comentários e curtidas ou seguir suas atualizações.
Além disso, uma barra flutuante de compartilhamento social pode melhorar indiretamente o SEO do seu site. Quando mais usuários compartilham seu conteúdo nas redes sociais, isso aumenta sua visibilidade e tráfego, o que melhora a probabilidade de obter backlinks de outros sites.
Dito isso, vamos dar uma olhada em como adicionar facilmente uma barra de compartilhamento social flutuante no WordPress. Neste tutorial, discutiremos um método de código e um método de plugin. Você pode usar os links abaixo para pular para a abordagem de sua escolha:
- Método 1: Adicionar uma Barra de Compartilhamento Social Flutuante com WPCode
- Método 2: Adicionar uma Barra Flutuante de Links de Mídia Social com um Plugin
- Bônus: Adicionar uma Barra Flutuante de Seguidores Sociais no WordPress
- Perguntas Frequentes Sobre Barras Flutuantes de Compartilhamento Social
- Recursos Adicionais
Método 1: Adicionar uma Barra de Compartilhamento Social Flutuante com WPCode
Se você está procurando uma maneira personalizável e fácil de adicionar uma barra de compartilhamento social flutuante no WordPress, então este método é para você.
Para esta abordagem, usaremos o WPCode porque é o melhor plugin de snippets de código para WordPress do mercado. Para mais informações sobre esta ferramenta, confira nossa análise completa do WPCode.
O WPCode possui uma extensa biblioteca de trechos de código pré-fabricados, incluindo uma solução pronta para usar para adicionar uma barra flutuante de compartilhamento social. Isso elimina a necessidade de escrever código do zero e facilita a implementação desse recurso em seu site.
Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais informações, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Observação: O WPCode possui uma versão gratuita. No entanto, para desbloquear a biblioteca completa de snippets de código (incluindo este snippet específico), você precisará do plano pro do plugin.
Após a ativação, acesse a página Code Snippets » + Add Snippet no painel do WordPress e use a caixa de pesquisa para localizar o trecho 'Floating Social Media Icons'.
Assim que fizer isso, basta clicar no botão ‘Use snippet’ abaixo dele.
Isso abrirá a página ‘Edit Snippet’ em sua tela. Você notará que o trecho de código para a barra flutuante de mídias sociais, com links para Facebook, Instagram, Twitter e LinkedIn, já foi adicionado à caixa ‘Code Preview’.
Agora você pode usar o trecho de código como está ou rolar para baixo e alterar a posição, margem, largura, cor de fundo, altura e raio da borda dos ícones.
Por exemplo, a cor de fundo desses ícones de mídia social é preta por padrão. No entanto, você pode substituí-la pelo código hexadecimal de uma cor que combine melhor com sua marca. Se você não souber o código da sua cor, pode usar uma ferramenta gratuita de seleção de cores online para encontrá-lo.
Depois disso, role de volta para o topo e alterne o botão ‘Inativo’ para ‘Ativo’.
Em seguida, clique no botão ‘Atualizar’ para salvar suas configurações e adicionar uma barra flutuante de compartilhamento social.
Agora você pode visitar seu site para ver os ícones de mídia social em ação.
Veja como ficou em nosso site de demonstração.
Método 2: Adicionar uma Barra Flutuante de Links de Mídia Social com um Plugin
Se você não quiser usar código personalizado em seu site, este método é para você. Dito isso, lembre-se de que você não terá tantas opções de personalização com essa abordagem.
Primeiro, você precisa instalar e ativar o plugin Floating Social Share Icons. Para detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.
Após a ativação, visite a página Floating Links & Social Icons no painel do WordPress. Por padrão, o plugin adicionará automaticamente ícones flutuantes que permitem aos usuários visitar a página inicial, a próxima postagem, a postagem anterior, o topo da página e o final da página, além de copiar o URL atual.
No entanto, se você não precisar de nenhuma dessas funcionalidades, pode desativar o botão para essas opções. Assim que fizer isso, suas alterações serão sincronizadas automaticamente.
Depois disso, vá para a página Floating Links & Social Icons » Social Icons na barra lateral do administrador.
Para personalizar sua barra social flutuante, basta alternar o interruptor ao lado das plataformas de mídia social desejadas. Isso fará com que os ícones correspondentes apareçam em sua barra, permitindo que os visitantes visitem facilmente seus perfis de mídia social.
Suas configurações serão salvas automaticamente assim que você fizer as alterações.
Em seguida, você pode visitar seu site WordPress para ver a barra flutuante de compartilhamento social em ação.
Bônus: Adicionar uma Barra Flutuante de Seguidores Sociais no WordPress
Se você deseja aumentar seu número de seguidores nas redes sociais, também pode adicionar uma barra flutuante com botões de seguir no WordPress.
Isso permite que os visitantes se conectem facilmente aos seus perfis de mídia social e fiquem atualizados sobre suas últimas notícias e eventos. Ao tornar conveniente para os usuários seguirem você nas mídias sociais, você pode expandir seu alcance e promover uma comunidade dedicada.
Para fazer isso, você precisará do OptinMonster, que é a melhor ferramenta de geração de leads do mercado. Além disso, ele vem com um modelo pré-fabricado para criar uma barra social flutuante.
Primeiro, visite o site do OptinMonster e crie uma conta. Lembre-se de que você precisará adquirir o plano Basic, pois ele inclui o tipo de campanha Floating Bar.
Em seguida, acesse seu painel do WordPress para instalar e ativar o plugin OptinMonster connector. Para mais detalhes, consulte nosso tutorial sobre como instalar um plugin do WordPress.
Após a ativação, você verá a tela de boas-vindas e o assistente de configuração. Clique no botão ‘Conectar sua conta existente’.
Em seguida, siga as instruções na tela para conectar sua conta OptinMonster ao WordPress.
Uma vez feito isso, vá para a página OptinMonster » Templates no painel do WordPress e selecione ‘Floating Bar’ como o tipo de campanha.
Em seguida, clique no botão ‘Usar Template’ para o modelo ‘Follow on Social Media’. Isso abrirá um prompt onde você deve adicionar um nome para a campanha que está prestes a criar.
O construtor de arrastar e soltar do OptinMonster será iniciado na sua tela.
É aqui que você pode projetar sua barra flutuante.
O plugin oferece diferentes blocos que você pode simplesmente arrastar e soltar no modelo. Por exemplo, você pode adicionar uma imagem, texto, botão e muito mais à sua barra de mídia social.
Para saber mais, veja nosso tutorial sobre como adicionar uma barra de alerta no WordPress.
Depois disso, clique nos botões de seguir nas redes sociais dentro da barra flutuante. Isso abrirá algumas novas configurações na coluna da esquerda.
Aqui, você pode adicionar o URL para suas páginas do Facebook, Instagram e Twitter, respectivamente.
Quando terminar, mude para a aba 'Publicar' no topo e altere o status da campanha para 'Publicar'. Em seguida, você precisará clicar no botão 'Salvar' e fechar o construtor visual.
Agora você pode visitar seu site WordPress para ver a barra social flutuante em ação.
Perguntas Frequentes Sobre Barras Flutuantes de Compartilhamento Social
Em nossa experiência ajudando usuários a aumentar seu alcance social, frequentemente encontramos perguntas específicas sobre a configuração de botões de compartilhamento. Aqui estão as respostas para algumas das perguntas mais comuns sobre barras flutuantes de compartilhamento social no WordPress.
1. Adicionar uma barra flutuante de compartilhamento social deixará meu site lento?
Plugins sociais mal codificados podem deixar seu site lento ao carregar muitos scripts externos. No entanto, usar uma solução leve como o snippet da biblioteca WPCode garante que a velocidade do seu site permaneça rápida, ao mesmo tempo em que oferece recursos de compartilhamento.
2. Uma barra de compartilhamento flutuante afeta a experiência do usuário no celular?
Barras flutuantes às vezes podem bloquear conteúdo em telas menores. Recomendamos configurar as definições da sua barra flutuante de compartilhamento social para ocultá-la em dispositivos móveis ou para aparecer como um rodapé fixo na parte inferior da tela.
3. Quais plataformas de mídia social devo incluir na barra flutuante?
Você deve priorizar as plataformas onde seu público específico é mais ativo. Para a maioria dos blogs e empresas, adicionar Facebook, Twitter (X) e LinkedIn à sua barra flutuante de compartilhamento social proporciona os melhores resultados.
4. Posso adicionar uma barra de compartilhamento flutuante sem um plugin?
Sim, você pode codificar uma barra de compartilhamento flutuante usando HTML e CSS, mas isso requer conhecimento técnico. Sugerimos usar o WPCode porque ele permite inserir o código necessário com segurança sem editar os arquivos do seu tema diretamente.
Recursos Adicionais
Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra de compartilhamento social flutuante no WordPress. Você também pode querer ver estes recursos adicionais:
- Melhores Plugins de Redes Sociais para WordPress (Escolha de Especialista)
- Como adicionar botões de compartilhamento social no WordPress
- Melhores Ferramentas de Monitoramento de Mídias Sociais Para Usuários de WordPress
- Como Adicionar Caixas de Clique para Tweet em Seus Posts do WordPress
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
zak
Qual plugin de mídia social você usa neste site? Porque parece diferente da sua barra flutuante de compartilhamento social?
WPBeginner Support
Olá zak,
Sim, foi escrito especificamente para o WPBeginner.
Admin
Stephanie
Como você adiciona os botões de compartilhamento na parte inferior do post em vez da parte superior?
Obrigado
Ralph Eastwood
Acabei de instalar o plugin. Parece bom. Existe uma maneira de ter a barra na parte inferior do post? Parece mais sensato tê-la lá. As pessoas vão compartilhar um post depois de lê-lo e achar que há valor – não quero depender delas rolarem tudo de volta para o topo apenas para compartilhar!
Laura
Instalei, ativei e adicionei o Facebook à caixa 'serviços sociais habilitados'. Não tenho uma conta de usuário do Twitter, então deixei essa parte em branco. Salvei as configurações, mas a aba do Facebook não aparece no meu site! Perdi alguma coisa? Obrigado
sham
Minha contagem social voltou a zero após a migração para HTTPS. Como corrigir isso?
Alan
Suas instruções dizem: “Em seguida, adicione seu ID do Twitter no campo…”
Eu mesmo não tenho uma conta no Twitter. Não posso usar este plugin sem me inscrever no Twitter? (Estou no Facebook e LinkedIn.)
Equipe Editorial
Não habilite o botão de compartilhamento do Twitter ou simplesmente deixe-o em branco. Ele permite que você ganhe mais seguidores se inserir o ID do Twitter lá.
Admin
Siska
Eu gostaria de usar este plugin, mas não consigo encontrar uma maneira de mudar a cor de fundo… Meu site não é branco.
Siska
Eu gostaria de usar este plugin, mas não consigo encontrar uma maneira de mudar a cor de fundo… Meu site não é branco.
WPBeginner Support
Tente adicionar isto na folha de estilo do seu tema:
#fsb-social-bar { border-bottom: 1px solid #f1f1f1; border-top: 1px solid #f1f1f1; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #222; position: relative; clear: both; }1-click Use in WordPress
Admin
Jean
Obrigado por isto! Como você faria para rastrear os compartilhamentos como uma meta no Google Analytics?
Elisa
Erro ao clicar no botão google +1. Recebo um triângulo vermelho e não consigo resolver.
Ajuda !!!
Rick
Como posso desativar a exibição do número de vezes que foi compartilhado? Não quero que a contagem de compartilhamentos seja mostrada.
Rebecca
Olá, bom plugin. Estou tendo um problema, porém, quando uso o botão “pin it”, ele corta a foto. Como posso evitar isso?
Skwty
Só queria avisar que seu plugin Floating Social Bar estava causando problemas com o meu tema WP-Bold. Ele removia o trecho do widget que eu usava para exibir conteúdo relacionado na barra lateral. O título estava lá, mas apenas no single.php o trecho desaparecia. O suporte do Solostream mencionou que eu deveria dizer algo. Mudei para outro plugin por causa disso, mas preferiria muito usar o Floating Social Bar.
Obrigado!
Zomi Daily
Você pode incluir o botão de Compartilhamento do Facebook, por favor?
Jon Brown
Você ainda planeja lançar uma versão que inclua contagens de comentários como este site faz? Mesmo que não esteja pronto para lançamento, esse código está público?
Jorge
Hi! Thanks for the great plugin. I have some questions when people press like or +1 do they share the post in my blog too? How can people share my content from the social bar? What is the capital of North Dakota
Thanks again!
Julius
Ótimo plugin, mas infelizmente consome muitos recursos. O plugin P3 mostra que ele consome 51% de todos os meus plugins (tenho 12 plugins).
WPBeginner Support
Nós o usamos em nossos próprios sites e somos muito conscientes sobre a velocidade da página. Quanto ao plugin P3, os resultados dos testes podem ser afetados por muitos fatores, como outros serviços em execução em seu servidor, se você estiver em um servidor compartilhado, isso também afetará os resultados.
Admin
Urmet
Ótimo plugin – gostaria de saber uma coisa – posso tê-lo desta forma que o contador carrega imediatamente – como você tem em sua própria página – os números de compartilhamento são visíveis mesmo que eu não esteja passando o mouse sobre o plugin.
Haider
Ótimo Plugin de Fato!
I finally activated and modified it a little to suit my theme
Tenho algumas dúvidas:
1. Você planeja incluir o novo botão de compartilhamento do Facebook junto com o botão de curtir? Por favor, considere isso.
2. Não seria melhor gerenciar o estilo com um arquivo CSS separado em vez de CSS inline? Muitos temas premium têm a opção de CSS personalizado que é adicionado ao cabeçalho; mas isso não funciona neste caso. Eu tive que modificar o arquivo do plugin para alterar os estilos.
Muito obrigado por um produto tão incrível!
Jenn Marie
Olá! De uma pessoa de alta qualidade para outra: eu te vejo. Este plugin é demais, e suspeito que seja devido à meticulosidade que vejo em todo o seu trabalho!
Uma pergunta: alguma ideia de por que a barra não fica fixa para mim no iPhone (iOS7)? Estou usando Point, um tema responsivo. Tentei desativar outros plugins sociais.