Como Adicionar uma Barra Flutuante de Compartilhamento Social no WordPress

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.

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.

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

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.

Clique em Usar Snippet para o snippet de ícones de mídia social flutuantes

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.

Personalizar barra flutuante de compartilhamento social

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.

Ativar a atualização do snippet de código

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.

GIF da barra flutuante de compartilhamento social

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.

Remover ícones desnecessários alternando o interruptor

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.

Adicionar barra flutuante de compartilhamento social no WordPress

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.

GIF para barra flutuante de compartilhamento social

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.

Site OptinMonster

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’.

Conecte 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.

Selecionar modelo de barra social para seguir

O construtor de arrastar e soltar do OptinMonster será iniciado na sua tela.

É aqui que você pode projetar sua barra flutuante.

Personalize a barra social de acordo com seu gosto

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.

Adicionar URLs para suas páginas e IDs de mídia social

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.

Barra flutuante de compartilhamento social no WordPress

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.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

123 CommentsLeave a Reply

  1. 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!

  2. 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

  3. 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.)

  4. Como posso desativar a exibição do número de vezes que foi compartilhado? Não quero que a contagem de compartilhamentos seja mostrada.

  5. Olá, bom plugin. Estou tendo um problema, porém, quando uso o botão “pin it”, ele corta a foto. Como posso evitar isso?

  6. 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!

  7. 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?

  8. 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!

  9. Ótimo plugin, mas infelizmente consome muitos recursos. O plugin P3 mostra que ele consome 51% de todos os meus plugins (tenho 12 plugins).

    • 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

  10. Ó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.

  11. Ó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!

  12. 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.

  13. Muita gente como eu está tendo problemas com sua barra flutuante que não funciona. Você verifica os comentários de suporte? Acho que a única opção é assumir que, como você não aborda os motivos pelos quais sua barra flutuante não funciona, ela deve estar quebrada e eu devo procurar outra solução. (Rosto triste)

  14. Olá, obrigado por compartilhar este plugin. Sempre que clico em 'Curtir' na barra social flutuante, uma janela aparece para eu compartilhar com meus amigos. Mas a janela está cortada, mostrando apenas o lado esquerdo. Isso só acontece com o botão Curtir do Facebook e não com o G+. Você sabe como consertar isso?

    • Brian, tente adicionar isso à sua folha de estilos ou à caixa de CSS personalizado do seu tema:

      /* para corrigir o corte de popup semelhante a post do fb */
      .fb-like iframe {
      max-width: inherit !important;
      }

      Eu estava tendo o mesmo problema e isso funcionou imediatamente!

  15. Eu amei absolutamente este plugin. Fiz algumas alterações eu mesmo para torná-lo melhor para o meu blog.

    Eu também estou usando o Sticky Header da ThematoSoup. Então, quando o cabeçalho fixo é rolado para baixo, a barra social flutuante se sobrepõe perfeitamente.

    O problema é o fundo da barra e a imagem fsb-sprite.
    Então editei o css deste plugin para remover a cor de fundo da barra e removi o fundo da imagem fsb-sprite.

    Você pode ver isso funcionando em qualquer postagem do meu blog. Meu blog: Techpingo[dot]com.

    Minha pergunta: Na versão gratuita, uma imagem é usada como botões e os contadores são colocados corretamente. Mas como posso usar uma versão personalizada com botões reais como os seus no blog “wpbeginner.com” e no blog irmão “list25.com”.

    Por favor, me diga como fazer isso, mas não me diga não.

  16. Olá,

    Só queria saber se a barra pode ser desativada para dispositivos móveis, pois o compartilhamento social é nativo no iOS, etc. Se sim, como.

    Desculpe, se você já abordou a questão em conversas anteriores, dei uma olhada rápida e não encontrei ninguém sobre isso.

    Obrigado

  17. Olá, instalei no meu site e está funcionando muito bem. Quero mudar a cor de fundo da barra de compartilhamento para que combine com a cor de fundo do meu blog. Tentei no arquivo CSS, mas não tive sucesso. Alguém pode me ajudar como fazer isso? Obrigado.

    • Muhammad, você pode tentar criar seu próprio arquivo fsb-sprite.png com um fundo transparente. Este arquivo está localizado na pasta de imagens do tema e atualmente as imagens dos botões estão em um fundo branco. Você precisará de um programa de edição de imagens que suporte tela transparente, como o Adobe Fireworks.

  18. Olá, estamos recebendo um loop de redirecionamento no botão do Pinterest, todos os outros parecem funcionar bem. Alguma ideia do que podemos estar fazendo de errado?

    • Está funcionando bem em nosso site de teste. Por favor, tente desativar outros plugins de mídia social e veja se isso funciona. Se funcionar, por favor, nos avise sobre o plugin que estava em conflito.

      Admin

      • Olá, obrigado. O botão do Pinterest em nosso site funciona para você? – http://digitalvillas.com/portfolio/dvr43-modern-fantasy-villa/

        O único outro plugin social nesse tema é o ‘Facebook Social Plugin Widgets’, então adicionamos o plugin a um novo site de demonstração que estamos criando para testá-lo, este site usa um tema diferente e não tem outros plugins de mídia social, está na mesma hospedagem. Recebemos a mesma resposta do botão do Pinterest.

        Nesta página você não tem Pinterest, então não podemos testar, há algum outro site onde você o tenha para podermos testar, por favor?

        Muito obrigado.

  19. Ótimas informações sobre como adicionar uma barra de compartilhamento social flutuante no WordPress?
    Eu estava procurando por informações e encontrei a resposta.

  20. Olá, tenho uma pergunta sobre o like do Facebook. Quando você abre isso, aparece uma caixa de compartilhamento no Facebook, como esperado. Mas se você tiver várias páginas do Facebook, como pode direcionar o compartilhamento para uma página específica, ou seja, página pessoal vs. página de negócios. Este é um tema recorrente com compartilhamentos e likes do Facebook. Alguma ideia?
    Obrigado
    Paul

  21. I have a question. Let’s say you enable this new floating social bar, what happens to all those prior posts you have out in the world or in your blog, enabled with jetpack social sharing. Do those social buttons disappear from those posts?

  22. I would like to use the new plugin, BUT

    is it alright to install it on a wordpress site that has been customized with different/unique graphics and “navigational icons” were added to the sub header??? *
    (I had someone do this for me)*

    Any kind of info or help on this would be greatly appreciated!

  23. Olá,

    Obrigado wpbeginner por criar um plugin tão incrível. Eu o instalei e percebi que ele não estava flutuando, desativei quase todos os plugins e encontrei os culpados ativando-os um por um. Dois plugins que entram em conflito com este são: Facebook TrafficPop™ for WordPress e Wordpress Like Locker; mesmo autor de codecanyon.net. Vocês têm alguma ideia de como consertar isso.

  24. Bom plugin

    Uma observação: você deveria remover o fundo branco do sprite.png para que pudéssemos ajustar o fundo sem ter uma borda branca desagradável ao redor dos elementos.

    Pelo resto, nada a dizer, ótimo trabalho

  25. Obrigado por este belo plugin. Estou tendo um problema: se eu ativar o plugin, ao clicar em um post, recebo uma mensagem de acesso negado do meu htaccess (eu protegi o diretório /wp-admin/). Se eu não inserir nenhuma credencial e clicar em cancelar, a página e o plugin carregam e tudo parece normal. Seu plugin requer acesso à pasta /wp-admin?

  26. Hello , great work with this plugin and in general
    I have a question .
    Is there a way to add my post rating php code in the bar , so it will float with the social buttons too .
    It will be a nice future :)

  27. Perfeito! Acabei de excluir um plugin de compartilhamento social que estava me dando sérios problemas de rastreamento e indexação. Muito obrigado. As melhores coisas da vida são realmente gratuitas. Ficarei feliz em fazer uma doação e considerarei seus outros produtos e serviços pagos no futuro… você arrasa!

  28. Olá,

    As instruções nesta página dizem:

    ” Em seguida, adicione seu ID do Twitter no campo no seguinte formato @wpbeginner.”

    As instruções na página de Configurações do plugin dizem:

    “Seu nome de usuário do Twitter quando os visitantes retuitarem suas postagens (sem o símbolo @).”

    Agradeço antecipadamente pelo esclarecimento.

    – Greg

  29. Obrigado por este plugin. Sempre apreciei que sua barra social não cobria o texto da postagem enquanto eu lia em um iPad, enquanto muitos outros plugins o fazem. Também aprecio todos os seus muitos tutoriais; quando preciso saber como fazer algo com o WordPress, seu site é geralmente o primeiro que procuro, até mesmo antes de uma pesquisa geral no Google.

  30. Are there any plans to create an option to disable the number of shares display? For now I’m not activating it because of the big fat zeros. Will activate when there’s an option or I have decent numbers. ;-)

  31. Este plugin é exatamente o que preciso para o meu blog recém-lançado. Infelizmente, a linha de 0 compartilhamentos é deprimente. Há alguma ideia de tornar os contadores uma opção?

  32. Is there a way to customize it so it looks just like the way you have it on here? I installed it, but the font is different, it’s more spaced out between the buttons, and there isn’t the line dividers :)

    • As personalizações neste site foram feitas para combinar com nosso design. Usamos uma fonte chamada Oswald que precisa ser carregada primeiro no design antes que possa ser usada pela barra. Não faz sentido carregar uma fonte externa que não combine com o design do site para milhares de usuários que usam este plugin.

      Em resumo, se você quiser fazer isso, pode substituir os estilos CSS do plugin.

      Admin

      • Obrigado, pessoal. Este é um plugin incrível. Vocês podem nos informar como adicionar os divisores de linha como o da sua página aqui e mudar a fonte no CSS? Sou novato e não sei CSS, mas estou disposto a tentar. Qual linha no CSS deve ser alterada para adicionar os divisores de linha e mudar as fontes?

        Agradeço desde já e obrigado pelo melhor plugin de mídia social disponível.

  33. Existe algum lugar para ver um exemplo de como fica e como funciona?

    Já tentei todos os outros e nenhum funcionou para nossa satisfação. Adoraríamos ver se este é o ideal para nós.

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.