Receber novos artigos por email:

Com todo o crescimento da popularidade das redes sociais, acredito que todos os sites possuam ao menos uma rede social relacionada a ele. O motivo para que isto aconteça é simples: sabemos que as redes sociais podem dar bons resultados, sendo assim, devemos procurar sempre novos modos de estar presente nas redes sociais!

Por todos estes motivos e o fato de sabermos dos bons resultados, devemos sempre incentivar os leitores a divulgar nosso site nas redes sociais, pois isto pode formar uma “bola de neve” sem fim, onde um leitor indica seu site, seu amigo gosta do conteúdo a ele apresentado e então compartilha-o para mais pessoas, onde provavelmente conterá outra pessoa que irá passar aditante, formando então uma roda de pessoas que acabam sendo apresentadas a seu site, consumindo seu conteúdo ou até mesmo divulgando-o!

Sabendo disso as redes sociais possuem botões para divulgar nosso site, sendo assim possível adicionar estes botões em seu site através de um código!

Pensando então, na grande necessidade, de divulgar nossos sites nas redes sociais criei uma Sidebar flutuante, que possui uma coletânea dos mais importantes botões de compartilhamento nas redes sociais, que estou disponibilizando o código da sidebar flutuante para (…)  que vocês possam adicionar em seu site!

Apesar de disponibilizado o código a vocês vale lembrar que não adicionei créditos, pois estes fazem com que o widget perca a beleza e fique lento. Deixando a critério de vocês se irão indicar nosso site ou não ( :( ). Mesmo não sendo obrigatório fazer a indicação, gostaria muito de pedir a colaboração de vocês, pois este widget foi muito trabalhoso de se desenvolvido e necessitou de uma grande dedicação e tempo para ser finalizado. Além disso com a divulgação de nosso trabalho estarei sempre motivado a criar novos widgets!

A indicação pode ser feita através de um de nossos banners ou então até mesmo, por meio de um artigo falando sobre este widget,“linkando-o” para este artigo.

Menu:

Quais botões esta sidebar flutuante é composta:

Esta sidebar flutuante é composta por cinco botões de divulgação, são eles:

“Curtir” (FaceBook)

“+1” (Google Plus)

“Tweet” (Twitter)

“Share” (FaceBook)

“Share” (AddThis)

Lembre-se: Para aqueles que desejam adicionar outros botões, por favor, sintam-se a vontade para fazer as modificações que desejarem !

Widget, sidebar flutuante para compartilhamento de seu site nas redes sociais (WordPress e outros):

<!-- Começo código -->
<div style="display:scroll;position:fixed;top:160px;margin-left: -80px;">
<!-- FEXA começo código -->

<!-- Style CSS -->
<style type="text/css">
.dvin{
	 border-style:solid;
	 border-width: 3px;
     border-color:#e3e3e3;
	 padding-top:3px;
     padding-bottom:3px;
     padding-right:2px;
     padding-left:2px;
	 border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
 }

 .tweet {
	  text-align: center;
	  margin-top: 5px;
 }

 .face {
	  text-align: center;
	  margin-top: 5px;
 }

  .like {
	 text-align: center;
	 margin-right:-5px;

 }

 .plus {
	 text-align: center;
         margin-top: 2px;
 }
 .addthis {
      margin-left: 5px;
      text-align: center;
      margin-top: 55px;
 }

</style>

<!-- FEXA Style CSS -->

<!-- Box -->
<div class="dvin">
<!-- FEXA bok -->

    <!--FaceBook like-->
<div class="like">
<iframe scrolling="no" frameborder="0" -5px; allowtransparency="true" style="border-style:solid; border-color:#e3e3e3;
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; overflow:hidden; width:60px; height:65px;"
src="//www.facebook.com/plugins/like.php?app_id=114472178657274&href=HTTP://INTERNOVINET.COM&send=false&layout=box_count&
width=60&show_faces=true&action=like&colorscheme=light&font&height=65"></iframe>
    </div>
    <!-- FEXA FaceBook like -->

    <!-- Google +1 -->
<div class="plus">
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang: 'pt-BR'}
    </script>
    <g:plusone size="tall"></g:plusone>
 </div>
<!-- FEXA Google +1 -->

	<!-- Tweet -->
<div class="tweet">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="INTERNOVINET" rel="nofollow">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<!-- FEXA tweet -->

<!-- Share FaceBook -->
<div class="face">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<!-- FEXA Share FaceBook -->

<!-- AddThis -->
<div class="addthis">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ea7403239c7ca56"></script>
</div>
<!-- FEXA AddThis -->

<!-- Fim BOX-->
 </div>
