Sidebar Deslizante com Botões de Redes Sociais

Compartilhar em Redes Sociais

A divulgação em redes sociais como o Facebook, Twitter e Google Mais podem ajudar a aumentar consideravelmente o número de visitantes em nossos sites e blogs, em especial os votos no Google +1 que é utilizado pelo Google como uma forma de mostrar links mais relevantes para os amigos ao qual os usuários fazem parte, nos resultados das buscas.

Mas é claro que sozinhos não “temos a força“, necessitando da ajuda dos visitantes para uma divulgação mais ampla. Por isso é muito importante oferecer uma forma simples e prática de permitir que os visitantes votem e/ou divulguem seus artigos nas redes sociais e uma dessas formas é com a barra deslizante que aparece ao lado do conteúdo como pode ser visto aqui mesmo no CriarSites.com

sidebar deslizante

Existe um serviço que oferece uma barra como essa chamado de Share Sidebar, mas tem o problema de que adiciona uma pequena imagem no rodapé com um link apontando para o site e também somente alinha a barra em um dos dois extremos da página.

Felizmente o Fabio Destro do blog Internovinet começou a trabalhar em uma barra (é a mesma barra que aparece aqui no CriarSites.com, do qual eu fui um dos testadores) que não exibe nenhum tipo de propaganda e que também fica alinhada junto ao conteúdo, facilitando a visualização por parte dos visitantes e aumentando o número de votos e compartilhamento.

Se você também gostaria de adicionar uma barra dessas em seu site ou blog, visite a página da barra deslizante publicada no Internovinet para pegar o código e conferir um tutorial que mostra como configurar a barra no WordPress, Blogger e em outros tipos de sites.

Em troca o Fabio Destro somente pede para quem puder, que adicione um dos banners, escreva um artigo falando sobre a barra ou simplesmente aponte um link para seu site.

Gostou deste artigo? Então deixe um comentário e/ou divulgue nas redes sociais.

About Celso Lemes

Celso Lemes é Blogueiro profissional. Vivo de blogs, blogo para viver, vivo blogando, blogando eu vou vivendo.   Baixe grátis o e-book 12 Passos para Divulgar seu Site ou Blog.
Bookmark the permalink.

