Início | Códigos Blog

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger Facebook WordPress

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:

caixa curtir flutuante no Blogger

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&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: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)

código inserido no blogger

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&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: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)

código inserido no wordpress

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.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

45 Comentários

  1. Romulo Augusto disse:
    26 de abril de 2013 às 11:36

    Muito legal e simples de fazer. Acabei de colocar na minha página http://www.inglessemmisterio.com/
    Obrigado mais uma vez.

    Responder
  2. Patricia disse:
    26 de abril de 2013 às 11:46

    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…..!

    Responder
  3. Patricia disse:
    27 de abril de 2013 às 10:38

    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!

    Responder
  4. JPFWEB disse:
    27 de abril de 2013 às 20:15

    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?

    Responder
  5. Ivair Claudio Ferrari disse:
    28 de abril de 2013 às 8:17

    Excelente e simples de fazer.
    Coloquei na minha página e funcionou perfeitamente.
    Obrigadão !!!

    Responder
  6. Patricia disse:
    29 de abril de 2013 às 1:43

    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!

    Responder
  7. Patricia disse:
    29 de abril de 2013 às 13:40

    Boa tarde Paulo.

    Já esta lá desde ontem. Podes acessar a hora que quiseres.
    Beijos….!

    Responder
  8. Wallen disse:
    30 de abril de 2013 às 2:07

    No meu também não deu certo ‘-‘ :/

    Responder
  9. Sara disse:
    2 de maio de 2013 às 11:35

    Bom dia Paulo!

    Estou com o mesmo problema da Patricia, porém já exclui até o cache para visualizar e nada…

    Responder
  10. Alex disse:
    2 de maio de 2013 às 19:56

    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.

    Responder
  11. Andre Almeida disse:
    9 de maio de 2013 às 8:22

    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

    Responder
  12. Pablo Alves disse:
    11 de maio de 2013 às 22:07

    Se o nome do meu facebook for o nome da página + o código.

    COMO EU FAÇO?

    Responder
  13. The Fimes HD disse:
    15 de maio de 2013 às 13:02

    BRIGADÃOOOO Gente Ajudou Bastante Mesmo Vlw.

    Responder
  14. Angel Poubel disse:
    29 de maio de 2013 às 0:22

    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

    Responder
  15. Patricia disse:
    8 de julho de 2013 às 11:40

    Olá,

    A diga me ajudou muito.

    Obrigada.

    Abs,

    Patrícia

    Responder
  16. Dav7 disse:
    10 de julho de 2013 às 9:18

    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!

    Responder
  17. Dhean disse:
    25 de julho de 2013 às 17:33

    O meu ta ok mas, quando vc roda a bolinha do mouse, ele não acompanha igual o seu D:

    Responder
  18. Sakura Oliveira disse:
    6 de agosto de 2013 às 0:40

    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!

    Responder
  19. edivan disse:
    26 de agosto de 2013 às 12:16

    Olá. No meu site só apareceu uma caixa branca sem aparecer a página e a opção curtir.

    Responder
  20. Sérgio disse:
    8 de setembro de 2013 às 3:07

    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!

    Responder
  21. julio disse:
    13 de setembro de 2013 às 15:47

    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

    Responder
  22. Ane Bee disse:
    8 de novembro de 2013 às 10:21

    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

    Responder
  23. Teruel disse:
    2 de janeiro de 2014 às 17:16

    Valeu, cara! Muito Obrigado! Fiz no blogger e deu certo.

    Responder
  24. Junior Miranda disse:
    21 de janeiro de 2014 às 17:08

    Paulo eu pus tudo certinho no meu blogger e ,não apareceu o que aconteceu

    Responder
  25. Pietro Belmonte disse:
    18 de abril de 2014 às 23:27

    Cara que legal este post ja coloquei no meu site. Parabéns

    Responder
  26. Maria Helena disse:
    2 de dezembro de 2014 às 15:50

    Muito bom. Muito obrigada. Deu certo e sem complicação. Abraços.

    Responder
  27. José André disse:
    11 de junho de 2015 às 17:16

    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

    Responder
Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.