<!-- FEXA fim BOX -->

   <!-- Fim código -->
     </div>
     <!-- FEXA fim código -->

Faça o downlaod deste arquivo em HTML (para visualizar o código, descompacte o arquivo Zip e abra o arquivo HTML com o Bloco de notas, Dreamweave ou outro programa)

Edições necessárias (WordPress e outros):

Para que o widget funcione corretamente, é necessário modificar duas opções! São elas:

Curtir no FaceBook: Na linha 58 onde está escrito “HTTP://WWW.INTERNOVINET.COM ” você deverá substituir pelo URL que o visitante irá curtir no FaceBook.

Caso você utilize o WordPress.ORG, adicione: “<?php echo urlencode(get_permalink($post->ID)); ?> “ (sem aspas)

Caso utilize o Blogger: Devido a codificação diferente do blogger, algumas modificações foram necessárias, clique aqui para ver o código adaptado e as modificações necessárias para o Blogger.

Caso você utilize outro sistema: adicione o URL principal do seu site!

“VIA” que Twitter será publicado o Tweet: Este campo serve para informar via que Twitter será publicado o Tweet no Twitter do visitante!

EX: “Dicas e tutoriais, www.internovinet.com via @internovinet”

Troque na linha 74 a palavra “INTERNOVINET“ para o seu Twitter (sem @). OBS.: Adicione entre as aspas e não retire-as!

Edições opcionais (WordPress e outros):

Também é possível fazer algumas alterações opcionais, como por exemplo a localidade do Widget, a ordem dos widgets e etc…

Modifique a localização do widget (altura, largura);

Para modificar a altura do widget, troque na linha 02 no trecho “top:160px “, o 160 pelo número altura! Lembre-se, quanto maior o número mais baixo ficará o widget.

Para modificar a largura modifique também na linha 02 o trecho “margin-left: -100px “ troque o número -100 pelo desejado. Quanto menor (negativo) mais longe irá ficar o widget da borda do conteúdo!

Como trocar a ordem dos botões;

Para trocar a ordem dos botões você deve copiar e colar o código de cada botão em outro lugar. Todo botão começa com ← NOME DO BOTÃO → e fecha com ← FEXA NOME DO BOTÃO →, sendo assim, só é necessário copiar e colar o código do botão para outro lugar!

Como modificar a cor da borda;

Para mudar a cor da borda na linha 10 substitua o no trecho “border-color:#e3e3e3;” o código após o “#”, os números e letras representam uma cor em HTML, acesse uma tabela de cores HTML!

Onde adicionar o código da sidebar flutuante (WordPress e outros):

Para que o widget funcione corretamente é preciso adicioná-lo no lugar certo, aprenda abaixo onde adicionar seu código…:

WordPress: Para que seu widget funcione corretamente no WordPress, você deve adicionar o código dentro do conteúdo do rodapé (footer) de seu site, para fazer isto acesse seu painel wordpress, agora na aba “Apresentação” clique no sub-link “Editor” e agora clique em “Footer” ou “Rodapé”, feito isto procure o conteúdo de seu cabeçalho e então dentro deste adicione o código!

Outros: Em outros gerenciadores de conteúdo também devemos adicionar o código no rodapé do site, procure saber como é possível fazer isto no seu gerenciador de conteúdo!

Widget, sidebar flutuante para compartilhamento de seu site nas redes sociais (Blogger):

Devido a codificação extremamente diferente do Blogger, o código para a sidebar é um tanto diferente, onde é necessário um código e instruções diferentes para o Blogger, então caso você utilize o Blogger utilize estas informações:

<!-- Começo código -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='SideBar'>
<div style='display:scroll;position:fixed;top:160px;margin-left: -80px;'>
<!-- FEXA começo código -->

<!-- Style CSS -->
<style type='text/css'>
.dvin{
     border-style:solid;
      border-width: 3px;
     border-color:#e3e3e3;
     padding-top:3px;
     padding-bottom:3px;
     padding-right:2px;
     padding-left:2px;
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
 }
  .plus {
     text-align: center;    
     margin-top: 2px;
     margin-left: 1px;
 }
 .tweet {
      text-align: center;
      margin-top: 3px;
 }
 .face {
      text-align: center;
      margin-top: 4px;
 }
  .addthis {
      margin-left: 5px;
      text-align: center;
      margin-top: 71px;
 }
</style>
<!-- FEXA Style CSS -->

<!-- Box -->
<div class='dvin'>
<!-- FEXA bok -->

    <!--FaceBook like-->
    <style type='text/css'>
      .like {
     text-align: center; margin-right:-6px;
 }

    </style>
