Adicionar uma barra flutuante de compartilhamento social pode melhorar muito a visibilidade do seu conteúdo e incentivar os leitores a promovê-lo nas redes sociais. Uma barra flutuante acompanha o usuário enquanto ele rola a página, facilitando o compartilhamento do conteúdo em qualquer momento.
Ao gerenciar nossos próprios sites, vimos o impacto das barras flutuantes de compartilhamento social no aumento do engajamento e do tráfego. Ao adicionar estrategicamente esse recurso aos nossos sites, observamos um aumento notável nos compartilhamentos sociais e um alcance maior para nosso conteúdo.
Quer você esteja gerenciando um blog ou um negócio, adicionar uma barra flutuante de compartilhamento social pode ser uma maneira simples de incentivar o engajamento e expandir sua presença online.
Neste artigo, vamos guiá-lo pelo processo de adicionar uma barra flutuante de compartilhamento social ao seu site WordPress. Nossas instruções passo a passo tornam isso simples, mesmo para iniciantes.
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.
Fora isso, uma barra de compartilhamento social flutuante pode melhorar indiretamente o ranking do seu site, aumentando os sinais sociais. Quando os usuários compartilham seu conteúdo nas redes sociais, isso gera backlinks para o seu site, o que pode impactar positivamente seus rankings nos motores de busca.
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 de Compartilhamento Social Flutuante com um Plugin
- Bônus: Adicionar uma Barra Social Flutuante no WordPress
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 snippets de código pré-fabricados, incluindo uma solução pronta para adicionar uma barra de compartilhamento social flutuante. Isso elimina a necessidade de codificação personalizada e facilita a implementação deste 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 de trechos de código, 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.
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 de Compartilhamento Social Flutuante 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 flutuante de compartilhamento social, basta alternar o botão 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 compartilhem facilmente seu conteúdo.
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 Social Flutuante no WordPress
Se desejar, você também pode adicionar uma barra social 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.
Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra flutuante de compartilhamento social no WordPress. Você também pode querer ver nosso guia para iniciantes sobre como adicionar botões de compartilhamento social no WordPress e nossas principais escolhas para os melhores plugins de mídia social para expandir seu site.
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.