51 Comments

  1. num funcionou no weebly. buaaa
    e ainda perdi a share que estava instalada (Sharesidebar, pq so copiei metade do codigo pra salvar e nem vi…

  2. Celsoo… consegui…
    e so ir no editor de html, e colocar o codigo no footer… :)

  3. Legal!
    Mas para quem usa o WordPress, tem o plugin Sharebar, que faz tudo bem automotizado e não inclui, nem exige, link algum.

    • Thiago,
      Este plugin parece interessante, vou testar.
      Quanto a barra citada neste artigo, repare que ele não obriga ninguém a adicionar um link. Ele apenas pede, o que é bem diferente.

      Abraço!

  4. Eu utilizo o Box Flutuante que o Claudio do Ferramentas Blog fez e é muito bom também.

  5. Boas Celso,

    Posso saber como criou o seu menu aqui no CS?

    Cumprimentos.
    Daniel

  6. Ola celso preciso falar contigo como entro em contato com voce por e mail? obrigado

  7. Olá Celso, coloquei uma barra parecida com esta em meu blog e deu uma imagem show de bola! Além de aumentar a interatividade com meus visitantes e as possibilidades de divulgar meu blog!

    • Dinheiro a Ganhar,
      O problema do Share Sidebar é que ele fica alinhado nos extremos da página e caso a tela do visitante seja muito pequena, a barra sobrepõe o conteúdo. É o que está acontecendo com o seu blog.

      Abraço!

  8. Gostei mais dessa barra do Fabio do que a da ShareSidebar.

  9. Olá Celso;
    A barra deslizante é muito boa, porém…

    Estive observando que em monitores com resolução 1024×768 ou menores, a barra simplesmente fica “Oculta”.
    Só percebi poque fui formatar um computador aqui e ao entrar no criarsites notei que a barra estava oculta e só aparece utilizando CTRL+scrool do mouse para menos.

    Mas além de ser muito bonita a barra, ela também é bem leve parabéns ao Fabio Destro !

  10. Celso, primeiramente gostaria de lhe agradecer pela ajuda e pela divulgação da sidebar.
    Leitores e utilizados das barras: Muito obrigado pelas critas construtivas e pelos elogios.
    Abraços!
    PS.: Celso a sidebar que você está utilizando é a velha, pois possui o Google Buzz…!

  11. Vou fazer uso também! Funciona em sites criados no dreamweaver?

  12. Celso, tem como vc mim tirar uma duvida? Eu exibo publicidade do Lomadee no meu blog será que isto empede que eu crie uma conta no Google Adsense?

  13. Muito bom! Mas para quem usa o Webnode como criador de sites, ja existe um widget altomatico, que podemos escolher as redes sociais que serão colocados, mas isso só aparece na nova versão do webnode, que é bem melhor que a antiga. Espero ter informado mais uma dica que talvez nao saiba.
    Valeu Celso.

  14. Gostei dessa barra na sidebar, ainda mais utilizando o Google +1, é uma ajuda e tanto na hora de rankear os sites!!! Sensacional, parabéns pelo artigo, vou tentar utilizar essa barra!

  15. Antes eu usava a ShareSidebar, mas prefiro essa.
    Parabéns Celso!!!

  16. Olá! Eu sou lorena e gostaria de saber como faço para criar essa barra de ferramentas laranjada no topo do site. Ja procurei em varios lugares mas não achei o que precisava. Pode me explicar?

  17. Olá Celso! Quero sim! Obrigada pela atenção! Seu site é ótimo!

  18. Maicon Risadinha

    hahaha.. eu acheii que essa do criar sites fosse o share sidebar agora eu vi esse artigo no inicio e vi que não eraa kk.. mas enfim vô testar aqui no meu novo blog.
    abraço.

    • Maicon,
      Eu mudei há algumas semanas. Ele é melhor que o Share Sidebar.

      Abraço!

      • Ola Celso! Eu estou querendo passar meu site para o wordpress .. Poderia me ajudar a instala-lo no pc?

        • Lorena,
          Isto é um pouco mais complicado do que instalar o WordPress em um servidor de hospedagem. Eu encontrei este tutorial que mostra um passo a passo para instalar o WordPress localmente.
          Repare que nem todas as funções do WordPress irão funcionar desta forma. Se quiser testar todas as funções, terá que instalar ele em um servidor apropriado.

          Abraço!

  19. Ótimo Post, Me perdoe se tiver, mais gostaria que vocês postassem um tutorial a colocar os botoes do Addthis (ou outro), em baixo de todas as postagens do blog… para que possam compartilhar as postagens… e assim mais fácil para eu postar na minha fãpage no facebook, Obrigado mais Uma vez!

  20. Celso como que você coloco o botão do Twitter escrito “Tweet” e quando passa o mouse no balão fica escrito em Português?

    Abraços!!!

  21. Pingback: Caixa flutuante para redes sociais

  22. Ficou muito bom este código.
    Parabéns Fabio por disponibilizar gratuitamente.

  23. Essa barra é bem interessante, além de ficar com um design agradável.
    Abraço!

  24. Celso e você fez alguma coisa para tirar a borda do lado direito?

    Obs.: acho que sua sidebar tem algum problema, o botão “curtir” ta desalinhado.

    Abraços!!!

  25. Olá. Bom dia.
    Estou com um problema na barra deslizante no meu site.
    Eu coloquei e ela apareceu perfeitamente.
    Porém, eu coloquei ela do lado direito da tela, grudada com a borda da página (igual ao seu que esta do outro lado), mas quando abro em telas maiores ou menores, ele muda de posição. E no seu isso não acontece.
    O que devo fazer para concertar essa falha?
    Desde já obrigado.

  26. Olá Celso.
    Bom dia.
    Já consegui resolver o primeiro problema. Hahahahah…
    Porém agora surgiu outro.
    Como faço para deixar a barra do lado direito?
    Quando coloco margin-right ele não muda.
    Tem alguma forma de fazer isso?
    Desde já obrigado.

  27. Em meu site funcionou perfeitamente, estava a tempos a procura deste artificio para aumentar as visitas por meio de compartilhamentos, a principio mesmo colocando o código em footer não funcionou corretamente, nem sequer apareceu a caixa, após mudar a posição do fim para o inicio do código funcionou corretamente,parabéns pelo seu site por ter divulgado, e parabéns a ele por ter criado este excelente código

  28. Oi é que eu coloquei o sidebar no meu blog só que ele esta aparecendo duplicado com uma versão grande outra pequena… vc poderia me ajudar a deixar somente na pequena?

  29. Muito bom Celso, vou fazer um artigo apontando pro site do autor sim, pois não custa nada isso sem falar que o plugin é ótimo. usava o sharebar, mas vou testar esse. obrigado

  30. Em parte acho muito importante, pois de um certo modo os botões flutuante distrai o visitante que pode distraidamente clicar em um banner. E, se este banner for do Google Adsense, vindo causar um certo prejuízo para o dono do blog. É bonito, mas a possibilidade a que me referi deve ser levado em consideração.

    Nalcyman Loud

    Recife, 30 de junho de 2014

Atenção antes de Deixar um Comentário!
- Se o seu comentário for relacionado ao post, tenha certeza de que o leu.
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.


Este site lhe foi útil? Então ajude na divulgação clicando aqui.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>