Adicionar uma Caixa de Compartilhamento Flutuante no WordPress com o Plugin Smart Sharing

Estávamos recebendo uma enorme quantidade de e-mails de pessoas perguntando como criar uma caixa de compartilhamento flutuante em seus sites WordPress. Se era um plugin? Após colaborar com nossa equipe, decidimos que seria mais eficiente se criássemos um plugin gratuito em vez de responder a cada e-mail individualmente.

O que este Plugin Smart Sharing faz?

O compartilhamento inteligente adiciona uma caixa flutuante com botões de mídia social apenas em posts individuais. Por padrão, você pode escolher entre retweet, facebook, digg e stumbleupon. Mas você não está limitado a essas opções, pois há uma opção para adicionar seus próprios códigos personalizados.

Qual é a Vantagem deste plugin?

Este plugin aplica a teoria do Reforço Positivo de B.F Skinner ao marketing de mídia social. Normalmente, os botões são colocados no topo do post ou no final do post. Embora ambas as posições sejam OK, elas não são as melhores. Se você os colocar no final do post, você está esperando que o usuário leia até o final. Às vezes, os usuários gostam do post e não leem artigos completos. Mas eles ainda compartilhariam seus artigos se houvesse um reforço positivo. Este plugin adiciona uma pequena caixa flutuante que rola com o usuário, para que ele possa votar sempre que terminar.

Leia mais sobre este plugin e Baixe-o

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

