Caixa curtir página do Facebook no blog
Há muitas maneiras de conseguir “Curtis” em uma página no Facebook do seu blog. Uma dessas maneiras bem interessante é colocando uma caixa (box) centralizado na página do seu blog, onde de tempo em tempo quando o visitante acessar o seu blog, essa caixa será aberta com a opção de curtir a página do Facebook. Veja o exemplo abaixo:
O melhor dessa ferramenta é que o usuário não é obrigado a curtir a página, e além do mais, o código é implementado com um cache, configurado para que a janela não seja aberta todas as vezes que o visitante acessar o seu blog e sim de tempo em tempo.
Veja como colocar em seu blog:
Blogger
1) Faça login no Blogger, acesse a página “Layout”, clique em “Adicionar um Gadget”, escolha a opção “HTML/JavaScript”;
2) Cole o seguinte código no campo em branco:
<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 expiress = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expiress=" + expiress.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%2FNOME_DA_PAGINA&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:250px;" allowtransparency="true"></iframe> </center> </div> </div>
3) Faça a seguinte alteração no código:
- NOME_DA_PAGINA – Substitua pelo nome da sua página que consta no link do Facebook. Exemplo: http://facebook.com/codigosblog (Colocando apenas: codigosblog)
4) Salve e pronto!
WordPress
1) Faça login em seu blog WordPress, entre em “Aparência” -> “Widgets”. Escolha adicionar um widget do tipo “Texto”;
2) Insira o seguinte código no banco em branco:
<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 expiress = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expiress=" + expiress.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%2FNOME_DA_PAGINA&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:250px;" allowtransparency="true"></iframe> </center> </div> </div>
3) Faça a seguinte alteração no código:
- NOME_DA_PAGINA – Substitua pelo nome da sua página que consta no link do Facebook. Exemplo: http://facebook.com/codigosblog (Colocando apenas: codigosblog)
4) Salve e pronto!
Observações
Recomendo retirar e recolocar o código em seu blog de tempos em tempos, dessa forma não cansa os seus leitores com a janela e atinge um público mais diferenciado a cada período utilizado.
O crédito do código não foi colocado, pois vi esse mesmo código em vários blogs sem nenhuma informação de quem realmente criou.
Muito legal e simples de fazer. Acabei de colocar na minha página http://www.inglessemmisterio.com/
Obrigado mais uma vez.
Bom dia Paulo.
Muito bom seu artigo. Tentei colocar no meu blog, mas não deu certo. Aparece a moldura tudo direitinho, mas somente a moldura em branco. Coloquei o nome da página no Face e tudo, mas dessa vez não foi, rs. O que será que ficou faltando?
Mesmo assim muito obrigada pelo artigo.
abraços…..!
Patricia, tudo bem?
Me passa o link da página do Facebook e o link do seu blog.
Vou testar.
Abraços.
Bom dia Paulo.
Aqui estão os links do meu blog e da minha página no facebook:
http://www.photoshoptutosedicas.com/
https://www.facebook.com/PhotoshopTutoriaisEDicas
Desde já aborigada!
Abraços e bom final de semana!
Patricia,
substitui NOME_DA_PAGINA por PhotoshopTutoriaisEDicas nos códigos e coloque o código conforme o tutorial. Depois me dê um ok, vou acessar seu blog e ver qual a mensagem que deu.
Abraços.
Cara tem como você me ajudar porque coloquei essa box tanto desse método quanto o que tem que mexer no html e da certo, só que quando eu coloco essa box o slide do meu blog não pega de jeito nenhum, tem como você me ajudar?
Excelente e simples de fazer.
Coloquei na minha página e funcionou perfeitamente.
Obrigadão !!!
Bom dia Paulo.
Coloquei em meu blog, mas desta vez não apareceu nem a moldura. Acho que devo estar fazendo algo errado.
O seu código esta assim: Fwww.facebook.com%2FNOME_DA_PAGINA&width=300&,
eu coloquei PhotoshopTutoriaisEDicas no lugar de …..FNOME_DA_PAGINA….., mas nada aconteceu.
Mesmo assim obrigada meu querido.
Beijos e bom início de semana p vc!
Não apareceu porque você já inseriu uma vez o código. Por causa do cache, ele via demorar aparecer pra você.
Insere como te falei, DEIXA LÁ e me avisa, porque ai eu acesso seu blog e vejo se vai aparecer.
abraços.
Por que você substituiu o F? É só a parte NOME_DA_PAGINA.
Abraços
Boa tarde Paulo.
Já esta lá desde ontem. Podes acessar a hora que quiseres.
Beijos….!
Corrige o que eu falei.
abraços.
Já corrigi Paulo, mesmo assim nada acontece. Ele ainda esta lá. Vou tentar mudar o gadget de lugar para ver se resolve.
Obrigada meu querido.
abraços.
No meu também não deu certo ‘-‘ :/
Bom dia Paulo!
Estou com o mesmo problema da Patricia, porém já exclui até o cache para visualizar e nada…
Você substituiu qual parte do código?
Bom dia Paulo! Substitui exatamente o que está sendo solicitado. Tentei colocar novamente o gadget hoje já consegui!! Obrigada pela ajuda e parabéns pelo blog! Ele é demais!!
Aqui apareceu certinho em seu blog, Sara. Veja novamente. Se quiser mando um print da tela.
abraços.
Boa noite Paulo tentei de algumas formas e nao apareceu nada.
Me ajuda pfv.
Meu site: http://jogosdopunk.blogspot.com.br/
Minha Pagina: https://www.facebook.com/pages/Jogos-do-Punk/310695249051592?fref=ts
Desde ja agradeço.
Você tem que escolher um nome (link) pra sua página.
Criando um link personalizado para sua página de fãs no Facebook
Você tem que escolher um nome (link) pra sua página. Criando um link personalizado para sua página de fãs no Facebook
Bom dia Paulo, eu executei do jeito que está no post más não conseguo fazer funcionar, pode me ajudar? eu copiei o link da minha pagina no face que é (Alldayjesus?ref=ts&fref=ts) no lugar onde é solicitado a troca, mas infelizmente não consegui, cara me ajuda…fico no aguardo..
abraço
alldayjesus.blogspot.com.br
Se o nome do meu facebook for o nome da página + o código.
COMO EU FAÇO?
Tem que escolher um nome da página primeiro: http://www.facebook.com/username
Só tem um problema comecei a pouco tempo e não da para fazer isto pq só tenho 7 curtir tem alguma forma alternativa ou vou ter que esperar?
Pablo, coloca o ID (código) no lugar e veja se funciona.
Abraços.
Obrigado por me ajudar Paulo!
BRIGADÃOOOO Gente Ajudou Bastante Mesmo Vlw.
Não estou conseguindo fazer..
Pode me ajudar?
Link da página do face:
https://www.facebook.com/pages/BLOG-Angel-Poubel/593476004003339?ref=hl
Link do Blog:
http://www.angelpoubel.com
Você tem que mudar o link do seu facebook antes de fazer esse processo.
Acesse: http://www.facebook.com/username
Abraços
Olá,
A diga me ajudou muito.
Obrigada.
Abs,
Patrícia
Olá Paulo, no meu blog (com template desenvolvida pela “Crie Web”), o botão de “Curtir” artigos para o Facebook deixou de funcionar, e quando coloco os links diretamente no mural eles também não funcionam.
Este problema é geral ou só me está a acontecer comigo?
Obrigado!
O meu ta ok mas, quando vc roda a bolinha do mouse, ele não acompanha igual o seu D:
O meu é um plugin para WordPress. Para Blogger não vi um melhor. =/
então eu tentei aqui e não deu certo mas eu é um caso diferente uso wix.com para o meu site! e infelizmente nao deu certo >.< pq nao sei se os embeds valem de blogs para o site xD normalmente dá HTML IFRAME EMBED xD se poder me enviar nesses formatos eu agradeço!
Olá. No meu site só apareceu uma caixa branca sem aparecer a página e a opção curtir.
Muito bom Paulo…assim como todo o site…acompanho há tempos…sempre me ajudou muito.
Foi o jeito mais simples e prático que vi de colocar esse recurso no blog…obrigado!
Abraços!
Olá eu uso a plataforma blogger com visualização dinâmicas eu queria saber se você tem artigos destes tais, e no casso desta ae na visualização nas aceita o java script
se não tiver queria saber se vc poderia fazer alguns para mim ajudar obrigado
Olá!
Adorei o seu post.
Estou tentando fazer isso no meu blog, mas não acho a parte onde devo colocar o nome do meu blog. Poderia me ajudar?
Att,
Bee
Valeu, cara! Muito Obrigado! Fiz no blogger e deu certo.
Paulo eu pus tudo certinho no meu blogger e ,não apareceu o que aconteceu
Junior,
não apareceu nada? Fez cada passo?
Cara que legal este post ja coloquei no meu site. Parabéns
Muito bom. Muito obrigada. Deu certo e sem complicação. Abraços.
Oi Paulo fiz tudo direito mais a caixa de curtir só apareceu uma vez e pronto, o que ouve?? e parabéns pelo seu site é ótimo