Box Curtir do Facebook na lateral do blog (em abas)

em 13 de junho de 2013

Quero compartilhar com você um widget que instalei em meu Portfólio do qual gostei muito.
Trata-se de uma aba que fica fixa na lateral do blog e que quando passamos o mouse sobre ela abre o box de curtir da fanpage do meu blog.
Veja aqui como fica:

Demonstração do tutorial

Para instalar em seu blog são apenas 2 passos simples.
Para começar vamos instalar a chamada JQuery que fará o widget funcionar.
Acesse a aba /modelo de seu blog e clique em Editar HTML. Dentro do código-fonte tecle Ctrl+F e na caixa de pesquisa que abrir digite isso:
</head>

Acima dela cole isso:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Salve as alterações. A seguir clique na aba Layout/Adicionar um gadget eescolha a opção HTML/JAVASCRIPT. Na janela que abrir cole isso:

 <script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>
<div class="w2bslikebox" style="">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FNOMEDESUAFANPAGE&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">by Way2Blogging</a></span>
    </div>
</div>

Salve.
E clique em Salvar alterações.

A única alteração realmente importante que você precisa fazer é colocar o nome de sua fanpage onde está escrito NOME DE SUA FANPAGE
Você notará que está escrito assim: FNOMEDESUAFANPAGE, com um F antes. Não apague esse F, coloque o nome da sua fanpage como eu fiz, veja:
Fumpoucodemim
Depois de fazer isso salve. Não precisa arrastar pois a posição onde o gadget ficar não interfere em sua exibição.

 Prontinho.Sua fanpage agora pode receber curtidas nesse widget bonitinho e diferente!



Gostou e quer ter em seu blog mas não tem tempo/paciência/jeito para lidar com códigos?
Entre em contato comigo e por um valor simbólico eu faço pra você!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