<div class='like'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=HTTP://INTERNOVINET.COM&amp;
layout=button_count&amp;show_faces=false&amp;width=60&amp;layout=box_count&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no'
style='border:none; overflow:hidden; width:60px; height:65px'/>
</div>
    <!-- FEXA FaceBook like -->
    <!-- Google +1 -->
<div class='plus'>
    <script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
      {lang: 'pt-BR'};}
    </script>
    <g:plusone size='tall'/>
 </div>  
<!-- FEXA Google +1 -->
    <!-- Tweet -->    
<div class='tweet'>
 <a class='twitter-share-button' data-count='vertical' data-via='Internovinet' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
        <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<!-- FEXA tweet -->
<!-- Share FaceBook -->
<div>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'></a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
</div>
<!-- FEXA Share FaceBook -->
<!-- AddThis -->
<div class='addthis'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ea7403239c7ca56' type='text/javascript'></script>
</div>
<!-- FEXA AddThis -->
<!-- Fim BOX-->
 </div>
<!-- FEXA fim BOX -->     
   <!-- Fim código -->  
     </div>
         </div>
</b:if>
     <!-- FEXA fim código -->

     <b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Começo código -->
<div class='SideBar'>
<div style='display:scroll;position:fixed;top:160px;margin-left: -80px;'>
<!-- FEXA começo código -->

<!-- Style CSS -->
<style type='text/css'>
.dvin{
     border-style:solid;
     border-width: 3px;    
     border-color:#e3e3e3;
     padding-top:3px;
     padding-bottom:3px;
     padding-right:2px;
     padding-left:2px; 
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
 }

  .plus {
     text-align: center;
     margin-top: 2px;
     margin-left: 1px;
 }

 .tweet {
      text-align: center;
      margin-top: 3px;
 }

 .face {
      text-align: center;
      margin-top: 4px;

 }  
  .addthis {
      margin-left: 5px;
      text-align: center;
      margin-top: 71px;
 }

</style>

<!-- FEXA Style CSS -->
<!-- Box -->
<div class='dvin'>
<!-- FEXA bok -->

    <!--FaceBook like-->
    <style type='text/css'>
      .like {
     text-align: center;     margin-right:-6px;

 }
    </style>
<div class='like'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;
layout=button_count&amp;show_faces=false&amp;width=60&amp;layout=box_count&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no'
style='border:none; overflow:hidden; width:60px; height:65px'/>

</div>

    <!-- FEXA FaceBook like -->

    <!-- Google +1 -->
