Se você gostar do post abaixo, por favor, clique aqui para se inscrever gratuitamente através do e-mail, assim você terá um post a cada e-mail recebido, podendo baixar nossos ebooks

Janela(Pop-Up) Flutuante com Caixa Like-Box(Facebook)

Janela(Pop-Up) Flutuante com Caixa Like-Box(Facebook)

Colocar uma janela Flutuante Like Box do Facebook, é uma das melhores forma no Blogger para aumentar as curtições da pagina de seu Blog, logo transformar seu Blog mais conhecido e falado no Facebook, e essa janela é um pouco mais simples, melhorando a aceitação de seus leitores, pois ela é menor e não ocupa muito espaço ao abrir seu Blog e com o botão de fechar bem visualizado.

Se desejar ter sucesso na instalação dispensando todo esse tutorial, veja o vídeo de um Youtuber fazendo a instalação da Pop Up, assistir agora.



v


Nesse código você não precisará editar nenhum trecho do código de seu Template, simplesmente você copiará o código abaixo e adicionará um Gadget > JavaScript no layout de seu Blogger.

Não se preocupe, se não estiver vendo o lado direito do código é por causa do tamanho do corpo da postagem.

<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-E9dVofW8BBY/T42WBJ5M22I/AAAAAAAAD_w/w7AL0l9gVKk/s40/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-ibVOtcbbUyU/T42WNcii6_I/AAAAAAAAEAE/Mrplo9QsPks/s32/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://yourjavascript.com/1029251148/jquery.min.js'></script>
<script src="http://yourjavascript.com/1141272178/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"
350px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F
nomePaginaBlog&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
</div>
</div>

Na parte destacada de vermelho você irá colocar o nome que fica logo depois da barra do link de sua página, como exemplo: http://www.facebook.com/Phablo-Projetos. Já nos tamanhos em azul da janela, recomendo que não mude, mas se você já tem noção de personalização, poderá fazer suas mudanças, mas se lembre que muito grande essa janela irá incomodar o seu visitante e leitor.

Veja também:

  1. Barra com variedades sociais no seu blog
  2. Comentários do facebook no blogger
  3. Criar, Personalizar e Publicar Página do Facebook
  4. Cópie os seus dados do facebook
  5. Evitando e-mails do facebook
  6. RSS Graffiti: Publicar Postagens automaticamente no Facebook
ADM: Gostou? Compartilha esse post e não esqueci de comentar!

Gostou? Compartilhe:

68 comentários:

  1. Olá Phablo.

    Gostei muito dessa pop-up, eu acho muito importante integrarmos aos nossos blogs esse tipo de gadget, essa é uma boa forma de aumentar a conexão de um blog com as redes sociais.
    Seu blog tá excelente, muito bom os seus artigos.

    Abraços!

    ResponderExcluir
  2. Herlan,

    Agradeço mais leitura sua aqui no Blog, e realmente graças a essa pop up o numero de curtições aumentou! GRAÇAS A DEUS, já estava ficando louquinho com isso. Mas também tenho que pensar naqueles que não gostam disso, estou vendo quando eu tiro ou continuo com esse pop up.

    Abraços

    ResponderExcluir
  3. Agradeço Ruan Pablo pois é um ótimo script fácil de editar e funciona muito bem, obrigado

    ResponderExcluir
  4. André,

    Eu tenho a mesma facilidade em editar esse script, e com ele poço colocar até caixa ou outros botões.

    Abraços

    ResponderExcluir
  5. vou testar!
    Suas dicas sao sempre otimas!

    ResponderExcluir
  6. Edilene,

    Bom ter pela primeira vez um elogio assim, pois sempre vi minhas necessidades como Blogueiro, logo percebi que dava para repassar meus conhecimentos em criações e edições.

    Obrigado.

    ResponderExcluir
  7. Olá Phablo,
    Excelente dica.
    Já usei esse código em outro blog e ganhei muitos fãs, recomendo a todos.
    Abraços.

    ResponderExcluir
  8. Carlos,

    Obrigado por mais um comentário, mas a todos que estejam vendo este comentário por favor visitem o post que o Carlos fez recomendo todo, até o ponto final: http://www.comoblogar.com/2012/06/box-flutuante-do-facebook-para-blogger.html

    Abraços

    ResponderExcluir
  9. Olá Phablo,

    Ótimo artigo, é uma boa forma de divulgar uma página, muitos são contra mas é o melhor a se fazer até atingir um numero bacana de curtidores.

    Abraços, bom fim de semana

    ResponderExcluir
  10. Juliano,

    Muito obrigado pela sua visita, eu sempre vou estar colocando ferramentas do Facebook que venham me ajudar com crescimento do Blog. :D

    Abraços

    ResponderExcluir
  11. Muito bom amigo!

    no meu blog as vezes aparece, as vezes não...rs

    http://desktopgamers.blogspot.com.br/

    ResponderExcluir
  12. muito boa a postagem, simples e fácil..parabens

    ResponderExcluir
  13. Alguem pode por favor me dizer se esta funcionando?http://cybertechnerd.blogspot.com.br/ obrigado

    ResponderExcluir
  14. Não deu certo aqui...
    Acredito que é o endereço da minha fã page...
    Que droga queria muito isso...
    Blog: http://atilakevinblog.blogspot.com.br/

    ResponderExcluir
  15. Kevin,

    Você está corretíssimo, pois a maioria dos problemas com o Pop Up é o link da fan page. Olhe direitinho, tente sem o código da página, ou se possível desista do código frame e use o normal que está disponibilizado com dois códigos após gerar o Gadget.

    Abraços

    ResponderExcluir
  16. o meu não tinha dado certo pq os coockies de meu navegador ja eram salvos quando eu deletei e abri o site de novo vi que estava pegando :D pelo i explorer

    ResponderExcluir
  17. Olá.
    Não sei o que aconteceu. Coloquei no meu "bloguinho" mas só funcionou uma vez. http://israel-ferreira.blogspot.com.br/

    ResponderExcluir
  18. Israel,

    Olhe se você errou no link ou colocou a caixa do código no local certo. Se foi no link, em caso de numeração API coloque junto, se não tiver coloque como a sua página é acessada.

    Abraços

    ResponderExcluir
  19. Muito obrigada!! De todos os codigos que eu tentei o seu foi o unico que deu certo!

    ResponderExcluir
  20. Poderia me dizer como edito para poder excluir o botão "fechar" e a pessoa só entrar no site se curtir a página? Sei que fica 'agressivo", mas este é meu intuito.

    ResponderExcluir
  21. Natalia,

    Fico grato pelo êxito, lhe recomendo a usar este código com qualquer tipo de widget que não pese e seja atraente para seus leitores.

    Abraços

    ResponderExcluir
  22. eu fiz a do outro nao sei se eu fiz certo alguem pode olhar no meu site e curti pra ve se due tudo certinho
    http://minecraftservebrasilonline.blogspot.com.br/

    ResponderExcluir
  23. SOLDADOMAT,

    Olha rapaz, percebi que tem algo errado com o código que é disponibilizado pelo Facebook, você pode ir em:

    https://developers.facebook.com/docs/reference/plugins/like-box/

    Configure com seu link e a forma da caixa que desejar, depois clique em GET CODE, lá escolha na opção Iframe e copie o código e substitua colando na parte parecida no código do post.

    Abraços.

    ResponderExcluir
  24. Realmente muito bom, e melhor funciona tambem no wordpress.

    ResponderExcluir
  25. aa eu nao sei fazer ruan eu fiz errado fico transparente affs eu nao sei

    ResponderExcluir
  26. ah, ruan eu fiz um teste coloquei o o codigo do pablo e o meu apareceu a caixinha :D so que ela fico em branco :@

    ResponderExcluir
  27. Olá, gostaria de saber como procedo, pois, eu tenho na página incial um slide também "style" e quando eu coloco outro widget de HTML com esse código fornecido, da pt no slide, e não funfa. O mesmo também com as setas de navegação que eu coloquei, elas param.

    ResponderExcluir
  28. Gabriel,

    Muito legal esse seu problema, e para te ajudar tenho o desejo de informar que nos primeiros trechos do código você poderá editar a posição da caixa na sua janela, logo encontrarás a melhor posição da caixa para não atrapalhar o slide, entretanto se não achar viável para você recomendo que não a utilize, pois fica a sua escolha o que priorizar.

    Abraços

    ResponderExcluir
  29. Só uma dúvida.... esse código evita o carregamento desse box a todo reload?
    Porque o visitante habitual do blog acaba se irritando com esse box toda vez que ele entra no blog ou entra em um post..

    ResponderExcluir
  30. Rodrigo,

    Boa pergunta e nem se preocupe com o reload, este pop up é por histórico uma vez visualizado raramente reaparecido!

    Abraços

    ResponderExcluir
  31. Queria colocar em meu site php, porém, ele tem 3 paginas index (index.php, index1.php, index2.php)
    Coloquei na primeira que é a principal mais nao funciona. Ja tentei colocar em varios local mais nao pega de jeito nehum.

    esse codigo ele pode ser utilizado em site ?Como faço para add ao meu codigo?

    ResponderExcluir
  32. Vanilson,

    Não tenho certeza com o código da estrutura dessa caixa pop up, porém creio que o código iframe da caixa de fãs poderá ser adicionado com outro código de caixa pop up em php, facilitando para você!

    Abraços

    ResponderExcluir
  33. Olá Ruan, quero agradecer por este post, foi de grande valia para meu Portal, fika na Paz e um Abraço.

    ResponderExcluir
  34. EU COLOQUEI NO MEU BLOGGER NÃO PEGOU ALGUEM MIM AJUDA

    ResponderExcluir
    Respostas
    1. Malatrix,

      Revise o código que estas colocando dentro da caixa, ele muitas vezes dificulta o funcionamento, se não for isso, revise como você estar colocando todo o código no gadget/javascript.

      Se não funcionar vá na página de geração do código e veja a melhor forma para funcionamento dentro de sua caixa.

      Link para sua ajuda: http://www.phabloprojetos.com/2012/03/criar-personalizar-e-publicar-pagina-do.html

      Abraços

      Excluir
  35. Obrigado pela dica, gostei muito!

    www.bercarionatural.com

    ResponderExcluir
  36. Valeu cara, fazia um tempão que eu procurava isso, mas nenhum funcionava, até agora.

    ResponderExcluir
  37. Fico Perfeito no meu blog valeu pelo tutorial!

    ResponderExcluir
  38. Cara, muito legal, gostei, nao tem jeito de fazer uma dessas para capturar emails ?

    ResponderExcluir
  39. Edmilson,

    A possibilidades sim de fazer uma caixa dessa para capturar emails, porém terei que rever um código apropriado para tal caixa, a velocidade de abertura, a importância para cada blog, mas posso pensar melhor. Obrigado pela dica.

    Abraços

    ResponderExcluir
  40. Gostei Muito dessa dica, Vou colocar no meu site

    Obrigado

    Nilton Falé

    ResponderExcluir
  41. Num Sei Porque Mas eu Faço Tudo Certinho & Quando Vizualiso A Janelinha Das Curtidas Aparece Flutuante, Mas Ta vazia :S

    ResponderExcluir
    Respostas
    1. Passagem,

      Em alguns casos é bom você pegar a caixa com próprios meios, entre aqui:

      https://developers.facebook.com/docs/reference/plugins/like-box/

      Configure da melhor forma que desejar, clique em "Get Code" e Escolha sua página e nas abas escolha Iframe copie e substitua o copiado pelo mesmo código no final do código acima, descrito no post, creio que não irá precisar fazer mais mudanças pois já configurou-o no próprio Facebook.

      Abraços

      Excluir
  42. Isso serve tb para o blog Wordpress?
    ABs

    ResponderExcluir
    Respostas
    1. Liliane,

      Existe sim possibilidade dessa ferramenta para WordPress, porém recomendo plugins específicos, pois eles são mais apropriados, em questão de velocidade, layout, blog, nicho, seo e tudo mais.

      Para não ter problemas com códigos pratique essa dica: Como colocar uma janela popup do Facebook no WordPress Tutorial

      Abraços

      Excluir
  43. Respostas
    1. Rafael,

      Pode ser dois problemas, analise no código que você copiou se saiu correto a copia na caixa de adição do gadget no seu blog. Preste atenção logo onde fica o código do facebook, não se esquecendo de reparar os links de sua página com numeração se esta tiver.

      Se depois de tanta analise não encontrar erro, vá no próprio facebook, na pagina de desenvolvedores, Like Box, e após fazer as configurações de sua caixa de curtir com sua página, clique em GET e escolha IFRAME para substituir o código do facebook acima pelo que você copiou.

      Abraços

      Excluir
  44. Ateh que enfim achei um que funcionasse direitinho....vlw mesmo, bom blo parabéns!

    ResponderExcluir
  45. Este comentário foi removido pelo autor.

    ResponderExcluir
  46. teria como adicionalo ao site wix, alguem poseria me ajudar ai

    ResponderExcluir
  47. teria como adicionalo ao site wix, alguem poseria me ajudar ai

    ResponderExcluir
    Respostas
    1. Nimja,

      É possível sim fazer a integração desta box no Wix, porém irá precisar encontar onde você adicionará este código HTML em alguma caixa ou chace no painel ou barra de controle do seu site no Wix.

      Abraços

      Excluir
  48. Adorei ficou ótimo no meu site www.utorrentv2.com

    ResponderExcluir
  49. O MEU NAO FUNCIONA DE JEITO NENHUM, AFFFFFF (menteflorida.blogspot.com) E OLHA QUE EU FIZ CERTINHO. JA MUDEI O NOME DA FANPAGE, COM BARRA, SEM BARRA COMO VC MANDOU, NADAAAAAAA, AFF, QUE PENINHA

    ResponderExcluir
  50. no meu site só funciona na primeira vez que eu entro , depois nao aparece mais, queria que sempre aparecesse, tem como fazer isso ??? obrigado
    meu email para resposta : jrbridi@yahoo.com.br

    ResponderExcluir
    Respostas
    1. Juninho,

      Ter uma box para curtição segue uma analise de satisfação de quem visita seu blog, logo se ela aparecer constantemente irá abusar seu leitor e fazer ele sair do mesmo cedo ou tarde.

      Imagine, ele já curtir e a box aperreia-lo, toda vez que visualizar posts diferentes ou páginas especificas e a box aparecer, isso é muito chato.

      A box funciona, por cache. Se visitar uma vez, ela não aparece mais.(Ou exclua histórico de navegação)

      Abraços

      Excluir
  51. Pablo
    Finalmente, achei uma dica que funciona mesmo!
    Rrecomendo!
    Gostei Muito dessa dica, coloquei em meu blog e ficou muito bem!
    Te levei comigo, fica no item Parceiros e Amigos.
    Aguardo uma visita sua, se quiser me adicionar vou amar!
    http://aprendacomanet.blogspot.com.br/
    fan page: https://www.facebook.com/aprendacomanet
    Meu outro Blog: http://cursosuperioread.blogspot.com.br/
    Obrigado
    Profa Universitária - Ivete

    ResponderExcluir
  52. Apliquei em www.clientedigital.com.br , ficou show... Obrigado!

    ResponderExcluir
  53. Gostei muito do post Pablo, além da caixa like box popUp podemos também colocar um botao like invisivel, curtir,Fan Page - estou disponibilizando grátis em: http://www.codigosparablog.com/2013/11/botao-like-invisivel-curtir-gratis/

    ResponderExcluir

Seu Comentário estará enriquecendo o conteúdo acima. Fico grato com sua participação! Qualquer dúvida relacionada a outro assunto use o nosso formulário de contato "Fale Conosco". Obrigado

Por favor me adicione no Google + para eu poder te responder de imediato!

 
Copyright © 2012 - Phablo Projetos - Direitos Reservados | Page Rank Licença Creative Commons
Desenvolvido por Carlos Vínicius | Tecnologia do Blogger | Páginas: Termos de Uso e Licença
    Twitter Facebook Google + YouTube