Uso aqui no [ Ferramentas Blog ] algumas vezes uma janela de fãs do Facebook que aparece logo quando o visitante chega na página, convidando-o para curtir nossa página no Facebook. É uma boa estratégia, um tanto quanto invasiva, mas eficiente para gerar mais seguidores e mais cliques de “Curtir”. Vou ensinar como fazer uma para o Blogger que não vai ficar incomodando seus visitantes.
Já tratamos aqui da importância de seu blog ter um página no Facebook, o que é diferente de um perfil pessoal. Para esse tutorial funcionar você precisa ter uma página do Blog no Facebook. Se não sabe como criar uma, nós te ajudamos:
O que vamos ensinar é como colocar um pop-up que abra na tela do Blog com a caixa de fãs do Facebook, sugerindo ao visitante que clique para “Curtir” sua página. Algo como no exemplo da imagem abaixo ou clicando no link para ver funcionando:
Blog de testes para ver funcionando o Pop-up do Facebook
O melhor desse recurso é que a janela só aparecerá uma única vez para o visitante até que ele limpe o cache do navegador, o que deixa o pop-up menos “chato”.
Esse recurso é em jQuery, baseado no Lightbox, modificado pelo Jack Moore, que chama “ColorBox”. Foi adaptado para o Blogger pelo Paul Crowe e eu mesmo fiz algumas alterações para tornar o código mais básico.
Se você gosta do [ Ferramentas Blog ] aproveite para curtir nossa página ou nos siga no Twitter, clicando abaixo:
.
Como adicionar pop-up do Facebook no Blogger
Tudo é bem simples de aplicar e o código é colocado dentro de um gadget (elemento de página) padrão do Blogger, o “HTML/JavScript”, como na imagem abaixo:
Na janela do Gadget – que pode ser adicionado em qualquer parte do Blog que não afetará a estrutura), você colorá o seguinte trecho de código só modificando o que for indicado.
O código é longo e tenha certeza de ter copiado corretamente, sem mudar nada além do que estamos ensinando.
<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="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FnomePaginaBlog&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
</div>
</div>
No final do código tem marcado de vermelho nomePaginaBlog. Todo endereço de página no Facebook tem um nome. A do [ Ferramentas Blog ] por exemplo é:
http://www.facebook.com/BlogFerramentasBlog
Exatamente aquilo é o nome da página que deverá ser colocado onde indicamos no código.
Feito isso é só salvar e visualizar funcionando no seu blog. Lembrando que a tela só aparecerá uma vez no navegador até que você limpe o cache.
As dimensões do elemento são padrão, mas você pode modificar manualmente trocando as medidas indicadas de verde no código.
Faltou um ensinando a por no wordpress.
Posso copiar e colar em um widget de texto?html no WP?
Ian,
Não. Assim como está o código não funcionará bem no WordPress. O melhor é usar um plugin para esse tipo de coisa.
Ainda vamos publicar um tutorial para esse tipo de plugin para WordPress.org.
Obrigado pela rápida resposta Marcos, você me recomenda um plugin para isso? Eu andei pesquisando, no Google e até aqui no FB mas nada encontrei, obrigado.
Ian,
Como escrevi na outra resposta para seu comentário, vou publicar um tutorial de plugin para WordPress.org.
Eu experimentei usar esse código mas entra em conflito com os sliders do meu blog. Será que tem solução para esse problema? Tipo o pop-up funciona direito, mas quando eu adiciono esse HTML os slides se blocam.
È importante salientar isso. Esse recurso NÃO funciona, quando o blog tem slides baseados em jquery tbm. Foi meu caso, funcionava bem até eu por o slide. E colocando na balança o slide é + importante, infelizmente tive que eliminar esse recurso do blog.
Cara To muito ansiosa pelo tutorial que ensina a fazer isso no WP…
Pesquisa aqui no Blog sobre Modal Dialog. Já publicamos sobre isso aqui no Blog: https://ferramentasblog.com/2012/04/plugin-para-criar-qualquer-tipo-de-pop-up-no-wordpress-modal-dialog.html
Olá Marcos!
Já tinha visto um tutorial quase idêntico a este num blog gringo, mas que não funcionou no meu blog.
Nem a versão criada por Iago Melanias funcionou também.
Abraço!
Edigley,
jQuery as vezes dá algumas incompatibilidades no Blogger e deve ter sido essa sua dificuldade. Como esse aqui a maior parte da estrutura está no CSS, pode ter beneficiando que funcionasse melhor no seu blog.
O problema é que eu não estava limpando os cookies do navegador. Agora sim funcionando.
Sem dúvidas esta dica é tudo de bom.
Já usamos esta estratégia a uma semana e são impressionantes os resultados.
Para se ter uma idéia, antigamente era uma média de 3 a 8 pessoas por dia que curtiam nossa página no face. Depois que colocamos a Pop-up Like Box este número subiu para uma média de 60 à 80 por dia.
Vale a pena fazer.
Oi, Marcos.
Instalei o script no meu blog. Deu tudo certo, exceto por uma coisa que acontece no Chrome (no Firefox está ok): a parte inferior da janela pop up fica encoberta por um vídeo do YouTube que há na minha última postagem. Com isso o botão “x”, no canto inferior direito para fechar a janela, se torna inacessível. Mas basta clicar em qualquer parte da página fora da janela para ela sumir, então não há muito problema.
Abraço!
Infelizmente há esse problema de vídeos incorporados sobreporem as janelas LightBox. Nesse código nào há como contornar isso. Mas tentarei descobrir.
Marcos obrigado por compartilhar isto conosco foi de grande utilidade. Gostaria só de perguntar se há algum problema em usar este código com o Adsense ou não tem nada haver com popunder
Obrigado
Alvaro,
Segundo as regras do AdSense, não é permitido usar os blocos de anúncios em pop-ups e nem em pop-unders.
Eu aconselharia a não usar isto. Não tem nada mais chato que abrir um site e tomar este popup na cara.
Thiago,
Eu concordo que, do ponto de vista da maioria dos visitantes, isso é meio chato. Mas não podemos descartar por completo já que é uma estratégia para conseguir mais seguidores.
O que não pode acontecer é usar de maneira agressiva e constante. Desde que a janela seja fechada e não fique abrindo mais, já resolve.
Olá Marcos!
Instalei no meu blog, limpei os ccookies no mozila, mas a janela não apareceu. Pode me ajudar?
Desde já agradeço a forma como você tem contribuído para a evolução da blogosfera.Abraço.
Diego,
Certifique-se de ter seguido todos os passos e adicionado o código sem modificações e sem cortes. Ele funciona em todos os testes que fizemos.
Refiz o processo várias vezes Marcos,infelizmente não deu certo. Pode haver algo no meu código html bloqueando o funcionamento da janela?
Diego,
Sim. Como é jQuery o código, alguns blogs enfrentam conflitos que bloqueiam o funcionamento correto. Nesse caso estamos vendo como contornar isso.
Obrigado por sua atenção Marcos. Abraço.Deus o abençoe cada vez mais.
Sem dúvida um argumento de peso para quem quiser aumentar o numero de likes no Facebook, mas ao mesmos tempo pode ser considerada demasiado intrusiva, cabe a cada um decidir o melhor.
Marcos, tem como você colocar o mesmo modelo de Pop-up que você usa aqui no Ferramentas Blog?
Caio,
O modelo que uso aqui é para blogs no WordPress.org e já publiquei um tutorial ensinando: https://ferramentasblog.com/2012/04/plugin-para-criar-qualquer-tipo-de-pop-up-no-wordpress-modal-dialog.html
Tem como colocar ele no blogger?
Caio,
O Blogger e o WordPress não são compatíveis.
Marcos, tem esse Pop-up instalado no meu blog, e eu quero remove-lo do meu blog, mas não consigo de jeito nenhum. Tem como você me ajudar?
Basta você retirar os códigos.
Mais que códigos? Eu quero remove-lo porque esta aparecendo outra pagina do Facebook (que não tem nada a ver com o meu blog). Eu já pesquisei o nome do perfil do Facebook que aparece, mas não deu encontrei nada.
Caio,
O código que faz o pop-up funcionar em seu blog. Como você usa um modelo diferente do que ensino aqui, eu não tenho como saber exatamente qual o trecho você deve excluir. Procure no código fonte para encontrar o que faz esse pop-up em seu blog funcionar.
Você não sabe como eu faço pra alterar a pagina do Facebook que aparece no pop-up, né?
Pode ser que você encontre o seguinte trecho:
href=http%3A%2F%2Fwww.facebook.com%2Festacaodosjogos
Se você substituir a parte em negrito pelo nome da sua página do Facebook, funcionará com a sua fã box.
Eu fiz todo o processo mas quando entra no site da um erro esse abaixo :
Could not retrieve id for the specified page. Please verify correct href was passed in.
Matheus,
Esse erro é da digitação do nome de sua página no Facebook. Verifique se colocou corretamente.
Muito bom, acabei de criar um nome de usuário a página do meu blog, aprendo muita coisa aqui muito obrigado mesmo! 🙂
Apontou como vírus aqui pleo meu avast e agora?
Henrique,
Então certifique-se do procedimento e, se continuar indicando isso, retire o código do seu blog. Nos testes que fizemos não vimos esse problema.
Marcos, depois que a pessoa vê e curte aí não aparece mais pra ela né? Abs
Will,
Como está dito no tutorial, o box só aparecerá novamente quando a pessoa limpar o cache do navegador. Mesmo que ela já tenha curtido ou fechado.
Essa poup-up é otima, pena q não não funciona no meu blog, pois atrapalha o slide de destaques.
Adorei a dica, coloquei no meu BLOG e ficou SHOW!
Valeu pelo tuto!
Olá Marcos, coloquei no meu blog e de início funcionou tudo corretamente, porém depois notei que o Slide parou de funcionar devido a instalação do PopUp, retirei o PopUp e o Slide voltou ao normal.
Sabe uma maneira de arrumar esse problema ?
Obrigado!
Thiago,
Isso deve ser algum conflito por conta do jQuery. Infelizmente esse tipo de conflito não tem como arrumar.
oi marcos eu so queria saber sid a pra por no blogger pq quando eu ponho no meu da poblema aparece isso Could not retrieve id for the specified page. Please verify correct href was passed in.
Leo,
Esse modelo é para o Blogger.
Verifique se você não apagou nada errado no código que demos. tenha certeza de só modificar o que está indicado. O erro que você apresentou é exatamente por conta de algo que você mudou errado.
Adoro seu blog! Sou sua fã!
Deu super ceto, obrigada!
Procurei feito doida na net por pop up em javascript com o ligthbox igual a este do plugin do facebook e não achei nada, se souber…
Bjs
Olá,
no meu deu certo, porém o plugin aparece somente uma vez em cada computador.
É possível colocar toda vez que a pessoa visita o site, como aqui no Ferramentas Blog?
Elijonas,
Como está explicado no tutorial acima, o Pop-up aparecerá apenas uma vez para o visitante a cada ciclo de limpeza do cache do navegador. Aqui no [ Ferramentas Blog ] ele só aparece a cada 24 horas. O ideal é que apareça poucas vezes para não irritar o visitante.
Muito bom, gostei, porem gostaria de fazer o popup aparecer a cada 24hs para o mesmo computador sem precisar apagar os cookies.
Ivan,
O ideal é manter um padrão mais limpo que não fique repetitivo para o visitante mais fiel. O modelo que ensinamos aqui ajuda nesse sentido.
Obrigado!
No meu está perfeito!
e Melhor, ele só aparece uma vez!
Isso não irrita os leitores!
Olá Marcos, boa noite!
Segui o seu tutorial corretamente, colocando o endereço da minha página no Facebook e tudo mais. Quando o pop-up abre em meu blog, da o seguinte erro:
“Could not retrieve id for the specified page. Please verify correct href was passed in.”
Minha página no Face esta okay, fiquei sem entender.
Abraços.
Certifique-se de não ter feito nenhuma modificação indevida no código e repita o procedimento.
Ola cara, estou usando este pop-up no meu blog de teste e notei que ele não desce junto com o mouse quando descer é normal isto? Tem como mudar pra ele descer com efeito jquery?
Anderson,
Nào. ele é estáticos mesmo. Não dá pra adicionar esse efeito.
Marcos tudo bom? teria algum meio de diminuir a expiração do cookie ? para 48 horas ? ou 72 horas ? eu vi que o valor abaixo refere-se a a expiração do mesmo .
var fifteenDays = 1000*60*60*24*30;
se eu reduzir para var fifteenDays = 1000*60; seria menor o tempo de cookie?
var fifteenDays = 1000*60 vai dar um minuto apenas.
Para que o cookie durar 48 horas utilize: var fifteenDays = 1000*60*60*24*2
Para quem não conseguiu por pelo Java/HTML do elementos da Página,
Eu tentei por o seguinte:
O Código de cima, eu pus dentro do <– Todo o Script ai dentro..
E o código do bloco do facebook, dentro do o ultimo bloco do face ai dentro.
Espero ter ajudado, funcionou comigo 😉
Coloquei em meu blog, mas ao fazer isso, o slide, e o sub-menus pararam de funcionar, ai precisei tirar. Quando tirei, voltou tudo ao normal, que pode ser isso? Obrigado!
Parabéns pelo tutorial, muito bom mesmo!
Esta rolando conflito com o jQuery.
Precisa ver coo esta os sub-menus e o slide, da para corrigir, mas você vai precisar de conhecimentos em jQuery.
Galera quero imformar á vcs que se ñ pegar no adicionar um gagster..
Vai em Modelo Editar Html em baixo vai ter esse nome aée preste bem atenção marque Expandir modelos de widgets e aperte ctrl + F e digite coloque acima o codigo obtido pelo site para se previnir visualiza primeiro blzz aé se tiver aparecendo salve.
Bom aé espero que tenha Ajudado pois niguem me ajudoou kkkk fui
Quem quiser que apareça todo dia é so substituir a linha:
1000*60*60*24*30;” para 1000*60*60*24*1;
So modificar o ultimo numero representando quantos dias quer q apareça..
Marcos, estou tentando modificar as dimensões indicadas em verde, mas a parte de dentro (onde tem as fotos dos que já curtiram) fica com uma barra de rolagem orizontal. Será que nao teria como resolver isso?
Muito Obrigado!!!
Funcionou perfeitamente no meu blog. 🙂
É uma pena, pois no meu blog, quando pus essa janela ela funcionou mas o slider de destaque deixou de funcionar. Há alguma forma de contornar a situação?
Valeu aí, agora é só esperar os resultados e ver se vale a pena, um abraço
tem como colocar o botão subscriber do youtube no lugar do like do face?
Rafael,
Dá para colocar qualquer coisa no lugar da Box do Facebook.
Tem como mudar a posição? eu queria que o pop up aparecesse um pouco mais ao lado para não fiar por trás do vídeo do youtube.
Obrigado
Marcus,
Esse modelo é para centralizar. Infelizmente não daria para mudar a posição.
Obrigado! Resolvido, agora o pop up não esta mais por trás dos vídeos do youtube…mistério!
No meu caso! O meu blog ficou com erro nos Slides! Eles pararam de passar e travaram! O que pode ser?
Erik,
É comum alguns recursos terem conflito nos códigos.
Por isso é importante testar e decidir qual o melhor para seu blog quando isso acontecer. Infelizmente não dá para evitar certos conflitos.
Marcos,
Parabbéns pela iniciativa desse conteúdo. Porém estou tendo um problema em minha template, o topo dela é formado por slides de imagens. E qdo instalo esse Gadget, do poup up do face, as imagens travam. Existe possibilidade de alguma informação a mais, que poderia me repassar.
Antecipadamente grato pelo seu apoio.
Fraternalmente,
Ivan
Ivan,
Estamos testando alguns códigos novos para evitar esse tipo de conflito com outros códigos que já existam nos blogs, por enquanto não tivemos bons resultados.
Olá,parabéns pelo script muito bom, ha deixando uma dica aqui ta faltando colocar um http: nessa linha ae que vo ta deixando quem tiver plb pode ta corrigindo isso ae valeu.
<iframe src="//www.facebook.com/
so deixar assim :<iframe src="http://www.facebook.com/
Renato,
Bem observado.
Muito obrigado pela ajuda.
Marcos Lemos grato a você pois me salvou
Procurava um tutorial sobre isso faz tempo
so agora eu encontrei.
Perfeito Marcos!
Funcionou perfeitamente no meu blog. Agora tive a certeza de que estou em um do melhores blogs da internet.
Parabéns pelas dicas e tutoriais.
Abraço e sucesso!
Oi, Obrigado pelo tutorial. Funcionou perfeitamente no meu blog. Agora, uma pergunta, este código só funciona para Fan Pages do facebook, correto? Existe algum código deste tipo que possa ser utilizado para a página pessoal do facebook?
Abraços
Não.
Páginas pessoais não têm Fan Box, por isso não é possível usar esse tipo de recurso.
oi eu sou o canas e gostaria saber como o Po up aparecer varias vezes sem ter que apagar o cahe do navegador e muito chato pagar sempre
Canas,
Esse modelo foi criado para que o pop-up só apareça poucas vezes para não incomodar o visitante.
Oi Marcos, vi que você colocou o box de seguir do Twitter e do Google Plus junto como o do Facebook aqui no Ferramentas. Vc poderia fazer um tutorial de como implementar isso se possível? Abraço…
Claro… é bem fácil… vou juntar os tutoriais para facilitar pra galera.
Valeu Marcos!!! 🙂
Alguma novidade sobre esse tutorial Marcos?
Valeu cara, escolhi seu tutorial pois não precisa mexer no código fonte e, assim, fica mais fácil de desinstalar se precisar de atualizar. Só queria saber se pesa no carregamento do Blog?
Outro fator para ter escolhido seu site é que admiro seu trabalho e te acho um dos melhores na área.
Abraço
Sempre vai ter um peso no carregamento do Blog, especialmente que o código do Facebook é pesado. Por isso escolha bem o que adicionar no seu blog.
Procurei procurei e achei !
Os outros tutoriais são diferentes esse me ajudou bastante obrigado ai !
Cara, não sei o que seria de mim sem Vocês.
Meus Parabéns.
A maior parte das modificações, widgets, etc, que já fiz no meu blog, foi graças a vocês.
Continuem progredindo sempre dessa forma, Valeu.
Marcos, Boa Noite, eu estou com um problema, quando eu adiciono a caixinha pop up curtir no blog, o slider fica estático, quando eu removo o código pop up, o slider volta a funcionar normalmente, o que eu faço para resolver este problema? Obrigado.
Oi Marcos, Queria que os anuncios do Google adsense abrissem em pop up, como faço?
Suane,
O AdSense não permite que seus banners sejam colocados em Popup. É contra as regras e pode punir você perdendo a sua conta.
Olá Marcos,
Como o meu blog já tem um slider em jQuery, o sistema “entra em conflito” e os slides acabam não funcionando corretamente. Há alguma opção alternativa de pop-up likebox que só abra uma vez como o seu para eu inserir no blog?
Marcos,
não tive muitos problemas com meu slider. eles apenas perderam a animação da transição. mas um problema que encontrei é que não consigo fechar o popup. só consigo fechar se eu clicar no link inicio e ai ele recarrega a pagina. tem alguma forma de contornare isso?
se nao houver, existe alguma outra solução de popup que não conflite com o slider?
obrigado e aguardo
Obrigado!
Segui as instruções e funcionou direitino. Otimo trabalho. Sempre que preciso de alguma coisa procuro aqui.
Coloquei no meu novo blog e eestá funcionando perfeitamente, obrigado por esta valiosa dica. Agora é só esperar que aumente o número de curtidas na página.
Valeu!
Excelente!
Serve, tanto para BLOGS, quanto para SITES..
Muito bom, procurei bastante artigos sobre isso, mas nenhum foi tão bom quanto o de vocês, continuem assim, já compartilhei e recomendei aos amigos, abraços!
Gleybson e Marcos,
Estou a dias procurando por este tutorial SÓ QUE… eu preciso deste recurso no website e não num blog. Podem me ajudar nessa ? Abraços. Att.
Muito Bom!
Estava procurando isso a um tempo e só consegui achar aqui.
Simples e fácil.
Parabéns!!
Depois que coloquei esse pop-up, os slides do meu blog pararam de funcionar e quando retiro-o, eles voltam ao normal. Porque?
Obrigado.
Mi,
Pode ter conflito nos códigos. Desse modo você terá de optar por qual recurso quer usar em seu Blog.
Código perfeito, tentai várias vezes e nunca deu certo e agora esta funcionando.
Muito obrigado por disponibilizar o código, tudo de bom!
Obrigada por compartilhar funcionou perfeitamente no meu wordpress tb. Valeu
Pingback: PopUp com Likebox do Facebook para Blogger – Modelo novo | Otimizando Blog
Segui as instruções cuidadosamente há cerca de uma hora, mas não apareceu a caixa de curtir do Facebook no meu blog. Aparece apenas o título do gadget (coloquei “Curtindo o Semioblog”).
O que deve ter saído errado?
Obrigada.
Rilva Muñoz
Provavelmente a referência à sua página do Facebook está errada. Reveja o código e siga exatamente como descrito no tutorial para garantir que tudo funcione.
Se eu quiser alterar a opção de aparecer novamente somente se limpar o cachê, ou pelo menos, aumentar a frequência que apareça ao mesmo usuário, é possível? Se sim, como?
Muito obrigado.
Rodrigo,
é possível no código dos arquivos do JavaScript. Se você conhece os códigos e tem onde armazenar os arquivos, pode modificar como preferir, mas não recomendamos que o pop-up apareça mais do que isso.
Marcos lemos,eu queria que aparecesse sempre que a pessoa entrasse no site,sem limpar cache … onde eu altero no codigo pra fazer isso ?
Davi,
como respondi em outros comentários, será preciso saber mexer no código do JavaScript e hospedar novamente os arquivos. Mas só recomendamos isso para quem tem conhecimento de códigos.
Além disso, não é bom que a janela abra sempre, pois é chato para os visitantes. Você pode perder visitas por causa disso.
Na linha “jQuery(document).ready(function(){
if (document.cookie.indexOf(‘visited=true’) == -1)”
Troque o ‘visited=true’ por ‘visited=false’
It’s done, só isso já deverá fazer funcionar como você quer…
Parabéns pelo artigo, infelizmente não deu certo com meu blog, acho que está dando conflito com a caixa de “curtir”.
Mas ótimo artigo.
Abs.
Obrigado pela informação!!! Mas tem a possibilidade dele aparecer só quando a pessoa sair do blog? Acho meio estranho a pessoa curtir sem nem saber se vale a pena, muitas vezes eu só curto o site depois que me valeu a pena o que li!
Obrigado!
João,
existem códigos que exibem e reabrem janelas quando o visitante sai da página. Não é muito recomendável por ser muito invasivo. Entendo sua preocupação, mas o pop-up tem um efeito positivo. Uma dica é que você coloque também em outra parte do blog a janela do Facebook. Desse modo, se a pessoa ainda não conhece seu blog o suficiente para ser fã quando abrir o pop-up, se ele gostar, verá a mesma opção na barra lateral.
Marcos,
eu já mantenho uma barra lateral com a opção de curti… e seguirei seus conselhos, Obrigado!
Parabéns Marcos,
Excelentes dicas, uma pop-up da like box do facebook é fator necessário para aumentar o números de divulgadores de um trabalho. Como sempre podemos encontrar as melhorias dicas aqui no ferramentas blog.
Sucessos sempre,
marcos da onde eu vou copiar o codigo para colar no gadget do java script,vc nâo està dizendo que tenho que digitar aquele còdigo do tamanho do mundo e digitar ele no espaço da caixa do gadget para salva-lo nâo è?
Selma,
O código está no artigo. Siga as instruções e copie de lá. Não tem que digitar, é só copiar, colar e alterar o que está indicado.
Oi, seguinte: Coloquei o Pop-up para aparecer somente nas postanges, já que a maioria dos usuários vem do Google e outros, deixando a home mais “limpa”. Porém, esta aparecendo para o mesmo usuário várias vezes, ou seja, cada postagem que ele lê o Pop-up aparece, o que deveria ser somente na primeira postagem. Se poder me ajudar por favor.
Obrigado
Valeu man x)
bom cara eu consigui e otimo exelente.., mais tem um unico plobeminha q nao a torna perfeita
eu entri uma vez em um site e ele tinha esse mesmo esquema de divulgar a page do facebook com esse like box
mais a diferenca e que a dele o like boz estava escrito
“curta a pagina ou espere 90 segundo”
poxa como eu faço isso a pessoa nao entra na pagina enquanto nao curtir ou nao passar os 90 segundo como fazer isso ?
otimo post parabens 😀
Olá, toda vez que eu tento adicionar esse código no meu blog, o slide do blog fica bugado, ele para de exibir as fotos. Só volta a exibir quando eu retiro o codigo do pop up do facebook. Como faço pra deixar os dois?
Thiago,
É comum alguns códigos darem conflito com outros. Quando isso acontece vc terá de escolher qual quer usar.
É possível usar tranquilamente códigos combinados, só é preciso algumas adaptações. Normalmente o que gera conflito e acaba fazendo um dos scripts parar de funcionar (principalmente se sua técnica de programação é baseada em ctrl C + ctrl V) são funções duplicadas. Da uma olhada se o slider não tá chamando o jquery.min.js (mais provável) ou jquery.colorbox-min.js (menos provável), se sim, é esse o problema, dai basta apagar a linha que já foi chamada.
Se não entendeu nada do que eu disse, você pode fazer um teste apagando a linha “” do código do pop-up, mantendo o resto e rodando no site. Caso não dê certo: coloca-la de volta e repetir o processo tirando a linha “” e se ainda assim não der certo, fazer sem as duas linhas. Se o problema for o que eu disse, nesses testes você já perceberá os dois scripts funcionando juntos =)
Espero ter ajudado
As “linhas” que eu disse são, respectivamente: yourjavascript.com/ 1029251148/ jquery.min.js e
yourjavascript.com/ 1141272178/ jquery.colorbox-min.js, as duas dentro da tag
Não ta aparecendo no comentario que fiz antes
Resolveu minha dúvida Kai ! Muito obrigado mesmo ! Apaguei a linha colorbox e funcionou rs
Exclui e refiz umas 10 vezes não consegui encontrar o problema… Alguma outra solução?
Valew, estava mesmo precisando colocar um destes no meu blog, pois tenho poucas pessoas ainda.
Voce saberia me explicar como colocar o Google friend Connect? Tento colocar mais parece que nao tem mais a opção.
O Google Friend Connect foi descontinuado e não existe mais.
Marco Lemos, funcionou no meu blog perfeitamente.
A única diferença é que tenho um autoresponder num servidor de hospedagem e para receber o ebook grátis coloquei um formulário de inscrição.
A dica que vou passar é muito útil também: caso você queira pode colocar qualquer código HMTL para ser exibido como esse pop-up e não só o botão curtir do facebook. Você pode colocar um sistema para a pessoa receber emails do Feedburner com os feeds do seu blog, ou um autoresponder (caso use um) ou ainda ícones para as principais redes sociais ou o download de algum ebook ou aplicativo, enfim a criatividade é infinita.
Como fazer? Simples: no final desse código existe o código do facebook que está entre e . Simplesmente tire tudo que está entre esses códigos (tire também o próprio Iframe).
Abraços e obrigado pelo código 🙂
Grande abraço,
Cheferson Amaro
Coloco no meu blog mas só aparece no Internet Explorer. Google Chrome e Firefox não aparece.
Marcos,saudações!
Tenho acompanhado seu trabalho, está de parabéns.
Instalei o código acima, congelou a tela, fechei no X do Popup, mas , quando entrou na minha página principal ficou um tanto bagunçado o título do meu Blog está repetindo junto a minha última postagem. Olhei o código HTML, mas não entendo das linhas, então , fiquei na mesma. Teria algo relacionado, alguma relação com esta inclusão e tenha alterado o código HTML principal? Não tenho backup da minha página
Se puder me dar uma orientação eu agradeço, acima deixei o link do meu blog, se por acaso eu encontrar uma solução antes de vc. responder eu aviso, mas, creio que está dificil,pois já garimpei a procura e nada.
Atenciosamente,
João Alves.
Como prometido, encontrei o erro, corrigido.Foi algo totalmente isolado ao seu código.
João Alves.
Olá, usei no meu blog e, a princípio, deu certo. Porém, os slides do blog não estão carregando direito. Tem como solucionar isso?
Miriã,
Infelizmente dá conflito com certos recursos do blog. Por isso é importante fazer testes. Então você terá que escolher qual recurso prefere manter ativo.
Sempre coloco esse código e dá certo mas de tempos em tempos ele falha. Sabe oque pode estar ocorrendo?
Caroline,
Pode ser algum conflito com algum outro gadget ou recurso do seu layout.
Era realmente um conflito entre gadgets.
Muito obrigada!
Uma dúvida: A caixa vai aparecer para quem já tiver curtido a página??? Pois não tem sentido.
Rodrigo,
Sim. Ela aparece para todos e não há como definir que apareça só para que ainda não curtiu.
Tentei usar esse código só que tive problemas, o código funcionou perfeitamente porem, tenho um Slide no topo do blog e ele trava quando to usando esse código, é só retirar o código que ele volta ao normal, vc sabe porque isso acontece?
Eu coloquei o código porém aparece a caixa em branco e apenas o X para fechar, e não tenho outro gadget a não ser a de páginas. e seguidores… como posso resolver?
Daniel,
Veja se adicionou os códigos no lugar certo e não modificou nada.
Sim, eu copei o codigo inteiro e não alterei nada além de retirar o trecho nomePaginaBlog e adicionar o endereço da página.
Daniel, o problema que está ocorrendo com você é o seguinte, não é pra colocar o endereço todo do facebook, somente o nome da sua página, no meu caso TidandoDicas
Espero ter ajudado
Resolvi!
Olá, tenho um blog tumblr mas não tenho uma página no facebook criada para ele, tenho apenas um plugin no blog com o botão curtir. Teria como eu usar esse pop up sem ter que começar do zero? Meu plugin no blog tem mais de 900 likes :/ Grato!
Bruno,
Esse modelo de Pop-up foi desenhado para Blogger e não sei se funcionaria no Tumblr.
As curtidas da página continuariam contando, mas o modelo que apresento aqui é para gerar fãs de página.
engraçado, tava funcionando perfeitamente no meu antigo layout
aí mudei o layout e ele parou de funcionar e nao mudei nadinha do codigo
esse é aquele que só exibe 1 vez ?
Thiago,
Sim, só uma vez até que o visitante limpe o cache do navegador.
Olá amigo bom dia! Tenho um pequeno probleminha no meu blog, toda a vez que insiro um script ou codigo com essa finalidade, o meu slide sempre para de funcionar, pode me dar uma luz? Desde já agradeço! Admiro seu trabalho, sucesso!
Joel,
esse tipo de conflito é normal e a opção é escolher qual recurso quer usar em seu blog.
Obrigado pelo retorno!
Prezado,
Aqui, a janela pop up aparece em branco! Fiz exatamente como postado acima! Podes me ajudar por favor?
Agradeço desde já.
Wilson,
Verifique se colocou os códigos corretamente e se sua página no facebook está ativa. Nao funciona para Perfil, só páginas de fãs.
Este detalhe de que funciona somente com páginas de fã é muito importante.
Não tem como deixar pra abri toda vez que a mesma pessoa entra no site mais de uma vez ?
Nesse modelo que ensinamos aqui, não.
Qual o outro Modelo que Aparece Toda Vez Que a Pessoa Entra ? Pf Preciso Muito xD
Obrigada Marcos, eu tinha tentado por outros tutoriais e não consegui. O seu funcionou de primeira, adorei. Abraços
No meu WordPress abriu esse codigo , mais demora muito !!
Não funciona com os modelos dinamicos do Blogger ?
Felipe,
Não. Ele segue outro padrão de códigos.
Ele fez o slide do meu blog parar, quando eu coloquei todos os slides ficaram parados. Quando eu tirei voltaram…
Marcos, existe a possibilidade de fazer com que a box apareça toda vez em que se entra no blog? Preciso que apareça três opções, uma abaixo da outra, já fiz isso, falta apenas fazer com que apareça a cada vez que entro no site. Obrigado, aliás, ótimo post.
Marcos, esse script não funciona na maioria dos blogs, melhor rever isso.
Marcos,
A janela pop up abre, mas além de abrir bem devagar, aparece em branco. O que pode ter acontecido?
Você não deve ter inserido corretamente o código do Facebook.
Funcionou perfeitamente. É bem simples!
Obrigado amigo!
Cara, ajeita esse post. Ele está induzindo as pessoas a acreditarem que na parte em vermelho tem que colocar o nome do blog, na verdade tem que colocar OS NUMEROS DA PAGINA DO FACEBOOOK e sugiro que faça videos, como esse aqui. O cara explica direitinho, nao tem como errar!
http://www.youtube.com/watch?v=VLBsBlFEiaI
Mas Marcos, parabéns pelo trabalho, você escreve muito bem e de forma clara! Sempre estou por aqui quando preciso de alguma coiss
Eu não estava conseguindo pq copiava o endereço inteiro e não só o nome do blog, mas agora deu … muito obrigada pela super dica querido.
Já tentei outros, mas realmente este
funcionou muito bem no meu blog,
Parabéns pelo tutorial.
Olá, Marcos!
Essa dica foi muito boa pra mim, funciona perfeitamente e a utilizo há muito tempo.
Porém, será que esse Pop-up pode prejudicar o posicionamento do Google ou não tem efeito nenhum sobre isso?
Parabéns pelo FB.
Como posso alterar oara que a data de expiração seja de 1 hora?
boa tarde… no meu não está funcionando… pode ser algum conflito do .js?
Código funcionou perfeitamente. Parabéns pelo ótimo trabalho realizado no blog.
Tem como fazer com que essa janela abra em todas as páginas do blog? Pelo que notei jó abre na home.
Boa tarde intalei corretamente , mas como a minha lja virtual a pagina e grande o boz fica la embaixo ou seja na metade da tela
tem alguma configuração que posso subri essa caixa pra quando o cliente abrir o site ja apareçer de cara proximo ao topo ? sem ter q rolar varias vezes pra apareçer ?
Muito obrigado brother !!! Vasculhei a internet e só aqui fui encontrar um código que funcionasse perfeitamente. Valeu mesmo !!!!!
uma dica para você ficar visualizando como tá, é abrir a pagina em uma nova janela anonimo.
Bom dia, coloquei esse código em meu blog porem está dando conflito com o slide da pagina, que parou de rodar.
sabe o que pode ter sido?
Já coloquei e inseri diversas vezes e ao tirar esse codigo o slide volta a rodar, coloco o codigo ele para.
Desde já agradeço.
Abraço
Bruno,
Não tem como resolver. Você tem que escolher qual recurso vai usar.
Olá Marcos,
Coloquei no blog e deu certo, só não queria que ficasse aparecendo na lateral do blog como os demais gadgets. Já fiz em um outro blog que eu tenho direto no html do modelo, mas não lembro mais. Você pode me ajudar?
oi marcos, eu fiz o procedimento mas aparece o quadradinho em branco o que q eu faço?
Olá, em na verdade a janela popup funcionou sim. Mas estou com um problema. A janela interfere no meu menu intuitivo do meu blog, quando eu coloco a janela popup a menu para de funciona e fica praticamente desaparecendo. Eu queris saber por quê isso acontece. se poder me ajudar ficarei grato
muito boa sua explicações me ajudou bastante consegui implementa.
Boa noite Marcos, no template do meu blog a caixinha aparece um pouco menor. Não aparece o x no caso da pessoa querer fechar.
Olá, é possivel retirar o X? Tipo obrigando o visitante a curtir a página?
Obrigado.
Sim, é possível.
Mas não recomendo.
não to conseguindo copiar o código esta aparecendo a tel de popup masesta dizendo que a url da pagina é invalida sendo que é o nome da pagina
Olá! esse tutorial é antigo, mas me ajudou muito, obrigada
Obrigado! hoje em 2017, a informação ainda está atualizada! srrss
no meu não esta funcionando
Tem algum jeito de deixar só o botão curtir, sem os rostos das pessoas pra não ocupar tanto a tela? Se sim, como?
Existe alguma coisa do tipo que seja responsivo ou menor?