<div class='plus'>
    <script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
      {lang: &#39;pt-BR&#39;}
    </script>

     <g:plusone size='tall'/>
 </div>  
<!-- FEXA Google +1 -->  

     <!-- Tweet -->    
<div class='tweet'>
 <a class='twitter-share-button' data-count='vertical' data-via='Internovinet' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
        <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<!-- FEXA tweet -->

<!-- Share FaceBook -->
<div class='face'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'></a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
</div>
<!-- FEXA Share FaceBook -->
<!-- AddThis -->
<div class='addthis'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ea7403239c7ca56' type='text/javascript'></script>
</div>
<!-- FEXA AddThis -->

<!-- Fim BOX-->
 </div>
<!-- FEXA fim BOX -->

   <!-- Fim código -->  
     </div>
     </div>
     </b:if>
     <!-- FEXA fim código -->

OBS.: Este código só funciona no Blogger.

Faça o downlaod deste arquivo em HTML (para visualizar o código, descompacte o arquivo Zip e abra o arquivo HTML com o Bloco de notas, Dreamweave ou outro programa)

Edições necessárias (Blogger):

Na sidebar para o Blogger também é necessário modificar duas opções! São eles:

Curtir no FaceBook: Na linha 54 você deve modificar onde está escrito “HTTP://INTERNVOINET.COM” (sem aspas) pelo URL principal de seu blog!

“VIA” que Twitter será publicado o Tweet: Na linha 69 e na 175 onde está escrito “INTERNOVINET” você deve trocar pelo Twitter de seu blog (sem @)

Edições opcionais (Blogger):

Para modicar algumas características opcionais do widget no blogger é preciso modificar duas vezes a mesma característica, pois a primeira vez é para as páginas estáticas e na segunda vez é nos posts! Saiba abaixo alugas possíveis edições:

Modifique a localização do widget (altura, largura);

Troque na linha 04 e na 100 no trecho “top:160px “, o “160” pelo número altura! Lembre-se, quanto maior o número mais baixo ficará o widget.

Para modificar a largura modifique também na linha 04 e a 100 no trecho “margin-left: -100px “ troque o número “-100” pelo desejado. Quanto menor (negativo) mais longe irá ficar o widget do conteúdo!

EX: top:100px

Como trocar a ordem dos botões;

Para trocar a ordem dos botões você deve copiar e colar o código de cada botão em outro lugar. Todo botão começa com ← NOME DO BOTÃO → e fecha com ← FEXA NOME DO BOTÃO →, sendo assim, só é necessário copiar e colar o código do botão para outro lugar!

Como modificar a cor da borda;

Para mudar a cor da borda na linha 12 e 108 substitua o no trecho “border-color:#e3e3e3;” o código após o “#”, pelos números e letras que representam uma cor em HTML, acesse uma tabela de cores HTML!

EX: border-color:#fff; (Branco)

Onde adicionar o código da sidebar flutuante (Blogger):

Para que a sidebar flutuante funcione corretamente no Blogger, devemos adicioná-la no lugar correto, para fazer isto siga os passos abaixo:

  • Copie o código já editado
  • Abra seu painel no Blogger
  • Clique em “Design”
  • Clique em “Editar HTML”
  • Marque a opção “Expandir modelos de widgets“
  • Pressione o “Ctrl + F” do seu teclado.
  • Digite no campo que apareceu o código “<data:post.body/>” (sem aspas)
  • Este código será localizado na tela, agora em baixo dele cole o código do widget
  • Clique em “Salvar Modelo”
  • Visualize a sidebar flutuante funcionando corretamente em seu Blog (:D)

Vídeo aula, saiba mais sobre a Sidebar flutuente para compartilhamento de nas redes sociais:

Para aqueles que ainda possuem dúvidas do propósito da sidebar, como editá-la, como adicioná-la e etc… Assistam a vídeo aula e saibam mais:

Links importantes:

OBS.: Muito obrigado a todos vocês leitores por esperarem este tempo todo pela sidebar, e em especial muito obrigado ao Celso Lemes do Criarsites.com, que me apoiou desde o começo do desenvolvimento desta sidebar testando-a e me incentivando a concluí-la!

Você consegui adicionar a sidebar flutuante em seu site? Consegui editá-la? Achou-a útil? Achou que ela deu resultados? Deixe um comentário e divulgue este artigo nas redes sociais (através da sidebar)

Licença Creative Commons

INShare de Fabio Fogarin Destro é licenciado sob uma Licença Creative Commons Atribuição-Uso não-comercial 3.0 Brasil.

Based on a work at www.internovinet.com.

OBS.: O site Internovinet.com está sofrendo manutenções… A sidebar 2.0 sem erros, mais bonita, mais funcional e etc, está em desenvolvimento! Fabio Destro.

 

120 Comentários, deixe o seu!

  1. Celso Lemes disse:

    Olá Fabio,
    Parabéns pelo excelente trabalho na Sidebar Flutuante. Será muito útil para os blogueiros.
    Eu vou preparar um artigo falando sobre ela no CriarSites.com

    Abraço!

    • Olá Celso, muito obrigado pela colaboração! Foi muito trabalhoso desenvolver a sidebar, mais creio que será muito útili e utilizada pelos blogueiros…
      Peço desculpa novamente pela demora para a publicação da sidebar… E muito obrigado pelo apoio e pela divulgação da sidebar…
      Abraços!

  2. Rosiel T.S. disse:

    Fabio primeiramente obrigado por disponibilizar esse acessório, mas não sei porque no meu não deu certo, eu coloquei antes de data:post.body, depois de data:post.body e até em um gadget HTML/JavaScript, no gadget HTML/JavaScript deu certo mas olha nessa imagem como fico, só apareceu os botões do twitter e do +1, e fico os dois, o que ia aparecer na página inicial e nos posts, sabe o que devo fazer pra dar certo?

    Obs: Obrigado por escolher meu blog pra fazer a demostração, eu não vou fazer um post falando sobre o acessório pois meu blog não tem nada a ver com criação de sites, mas vou colocar um banner seu na página “Parceiros”, para te retribuir.

    Abraços!!!

    • Rosiel, não por isto, imagino que o dever dos blogueiros e se esforçar para que os leitores tenham um conteúdo de qualidade, e é apenas está minha vontade….
      Eu imagino que o erro ocorreu devido a ShareSidebar…. pois deu algum tipo de “conflito ” nos botões recomendo que tente retira-la e depois adicionar a nossa sidebar… Rosiel caso de erro novamente, por favor entre em contato para que eu possa tentar resolver…!
      < -- Atualizado -->
      OBS.: Utilizei o share sidebar junto a minha e não ocorreu erro algum… por este motivo vou lhe enviar um e-mail com o código pronto e já editado para seu blog para nós vermos se da certo…!
      Abraços!
      PS.: Obrigado pela colaboração!

    • Rosiel, na verdade eu tinha adicionado um código que não tinha funcionado em vez do correto, agora o código do download e da “caixa” já esta atualizado, agora eu vou atualizar a vídeo aula…!
      Peço a todos que me desculpem pelo inconveniente!
      Abraços!

  3. Rosiel T.S. disse:

    Fabio, consegui, eu estava fazendo errado, tava colocando antes de data:post.body, agora coloquei depois dessa tag e deu certo.
    Mais uma vez muito obrigado mesmo.
    Também pesso desculpas pelo trabalho que te dei.

    Abraços!!!

  4. Rhenan disse:

    Olá Fábio, tem como adicionar esta side bar ao lado direito do blog?

    até.

    • Rhenan, tem sim, só o que você precisa fazer é trocar a linha 4 e a 100 pelo código “<div style="display:scroll;position:fixed;top:160px;margin-left: 1000px;">” (sem aspas)
      OBS.: Caso seja no blogger! Caso contrario apenas na linha 2!
      Muito obrigado pelo comentário, espero que tenha gostado da sidebar!
      Abraços!

  5. rodrigo disse:

    Infelizmente nao funciona no Weebly BUAAA…
    vo te que ficar com aquele li** do sharesidebar :(

    • Rodrigo, é só ir no seu site Weebly, clicar em “Definições” depois em “SEO” e adicionar o código no “Código de rodapé:”!
      Ou então…. acessar o Weebly clicar em “Desenho” depois em “Editar HTML/CSS” em “Page Types “clicar em “Index.html” e adicionar o código abaixo de “” feito isto salve o tema e publique o site que provavelmente já irá funcionar…!
      Espero que tenha gostado da sidebar!
      Abraços!

  6. rodrigo disse:

    Consegui… e so ir no html do site, e colocar aaixo do footer :)
    ve la como ficou…

  7. rodrigo disse:

    Fabio… estou com uma duvida…
    não tem como deixar o botão Share do Facebook mostrando o numero de pessoas que compartilharam, sem precisar clicar? e pq fica um espaço emtre o share e o BUZZ, e fica um pouco estranho
    obrigado ;)

  8. Yure Santana disse:

    Fabio,

    Tem como colocar o widget no Blogger somente nas paginas das postagens, como esta o seu? eu consegui colocar no blogger mas só fica na pagina inicial e nas paginas dos post não fica.

    Muito Obrigado!

    • Yure, o código já disponibilizado erra para ser exibido em todas as páginas do blog… porém caso você queira adicionar apenas nos post, utilize o código apenas da linha 96 até o fim…!
      Caso tenha mais duvidas, entre em contato (espero ter lhe ajudado)!
      Abraços!

  9. Marcelo disse:

    oi eu consegui colocar o codigo mais a caixinha ficou desalinhada como eu ajeito?

    • Marcelo, é sim, eu notei que o código esta com algo de errado no seu blog… Tente copiar o código inteiro e reedita-lo com o as informações necessárias. Não se esqueça de adicionar abaixo de “<data:post.body/>”
      Caso o erro ocorra de novo, por favor entre em contato! Abraços!

  10. Marcelo disse:

    oi gostaria de saber como adicionar no meu site pois eu consegui adicionar no blog , mas nao consegui colocar no meu site pois quando eu coloco fica aparecendo colado com uma caixa de newleter que tem no site

  11. Rosiel T.S. disse:

    Fábio olha que engraçado, no Internet Explore o espaço que fica entre o Share do Facebook e o Share do AddThis ele some, mas fica com um espaço embaixo do Share do AddThis e não fica com as bordas arredondadas.

    Uma pergunta, por que no Blogger nas postagens fica com as bordas arredondadas bem feitas, e na página incial fica com as bordas arredondadas não muito bem feitas?

    Abraços!!!

    • Rosiel, é bem estranho que isto aconteça com as borda, pois ela é feita com CSS, mas eu não tenho a mínima idéia do motivo que faz isto acontecer!!
      OBS.: Rosiel, sabe algo mais engraçado ainda? Eu só fui “obrigado” a adicionar aquele espaço por causa do IE, ele fazia um conflito com os outros botões ai eu tive que deixar os botões um longe do outro ;’( (uma pena porque fica bem estranho assim!)
      Abraços!

  12. Roberto disse:

    Olá Fábio.
    Esse código funciona em página PHP. Se funciona, como faço? Obrigado e parabéns pelo trabalho.

    • Roberto, funciona sim, só não sei se o código PHP para o link do “Like” que é utilizado no WordPress funcionará no seu código PHP, mais casso não funcione deste modo siga as instruções para adicionar em “outros”, ou seja: Copie ou baixe o código edite como o artigo pede e adicione no rodapé de seu site… E pronto…
      Muito obrigado pelo comentário! Abraços!

  13. ahee Fabio Gostei muito do seu SideBar.. vem ka nesse video ahee tu tava com “escripte” na mao né kk brincadeira mas consegui colocar depois de 15 min. mas consegui montar no meu blog que to criando :D
    parabens ja vo fazer a divulgação!!!

    • Maicon, muito obrigado e que bom que gostou…
      E não eu não estava com um script, porém gravei o vídeo umas 2 vezes além de fazer uma edição milagrosa (o vídeo sem edição tia 18 minutos e 30 segundos)… KKK
      Que bom que consegui adicionar a Sidebar em seu blog!
      Além de tudo, deis de já agradeço pela divulgação! Abraços!

  14. Rosiel T.S. disse:

    Fabio por que nas páginas do Blogger a Sidebar não aparece?

    Abraços!!!

  15. Olá! Gostei muito da barra e já coloquei no meu blog. Mas gostaria de saber se há algum jeito de colocar a barra com fundo branco, em vez de transparente.

  16. Marlon disse:

    Estou tentando alterar o tamanho da caixa que fica os botões, pois ela ficou pequena e os botões estão passando dela…

    eu retirei o botão addthis, pois não gosto de deixá-lo por certos motivos, talves seja por isso que ele ficou assim, mais onde que altero o tamanho da caixa?

    • Olá Marlon, a caixa em si não tem um tamanho definido, como você pode rer noado, o que faz o tamanho dela é a “margem” entre os botões e as bordas, por este motivo para alterar o tamanho da caixa aumente e diminua a “padding” nas linhas 11 a 14 caso WordPress e outros ou nas linhas 13 a 17 e 109 a 112 caso Blogger!
      Abraços!

  17. Boa Da Net disse:

    olá Fábio eu já algum tempo estou tentando adicionar uma sidebar no topo do meu blog e não consigo sera que poderia me ajudar desde já obrigado!

  18. Olá cara, como vai?
    Gostaria de saber porque no meu blog, a barra ficou em cima das postagens um pouco pro lado direito e não totalmente no lado direito, na lateral mesmo?

    Obrigado, Abraço.
    Otimo síte!

    • Olá, Guellity, estou bem e você?
      Não entendi bem o que estava tentando explicar, por favor envie uma comentário com mais detalhes do seu problema.
      OBS.: Se eu entendi bem seu problema pode ser resolvido aumentando a margem da Sidebar que pode ser modificada na linha 13 e 14.
      Abraços!

  19. Luiz Antonio disse:

    o botão do twitter não está contando, não que isso seja um problema pra mim, o importante é divulgar, so avisando mesmo.

    a sua é uma das melhores caixas flutuantes que já vi, vlw por compartilhar com a gente.

    • Olá Luiz Antonio, realmente não encontrei nem um problema com o botão do Twitter… Porém, muito obrigado pelo elogio e espero ter ajudado na divulgação de muito conteúdo relevante… (hehehe).
      Abraços!
      PS.: Obrigado pelo comentário!

  20. Adriano Luz disse:

    Ola Fabio,

    A barra é excepcional, porém coloquei em meu blog e na página principal não funciona o botão do Google mais, só funciona nos artigos.

    Você sabe o que pode ser?

    Abraço
    Adriano Luz

  21. Edson disse:

    Caro Fabio, achei muito boa essa sidebar, porém no blog que estou montando no blogger não funcionou, deu esse erro abaixo:

    “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “data-via”.”

    Abraço.

  22. Rosiel T.S. disse:

    Fabio eu acho que a Sidebar no meu blog deu algum erro, sempre quando clico em alguma postagem a Sidebar desalinha e não aparece todos botões, acho que é algum erro no botão do Facebook, sabe o que posso fazer para arrumar?

    Abraços!!!

  23. rafael moraes disse:

    Obrigado Fabio, esta de parabéns pelo seu blog comecei a pouco tempo te acompanha e estou gostando de seus posts, instalei a sidebar flutuante em meu blog e ficou perfeito, logo eu vou colocar um artigo falando sobre ela no HTTP://jl-digital.blogspot.com .
    Abraço!

  24. Ferreri disse:

    Otimo post me ajudou bastante obrigado.

  25. Erick Viegas disse:

    Olá Fábio, pode me dizer se eu posso colocar essa barra no lado direito do site e como? É que o menu do meu site está no lado esquerdo e não dá para ver.
    Muito obrigado!!!

  26. Olá Fabio,
    Parabéns por disponibilizar o código para nós.
    Vou utiliza-lo em meu blog e vou escrever um artigo para fazer a divulgação.
    Só fiquei com uma dúvida. Eu adicionei a linha PHP “ID)); ?> “ , pois utilizo o WordPress.org (que necessita de servidor próprio). Mas fiz um teste sem ela, e também funcionou. Porque a necessidade dela?
    Abraço e obrigado!

    • Alexandre, obrigado pelo elogio…
      E sim funciona sem a linha, porém o que esta linha faz é definir o URL para qual o usuário irá “curtir”, ou seja, caso esta linha não “exista” o usúario não curtira a sua página e sim algo vazio! Espero ter ajudado!
      Abraços!

  27. Ola . Adorei Sidebar… coloquei ela em meu blog, ficou muito boa, mas so tenho uma duvida, como eu afasto ela dos posts, queria mover ela um pouco pra esquerda, e possível ? Desde ja Agradeço!

  28. Angelo disse:

    Parabéns Fábio!
    Ótima iniciativa sua.
    Seu código está ótimo e está ajudando muita gente.Valeu mesmo de coração.
    Uma dúvida é sobre o botão tweet,ele e o balão de compartilhamentos fica maior que os outros,tem como ajusta-lo com o tamanho dos demais?
    Até mais e boa sorte!

    • Angelo, fico feliz que tenha gostado e muito obrigado pelos elogios…!

      Bom, quanto ao botão Tweet, eu infelizmente ainda não sei como corrigir, o próprio Twitter atualizou o widget e “bagunçou” um pouco as coisa, porém, pretendo corrigir este erro na Sidebar 2.0!
      Abraços!

  29. brayon pieske disse:

    boa noite, parabens pelo trabalho, fui colocar este script no meu blogger, e apareceu duas barras destas, uma no canto e uma bem no meio, mas apenas na pagina inicial, nas outras paginas nao apareceu nada

  30. Maicon disse:

    Olá Fabio
    Você está de Parabéns, este sidebar que você criou ficou perfeito.
    Obrigado por compartilhar este excelente trabalho.

  31. Tiago disse:

    Instalei a barra e apareceram 3 de uma só no blog, o que eu faço?
    obrigado

  32. Guellity disse:

    Eu gostaria de saber como você colocou esta borda azul entorno da barra.
    Como posso colocar uma borda verde entorno da minha barra?

    Obrigado cara, ficou muito massa!

  33. Guellity disse:

    Ah, meu blog é esse: http://www.euquerobiologia.blogspot.com
    Veja por favor se fica bom colocar no meu blog…a cor verde entorno da barra.

  34. Guellity disse:

    Ah amigo, já consegui sozinho mudar a cor da borda, mas agora quero mudar a cor do plano de fundo, que na verdade está transparente. Não tem cor no plano de fundo, queria por.

    http://www.euquerobiologia.blogspot.com veja como está!

    • Guellity, desculpa pela demora para resolver. Bom, para colocar fundo na barra adicione “background: none repeat scroll 0 0 #FFFFFF;”, onde você deve mudar o FFFFF para a cor que quiser! Fico feliz que tenha gostado, abraços!

  35. Daniela disse:

    Muito obrigada, o tutorial foi muito bem feito e bem explicado!

  36. Luis disse:

    Ola, gostaria de colocar no meu blog do blogger, mas queria que ele ficasse do lado direito da tela e não do esquerdo. O que é preciso fazer? Vlw!

  37. Gilda Miranda disse:

    ela é muito linda, seu tutorial é simples e muito bom, e tá lá minha barrinha flutuante com a borda vermelinha… Agora vou procurar seu nbanner pra por lá. Muito legal Fábio!

  38. Tiago disse:

    Ola Fabio
    Parabéns pela Sidebar Flutuante, estava a muito tempo procurando algo do tipo,que não me obrigasse a fazer publicidade forçada.
    Valeu!!!

  39. Cássia disse:

    Olá Fábio,

    adicionei o código no local que você falou e nada aconteceu…

  40. Tiago Nunes disse:

    Olá Fabio.
    Bom dia.
    Muito obrigado pelo código, ficou muito bom.
    Gostaria de tirar uma dúvida apenas.
    Como faço para colocar a barra do outro lado da tela?
    Até hoje vi apenas do lado direito, gostaria de colocar do lado esquerdo.
    E eu mudei o campo margin-left para margin-right e não funcionou.
    Desde já obrigado.

  41. Parabéns pelo código, a principio não tinha dado certo mesmo colocando em fotter no meu tema wordpress, porém ao mudar o local funcionou perfeitamente, parabéns pelo site

  42. @felipedss disse:

    Muito obrigado por disponibilizar este código. Coloquei no meu site e ficou show. Só uma pergunta, por que as configurações não são as mesmas para todos os navegadores? Entre no meu site pelo chrome e verá tudo perfeitamente encaixado. Mas, se entrar pelo IE… esta uma bagunça…

    • @felipedss
      De nada, a internet é para isto, transmitir informações e conhecimentos… Quanto a alguns erros que sidebar costuma estar apresentando… Ela sim esta com algumas “falhas” que serão corrigidas na Sidebar 2.0!
      Abraços!

  43. Paulo disse:

    Olá, parabéns pelo post, que me foi útil. Acabei de instalar o widget, que funcionou, mas houve um probleminha no blog. Os widgets do Facebook sumiram, embora eles continuem instalados. Se você puder me ajudar a consertar essa incompatibilidade, agradeço. Abs.

  44. Teka disse:

    Oi Fábio!

    Parabéns pelo artigo muito bem explicado.
    Minha dúvida:
    O botão curtir não está aparecendo no meu blog, o que pode ser o espaço fica em branco, uso WordPress.
    Você usou algum plugin neste efeito de links que levam aos sub títulos, você tem algum artigo explicativo sobre isso?

    Obridaga!

  45. Teka disse:

    Oi Fábio consegui arrumar o botão curtir, agora minha outra dúvida além do menu do seu artigo, é: Como faço para que este Widget apareça apenas nos posts e não na home nem em páginas?

    Obrigada!

  46. Adriano Lucas disse:

    Na sua barra de menu esta escrito compartilhe errado, acontece, esta “comparithle”.

  47. agora ja sei como fazer muito obrigada pela a sua resposta.

  48. quundo eu precisar de uma informação posso entrar em contato com vc

  49. E aí Fabio, beleza?

    Então, no meu blog, o botão de compartilhe do facebook não aparece. Fica só o espaço vazio. Como faço para corrigir isso?

    Grande abraço.

  50. Ola, fiz tudo certinho mais quando digito aparece 4 opções desse codigo, dai não sei embaixo de qual eu devo colocar, e aproveitando que seu TEMPLATE é igual ao meu … deletei umas coisas …se vc notar na home, no final do primeiro post, do lado direto tem uma pequeno quadradinho branco … e quando vc entra nos outro menus, fica uma barra branca maior ao final de cada post, vc poderia me ajudar a remover isso … gostaria tbm de remover a caixa SEARCH no topo lado direito, sem mais obrigado.

  51. Ola Fabio, tudo bem?

    Super util esta ferramenta. Consegui incluir em um dos meus sites sem nenhum problema, porem no outro nao funcionou. O site que nao consegui incluir a barra foi o Terapia Cotidiana. Nao da erro na hora se salvar, salva normal, porem nao aparece na hora que carrego a pagina. O que pode ter acontecido?

    Obrigada de antemao.
    Abracos
    Sani

  52. Larissa disse:

    Oie? eu coloquei o sidecar no meu blog mais ele esta aparecendo dulpicado numa versão maior e uma menor vc poderia me ajudar?

  53. Olá novamente!
    Caro Fabio, eu inseri o gadget, porém o botão “compartilhar/share” fica grande, deixando todo o gadget bem largo, porque o botão compartilhar é muito mais largo do que os outros ícones do gadget. Porque ele não fica na mesma largura dos outros?

    já utilizei este gadget, e tinha dado certo uma vez, porém dessa vez, aconteceu este erro com o Compartilhar do facebook.

    Abração desde já!
    Obrigado!

  54. Tatiana disse:

    Oi Fabio, tudo joia?
    Parabéns pelo sitebar. Sabe dizer se ele funciona na plataforma do Wix via HTML/Embed Code? Fiz os ajustes necessários sugeridos para WordPress e outros, mas ficou em branco.
    Abraço e obrigada pela ajuda,
    Tatiana

  55. Kelly Araujo disse:

    Oi Fábio, olha muito obrigado por esta barra deslizante muito legal.Assim que conseguir fazer algumas alterações, vou publicar uma matéria diferenciada e linkarei seu site.

    Então, eu consegui fazer as alterações que vc disse que tinha fazer, mais ai o Curtir não veio e nem o +share, vc pode me ajudar?
    Um abraço e mais uma vez obrigada por isto.
    Kelly

  56. Muito bem seu tutorial vou fazer um teste num Blog meu.

Deixe o seu comentário!