36 comentários , comente também!

  1. Olá amiga
    Mais uma dica sensacional
    Jesus a abençoe com grandezas
    Um beijinho

    ResponderExcluir
  2. Olá Eleane sou eu a Alexandra lembras-te de te ter pedido este código para por nos meus blogs obrigado só há uma parte que não percebi o código é todo colocado, na caixa java html afora aquela parte para por o nome da sua fan page e não apagar o f onde se faz isso?
    Beijinhos
    Alexandra Melo
    Ainda espero por ti, mas tb não falta quase nada mesmo agora quero colocar isto já queria antes se te lembras só aquela parte do F é que me está a fazer confusão se puderes dizer algo eu gostava.
    Não sabia que detestestava tamto o calor. blog www.reciclardecorar.net e blog www.modaelist.com

    ResponderExcluir
  3. Eu vi no seu portfólio, é lindo! Já tentei mexer no modelo mas não deu certo.Só vc mesmo.
    Beijos.

    ResponderExcluir
  4. é o meu tbm não deu certo...
    Aparece a caixinha mas quando coloco o mouse em cima dela ela aparece toda em branco... bubu
    Bjinhosss

    ResponderExcluir
    Respostas
    1. oi EU SEMPRE TIVE ESSE PROBLEMA DE POR SÓ O NOME DA PAGINA ONDE FALA E DAR ERRO, TIVE QUE POR ASSIM PARA FUNCIONAR NA PARTE ONDE TÁ(FNOMEDASUAPAGINA )NA FRENTE DO F VOCÊ ENTRA NA SUA PAGINA DO FACE COPIA O LINK A PARTIR DO WWW E COLA TIPO ABAIXO TEM MINHA PAGINA PARA VOCÊ VER
      /www.facebook.com/pages/Jesus-Sua-Salvação/270160766351011
      E SÓ DA OK E PRONTO ESPERO TER AJUDADO

      Excluir
  5. Elaine agradeço a você por compartilhar conosco seus conhecimentos, que Deus abençoe sempre a sua vida e a de seus familiares, um grande abraço...

    ResponderExcluir
  6. Olá!
    Ameeei o seu blog e a dica!
    Se puder dá uma passadinha no meu e deixa um comentário?
    Meu mundo, Meu quarto

    ResponderExcluir
  7. Elaine
    Eu nao tenho muitas habilidades. toda hora perco onde esào todos os meus amigos. Por isso nem vou tentar. e muito complicado pra minha cabeça.
    com carinho sua amiga Monica

    ResponderExcluir
  8. Oi fiz tudo até apareceu o facebook no blog, porém não mostra a minha pagina, só fica o nome do facebbok ?
    Como resolvo isso ?
    Beijos obrigada!

    ResponderExcluir
    Respostas
    1. Fernanda, você colocou o nome da sua fanpage após o F conforme explico no texto?
      Aqui:NOMEDESUAFANPAGE
      Se não colocar não vai aparecer...
      beijos

      Excluir
  9. as suas dicas me ajudou muito, obrigada!!! adorei seu blog!!

    ResponderExcluir
  10. Não consegui fazer esse procedimento, está aparecendo a barra Facebok na lateral direita na posição vertical mas não abre link para nada..pode me ajudar Elaine?

    ResponderExcluir
    Respostas
    1. Leandro, sugiro que releia o artigo atentamente e veja se não equeceu nada.
      Este é o tutorial que sempre uso, usei em meu portfólio e nos blogs que personalizo.
      Releia, creio que pode ter pulado algo.
      bjsss

      Excluir
  11. Muito Bom!! pessoal, só funciona certinho se voces mudarem só oque diz, só mudem o nome da fanpage! eu achei que tinha q mudar outras coisas e n deu certo.

    Elaine, não funciona com twitter também? vc poderia colocar um tutorial de twitter? rs.

    Quem quiser olhar meu blog tbm está ai: www.narutocomovocenuncaviu.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Vítor, é isso mesmo, mudar apenas o que eu digo no tutorial.

      Existe um script para Twitter, mas ele parou de funcionar há algumas semanas. O post está no rascunho, ia postar quando vi que o script parou.
      Caso encontre solução eu posto. O desenvolvedor do script deve ter retirado-o do host.
      Em breve tem um para Google+
      bjssss

      Excluir
  12. Eu só queria a aba do Facebook que está em azul fosse rosinha que nem a sua hahaha

    Beijos!

    ResponderExcluir
  13. Olá
    Se eu mudar os meus botões do facebook perderei as contagens? O meu site tem milhares de partilhas e de likes do facebook. Se eu mudar para estes botões que aconselha, perderei as contagens anteriores?

    ResponderExcluir
  14. Não sabe? Quando se altera os códigos dos botões, as contagens apagam?

    ResponderExcluir
    Respostas
    1. Não, Zita, não sei pois nunca testei.
      Mas creio que as curtidas não somem não já que pertencem à fanpage.

      Excluir
  15. Olá Eliane,

    não consegui fazer as alterações, pois não foi possível copiar para colar no meu blog.

    ResponderExcluir
    Respostas
    1. Carolina, pare o mouse sobre o código, abrirá a janela com ele livre para ser copiado.

      Excluir
  16. Adorei as dicas e seu blog tbm

    Dá uma passadinha la

    http://biankechanel.blogspot.com.br/

    ResponderExcluir
  17. Eu conseguir colocar o plugin, porém só funciona na hora e depois não pega mais.
    Por exemplo: Eu acesso as paginas pelo chrome e sigo todos os procedimentos e da certo, mas basta fechar e abrir o navegador e entrar no blog que carrega tudo menos o plugin do facebook! O que pode ser?

    ResponderExcluir
    Respostas
    1. Alves, pode haver alguma outra ferramenta em seu blog conflitando com o box.
      Eu não posso dizer o que é mas sugiro que faça a instalação em um blog de testes até descobrir o que pode ser.

      Excluir
  18. Olá Elaine boa noite, fiz os passos certinho, troquei o nome para o nome da minha FANPAGE mesmo assim não deu certo,não aparece nada, podes me ajudar???
    http://www.priscilarejane.com/

    ResponderExcluir
    Respostas
    1. Priscila, o código é o mesmo que usei aqui:
      http://tutoriaisblogger.elainegaspareto.com/
      Seguindo o que explico não tem erro.
      Mas caso você não consiga escreva pra mim, a gente combina e eu faço o trabalho para você.
      beijos

      Excluir
  19. Elaine, já vi muita gente ensinando a fazer com o facebook... mas eu gostaria de fazer com o google+ também, tem como?

    ResponderExcluir
    Respostas
    1. Edson, tem jeito sim.
      Vou programar a postagem para semana que vem, tá?
      bjssss

      Excluir
    2. Muito obrigado ^^, salvando minha vida mais uma vez ^^

      Excluir
  20. Obrigada pela ajuda... seu site é ótimo e está sendo muito util.

    beijo

    ResponderExcluir
  21. Oi eu estou comentando por 2 motivos. 1º motivo - Gosto muito do seu blog. Ele tem sido muito útil para os meus blogs. Queria te agradecer por ter feito este blog e por querer ajudar de verdade as pessoas. Muito obrigada mesmo.
    2º motivo - Eu havia adicionado esse "Box Curtir do Face" e estava tudo bem até eu mudar o modelo do meu blog e acho que isso afetou o html do blog, eu exclui o gadget e então quando fui procurar o código no html do blog, ele já não existia mais. Ao invés da aba sumir, ela insiste em continuar no canto direito do blog, escrita facebook, mas quando passo o mouse por cima, não tem efeito nenhum. Você poderia me ajudar a respeito disso? Sério não sei mais o que fazer, já ate entrei no site Way2Blogging mas lá eles só ensinam a instalar. Beijos e desculpe pelo comentário extenso.

    ResponderExcluir
    Respostas
    1. Jenifer, tem que retirar o código. Se a aba está aparecendo significa que o código está lá, corrompido ou com erro mas está.
      Tem que retirar.

      Excluir
  22. Não to conseguindo so aparece facebook..e não consegui ver a demonstração ta dando erro!

    ResponderExcluir
  23. Elaine, existe algum erro em seu codigo,tentei seu codigo e tive o mesmo problema de caixa em branco.
    procurei em outro lugar e esse funcionol.
    https://dl-web.dropbox.com/get/Bot%C3%A3o%20curtir%20na%20lateral%20do%20blog.rar?_subject_uid=360579786&w=AAAX0sgTqSFuULPq9o00bQ_s88Wq0VWBiJtADS2ejYBL6Q&dl=1

    De uma olhada em meu site e veja como ficou, http://thegateofhell1.blogspot.com.br/
    Mesmo assim muito obrigado por sua ajuda, tenho aprendido muitas coisas em seu blog!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…