Tutorial: Como adicionar uma caixa pop-up de curtir do Facebook em um blog no Blogger com JQuery

JuanDRomero · 10/02/2012

Olá a todos,

Primeiro esclareço que isto não é algo inventado feito por mim, foi doado por um dos meus colaboradores para a minha página e como resultou super simples de fazer, além de que sempre quis ter o Pop Up de Curtir para o Facebook, achei genial compartilhar com vocês. Sempre procurei o Pop up para Facebook, mas todos os métodos que existiam eram em PHP e como o Blogger não permite isso, então era ruim... agora resulta que sim, é possível fazer com JQuery.

Adiciono isto como tutorial porque sei que é muito solicitado pelos proprietários de blogs no Blogger.

Caixa Pop Up "curtir" do Facebook para Blogger

PÁGINA DE TESTE

Passos para adicionar:

Vamos em: Design / Elementos da página / HTML/Javascript:

HTML:

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#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(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn...background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-...00/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(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/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;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#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='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/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:"400px", 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;'>
<h3 class="box-title">Mantente en contacto con nosotros a través de Facebook. Sólo presiona el botón Me gusta <center><p style="line-height:3px;" >▼</p></center></h3> 
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FEstatriste%2F186903574749125%3F&amp;width=300&amp;colorscheme=light&amp;show_face s=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>

VOCÊS DEVEM ALTERAR http%3A%2F%2Fwww.facebook.com%2Fpages%2FEstatriste%2F186903574749125%3F pelo link da sua FANS PAGE

Bom, espero que seja útil para vocês. Qualquer coisa não hesitem em comentar e com muito gosto os ajudarei.

Abraços

HuGo · 10/02/2012

Bom trabalho, uma dúvida, esta caixa continua aparecendo nas próximas visitas do usuário ou apenas uma vez? Abraços.

JuanDRomero · 10/02/2012

HuGo disse:
Bom trabalho, uma dúvida, essa caixa continua aparecendo nas próximas visitas do usuário ou apenas uma vez? Abraços.

Boa pergunta. Para mim aparece apenas na primeira vez... para perceber se funcionava, eu abria o navegador de forma anônima (se você usa Chrome é control+shift+N) e assim soube que estava ativo.

HuGo · 10/02/2012

Já revisei o código e ele trabalha com cookies, quase no final é possível modificar a duração disso, abraços.

Carlos Arreola · 10/02/2012

Adicionado à lista de tutoriais de blogger.

tzogroup · 10/02/2012

funciona no wordpress? dá para colocar? onde se colocaria e como, abraços?

JuanDRomero · 10/02/2012

tzogroup disse:
funciona no wordpress? dá para colocar? onde se colocaria e como, abraços?

Com Wordpress é como se você adicionasse um elemento, mas aqui no ForoBeta tem um tutorial que vai te servir

http://forobeta.com/tutoriales/81201-configurar-plugin-wp-super-popup.html

frN13 · 10/02/2012

isso é algo muito chato.

JuanDRomero · 10/02/2012

frN13 disse:
isso é algo muito chato.

Talvez para alguns pareça chato se visitarem muitas páginas com esse script, o bom é que só aparece uma vez já que trabalha com cookies para que, quando o usuário voltar a visitar a página, não apareça. O resto, tudo normal.

Eu recomendo como um método muito bom para aumentar os seguidores em uma fan page, sobre as visitas posso comentar que não diminuem por causa disso. Você ganha seguidores reais.

Jose Canul · 10/02/2012

Obrigado, vou testar por 2 dias para ver se resulta.....

VaMpE · 10/02/2012

Bom tutorial 😀 Agradeço a contribuição :d :encouragement:

JoseTensei · 10/02/2012

UAU excelente amigo, obrigado, me ajudou muito. Uma dúvida, pode me explicar como fazer isso do tempo em que tem que aparecer??? :encouragement:

LuisMorales · 10/02/2012

vou testar para ver como funciona!

Gaberniqo · 10/02/2012

Me diga, ali mesmo posso colocar um adsense na parte de baixo?
ou um smowtion?

esejoker468 · 10/02/2012

Gaberniqo disse:
Me diga, ali mesmo posso colocar um adsense na parte de baixo?
ou um smowtion?

isso é ilegal de acordo com as políticas do Adsense. Não faça isso, ou pelo menos não divulgue.

dendurweb · 10/02/2012

Boa contribuição amigo, obrigado.

JuanDRomero · 11/02/2012

Gaberniqo disse:
Me diga, ali mesmo posso colocar um adsense na parte de baixo?
ou um smowtion?

Com adsense é ilegal, com smowtion eu já vi e não ouvi falar do primeiro que teve problema com isso.

roning · 12/02/2012

às vezes essa janela chega a ser muito chata e os usuários, como veem que aparece esse tipo de janela, acham que são vírus e não voltam mais à sua página. Mas agradeço :encouragement:

JuanDRomero · 13/02/2012

roning disse:
às vezes essa janela chega a ser muito chata e os usuários, como veem que aparece esse tipo de janela, acham que são vírus e não voltam mais à sua página. Mas agradeço :encouragement:

Se é um usuário frequente do seu site, o script só aparecerá uma única vez já que trabalha com cookies... se é novo, você tem a oportunidade de que ele se afilie à sua fan page e seja seguidor da página 😉

HGCM · 15/02/2012

Muito obrigado pela contribuição, fazia tempo que procurava algo assim para o meu blog. 🙂

Tutorial: Como adicionar uma caixa pop-up de curtir do Facebook em um blog no Blogger com JQuery

JuanDRomero

HuGo

JuanDRomero

HuGo

Carlos Arreola

tzogroup

JuanDRomero

frN13

JuanDRomero

Jose Canul

VaMpE

JoseTensei

LuisMorales

Gaberniqo

esejoker468

dendurweb

JuanDRomero

roning

JuanDRomero

HGCM

Tópicos similares