100 Comments

  1. Eu corrigi o problema removendo isto:

    <script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2′></script>

    Foi chamado duas vezes.

    Thanks for your quick answer anyway. :)

  2. @BijanGhorbani Existem vários scripts de lightbox. Um tem que estar acima ou abaixo do outro. Se os scripts SmartSharing estiverem acima dele, eles causarão o problema.

  3. Instalei este plugin e ele funciona bem, mas desativou todos os efeitos de lightbox em meus posts, o que é muito ruim. O que está em conflito com o efeito de lightbox neste plugin, por favor?

  4. Olá, acabei de instalar este ótimo plugin e tudo correu bem, meu problema é que o plugin não está flutuando como o desta página, ele apenas fica a uma distância do topo da página e quando você rola para baixo, ele não desce com você.

  5. @wpbeginner farei isso. Instalei o Sharebar como uma solução temporária, então os trocarei de volta mais tarde e enviarei uma captura de tela.

    Obrigado!

  6. @rdempsey Rob, envie um e-mail, para que eu possa ver o que está dando errado. Por favor, inclua um link para o seu site também.

  7. Baixei, instalei e ativei o plugin. O único problema é que duas barras estão aparecendo – uma estática e a outra seguindo dinamicamente o conteúdo. Estou usando WP 3.1.3 com Genesis 1.6 e um tema filho. Algum palpite? Obrigado!

      • !! Funciona sim! Eu só não tinha percebido que havia um botão de configurações separado no painel lateral. No entanto, os botões Retweet e Facebook deveriam vir marcados por padrão, na minha opinião. De qualquer forma, vocês são ótimos! Obrigado pela resposta.

  8. Assim como a barra de compartilhamento do wpbeginner.com, ela não está anexada à borda do navegador, então para torná-la um pouco melhor para várias resoluções de tela, basta fixá-la ao conteúdo e assim a caixa de compartilhamento será cortada quando a janela do navegador for redimensionada!

    Substituí o código php para o css estático da caixa de compartilhamento (no arquivo .php do plugin):

    .sharepost{float:left; border:1px solid #E8E8E8; margin-right:10px; position:fixed; background:#FFF; margin-left:-100px; width:60px; z-index:0}

    .sharer{padding:5px; border-bottom:1px solid #e8e8e8}

    Isso vai te dar um começo, mas você terá que fazer todos os ajustes futuros no seu editor de plugins do wordpress no arquivo .php!

  9. Que alterações você fez no plugin para que ele ficasse invisível no seu site em navegadores móveis?

    Quando carrego meu site no meu celular, o plugin sobrepõe o conteúdo.

    Se você puder compartilhar aqui, seria muito útil. Obrigado!

  10. Instalei o plugin em uma instalação do WordPress 3.01 e, embora a instalação tenha ocorrido bem e eu tenha configurado as opções, nada aparece nas minhas postagens do blog.

    Você seria capaz de dar uma olhada nisso? O site está vinculado ao meu nome

    obrigado.

    • O plugin não está conseguindo se registrar no rodapé. Talvez você precise verificar essa função. Muitos usuários tiveram esse problema ao rodar no Thesis. Estamos trabalhando em uma nova versão deste plugin, que será incrível.

    • Você pode adicionar isso em um site estático, mas não terá nenhuma funcionalidade de backend, então tudo terá que ser estático. Apenas adicione o CSS deste plugin...

  11. Este plugin funcionou bem até eu atualizar para o wordpress 3.0, agora ele me diz que o plugin causa um erro fatal.

    O que posso fazer sobre isso?

    • Acabei de verificar o plugin com a versão 3.0 (funciona bem). Deve ter sido um problema de compatibilidade com outro plugin. Você pode nos enviar por e-mail os detalhes sobre o seu site (nome do site), os plugins que você está usando, etc., para que possamos ajudá-lo melhor.

  12. Eu o instalei no meu site, mas infelizmente o ícone do StumbleUpon não está funcionando adequadamente. Se você clicar em Stumble, ele tenta fazer o stumble de uma página específica, para muitos posts.

    Como eu conserto isso?

  13. Really light weight and nice plugin. (will advice you to make it more lighter :) – and never use jquery with it)

    however, like many people here, i was not able to make the plugin work with my theme too (using thesis 1.7) however i’ve solved the issue by making change in the code by replacing your get_footer to wp_footer. hopefully it will make some changes in your next release :)

    para aqueles que precisam corrigir o problema de o slider não ser exibido após ativar o plugin, expliquei os passos aqui: http://nabtron.com/smart-sharing-plugin-now-showing-on-thesis-1-7-theme-solved/2653/

  14. O código não está funcionando. Eu acabei de adicioná-lo ao meu template de página e ele não aparece de jeito nenhum.

    Existe um local específico no template da página onde ele precisa ser adicionado?

    Hope to hear from you soon. Cheers ;-)

  15. Nesta mesma página, vejo que o retweet e o negócio do Fshare desaparecem para resoluções mais baixas (para 1024×768 e 800×600). Como consigo isso? É um plugin tão bom, mas não fica bom quando flutua sobre o texto da página nas resoluções mencionadas.

  16. Obrigado por este plugin. Tenho um problema. Meu botão de compartilhamento do Facebook, quando publico, não mostra mais o nome do artigo? E nem a imagem? Posso resolver isso?

  17. Ativei este plugin e ele não está aparecendo na minha página? Não tenho certeza do que está acontecendo aqui, mas tenho certeza de que fiz tudo corretamente.

  18. Acabei de fazer o upload do plugin e adorei, mas estou recebendo um erro 404 com o tweet meme. O Tweet meme funcionava bem quando eu tinha o botão individual instalado. Eu só preciso inserir meu nome de usuário do Twitter, certo? Desativei o meme original que eu tinha instalado e limpei meu cache, mas ele ainda aparece com um ponto de interrogação. Ajuda?

    • Ele não funciona automaticamente com todos os temas. Você precisaria adicionar a seguinte função em seu arquivo single.php add_smartsharing(); << lembre-se de envolver com PHP e funcionará.

  19. Bom plugin. Estava procurando algo parecido com o mashables e acho que você tem o melhor até agora, a não ser que eu crie o meu próprio.

    Obrigado pelas informações do código personalizado.

  20. Muito obrigado por isso! Vi isso no mashable.com e tenho desejado para o meu novo blog de mídias sociais. Eu não sabia o nome do plugin, muito obrigado. Ótimo site, aliás! Quantos sites sociais podem estar neste plugin ao mesmo tempo?

  21. Olá

    Acabei de baixar e instalar seu plugin, e ele funciona maravilhosamente... exceto por um pequeno detalhe.

    A caixa de diálogo de captcha é um grande inconveniente, especialmente porque as palavras nem sempre são muito legíveis. Como posso me livrar dela? Já procurei no código do plugin, mas não encontrei nada que parecesse com isso.

    Você poderia me indicar a direção certa?

    Muito obrigado e parabéns pelo seu trabalho.

  22. This is like the hottest social media network plugin in the world! :) I really love it but I hope you could make it as awesome as the one in Mashable :)

  23. I’m wondering why the box is attached to my browser edge instead of my content just like you have here…in this way works fine, but in mine it overlap the content for resolutions smaller than 1024px….please help me! :)

    • O motivo pelo qual ele está anexado à tela do navegador é porque é a maneira mais fácil e simples de adicioná-lo. Ao fazer isso, podemos tornar este plugin utilizável para a maioria dos temas. Você pode ver o CSS deste plugin e, em seguida, aplicá-lo manualmente em seu site, se desejar. É uma simples tag position:fixed. A única coisa é que você não obterá nenhuma das funções do painel de administração dessa forma.

      Você pode modificar o arquivo do plugin um pouco. Altere as propriedades CSS para suas necessidades e, em seguida, altere o filtro de adição automática. Em seguida, adicione manualmente a função do plugin add_smartsharing() em seu arquivo single.php ao lado da sua div de conteúdo. Mas isso dá muito trabalho e apenas usuários com experiência em PHP e HTML/CSS poderão fazê-lo.

      • Can you please create a blog post with instructions for how to make this modification (or even how to add that additional functionality Mashable has where the share buttons snap to above the content when the browser is reduced to a certain width)? Or email me. I’ll donate! ;-)

  24. Vocês vão implementar o novo “Botão Curtir” do Facebook neste plugin em vez disso?

    Parece que será muito mais “viciante”

  25. Obrigado pelo plugin! Tenho procurado em todo lugar por este widget de compartilhamento no estilo Mashable.

    Estava pensando na barra Meebo… mas isto é PERFEITO!

  26. Primeiro de tudo! Plugin incrível!

    I have installed it and it works fine ;)

    I just have a small problem if i click on retweet i always been redirect to tweetmeme :( How cna i get it workin that the useer who clicks on retweet gets redirect direct to our tweeter account ?

    Muito obrigado

    Sascha

  27. Olá,

    Como você alinha a barra de compartilhamento flutuante ao conteúdo e não à borda do navegador? Vejo que a sua se alinha ao conteúdo, mas o plugin não. Qualquer ajuda seria ótima.

    Obrigado!

    • Isso só é possível se você adicionar a função manualmente e modificar o CSS para atender às suas necessidades. Você precisa entender a propriedade CSS `fixed` e adicioná-la ao seu `single.php`.

      Veja como você pode fazer isso. Primeiro, ative o plugin, depois abra o arquivo `functions.php` do seu tema. Adicione a seguinte linha:

      remove_action( 'get_footer', 'add_smartsharing' );

      Ao fazer isso, você acabou de remover a função automática. Em seguida, você pode colocar este código no seu arquivo single.php para chamar a função manualmente onde desejar.

      function add_smartsharing()..

      Você também teria que editar o arquivo CSS para atender às suas necessidades. O plugin, por padrão, não o adicionará ao lado do conteúdo.

      Lembre-se de editar o CSS para que ele se ajuste às suas necessidades. O padrão

  28. Estou tentando implementar uma barra de ferramentas de compartilhamento flutuante como a que o Mashable usa em um blog do Tumblr, há alguma versão em CSS, HTML ou jQuery que possa ser derivada deste plugin? E se sim, quão difícil/fácil seria?

  29. Fiz o upload do plugin sharesmart para o meu site WordPress e tudo correu bem. Meu site, no entanto, não está em inglês (sim, adivinhe, existe um mundo inteiro por aí que não lê nem fala inglês). Existe alguma maneira de mudar, por exemplo, ,,Compartilhar”, ,,compartilhamentos” para outro idioma?

  30. Olá Syed!
    Eu amo seu plugin. Eu o instalei e funcionou perfeitamente. Mas agora que mudei o tema, ele desapareceu. Eu também tentei desinstalar e instalar novamente, mas nada aparece.
    Muito obrigado pela sua ajuda!

  31. Vocês são incríveis. Estou procurando algo assim há um tempo e funciona perfeitamente no meu blog.

    Tentei instalar o código para o botão original do Facebook Share (http://www.facebook.com/facebook-widgets/share.php), mas isso não parece funcionar com este plugin (cada atualização de página reiniciaria o contador). Então é uma pena que eu tenha que perder minha contagem de compartilhamentos, mas vale a pena para integrar essa funcionalidade incrível.

    Além disso, você pode me direcionar para onde posso encontrar o código para um botão do Google Buzz com o contador?

    Muito obrigado por um plugin incrível!

    • Você não precisa perder suas contagens de compartilhamento? O fshare mostrará a mesma contagem que o botão de compartilhamento do Facebook. Para o botão do Google, por favor, leia este artigo em Balkhis sobre a contagem do Google Buzz.

      Depois de ler essa página, você veria por que não é certo exibir a contagem de buzz neste momento. Mas se você ainda acha que quer enganar seu público com uma contagem manipulável, então use este tutorial (Link).

      • Olá! Eu não perdi minhas contagens de compartilhamento para a maioria dos meus artigos, mas definitivamente perdi para o meu post de blog mais recente no momento da instalação; eu tinha 27 compartilhamentos no Facebook, mas ele foi redefinido para 0. No entanto, parece que a contagem de compartilhamentos foi transferida para o resto dos meus posts de blog.

        Além disso, há alguma forma de exibir este plugin na página inicial, bem como em posts individuais?

        Much thanks! :-)

        • Não, este plugin não será exibido na página inicial, a menos que você adicione a função ao seu tema. Embora não recomendemos adicionar isso à página inicial. Sua página inicial tem vários posts, qual post este plugin compartilhará?

          Aqui está a função se você quiser chamá-la em qualquer outro lugar add_smartsharing()

        • Bem, você vê como o Mashable tem os botões Tweetmeme, Facebook Share, etc. em cada post na página inicial, e então tem a caixa de compartilhamento flutuante dentro de cada post? Eu gostaria de fazer isso também. Embora se eu não puder, não é o fim do mundo; meu tempo de carregamento da página inicial está muito mais rápido agora.

          Thanks again! :-)

    • Você recebeu um e-mail de confirmação que pedia para confirmar o e-mail? Se sim, logo após esse e-mail você deveria ter recebido um e-mail de boas-vindas. Por favor, verifique seu SPAM. Se não, entre em contato conosco através do formulário de contato.

  32. Sabe… não tão legal quanto a versão do Mashable, mas é um bom começo. Acho que alguns ajustes simples em jquery e algum posicionamento css fariam com que ele agisse mais como eu estou procurando.
    Bom trabalho, aliás, bom plugin.

    • Chuck,

      Esta é a primeira versão deste plugin. A razão pela qual não podemos usar a versão jQuery em um lançamento de plugin genérico é que você precisa de um local específico para inserir o plugin. O Mashable faz isso corretamente ao lado da postagem. Cada tema tem classes de postagem diferentes. Isso tornaria muito difícil lançar a versão jQuery para o público em geral. Se você tiver alguma sugestão, estamos abertos a ela. (Nota: codificar uma caixa jQuery que flutua não é difícil. Adicioná-la ao WordPress usando um plugin é a parte difícil). A única coisa que pode funcionar é adicioná-la ao conteúdo da postagem. Teríamos que tentar isso. Se você tiver outras sugestões, por favor, nos avise.

      • oh understood. I appreciate the work and you guys releasing it, and your time in responding to me. So my initial issue with this one is on smaller screen resolutions this one will cover the content, mashable’s hides itself from the left and turns into a horizontal section right above the post content. THAT is amazing lol.
        I know your intent wasn’t to create what they did but that’s got some polish you’ve gotta admit! :)

        Vocês têm um roteiro ou ideias para melhorar este plugin atual?

        • Chuck,

          Você está correto que o Mashable está fazendo isso dessa forma. Mas, como mencionamos, é algo que estamos considerando adicionar a este plugin. Nenhuma data de lançamento futura foi finalizada ainda. Ainda estamos tentando ver se funcionaria com todos os temas.

          Cada tema funciona de maneira diferente e isso é algo personalizado. Eles têm a largura horizontal especificada. Mas não sabemos qual é a largura horizontal em outros temas. Portanto, para temas com área de conteúdo menor, isso quebraria o tema.

          Se você é um desenvolvedor, então você deve entender exatamente do que estamos falando.

          Sem dúvida, o plugin do Mashable é uma versão mais polida, e adicionaremos algo assim no WPBeginner em breve, mas achamos que é mais uma solução personalizada do que uma genérica.

        • Isso é ótimo, mas acho que está interferindo no meu texto em 1024. Mesmo sem transformá-lo em uma opção horizontal, como posso fazê-lo desaparecer na margem esquerda, como faz aqui, quando a janela é muito pequena? Obrigado.

  33. olá…eu estava curioso sobre este plugin…eu o baixei e tentei instalá-lo localmente…(estou usando xampp – não acho que isso tenha algo a ver com isso)…e recebo este erro:

    Erro de análise: erro de sintaxe, $end inesperado em C:\xampp\htdocs\blog\wp-content\plugins\smartsharing\smart-sharing.php na linha 507

    tem alguma ideia?

    de qualquer forma, obrigado por compartilhar

  34. Baixei o plugin Floating Share Box e o ativei no meu blog do WordPress, mas ele não está aparecendo nas páginas de postagem. Ele entra em conflito com algum outro plugin?

    • Que nós saibamos não. Acabamos de carregá-lo em um site que tem mais de 30 plugins em execução, e está funcionando. Alex, você quer que a gente dê uma olhada para ver o que está acontecendo? Por favor, envie-nos um e-mail com suas informações.

      • Consegui fazer o plugin funcionar, mas o que eu estava me perguntando é, quão difícil seria para mim adicionar um botão “google Buzz” à caixa de compartilhamento flutuante?

        • Procure na aba de personalização da página do plugin. Você pode adicionar qualquer coisa na seção de códigos personalizados. Basta usar as configurações de div que mencionamos naquele artigo.