Como Colocar um Popup Like Box do Facebook no Blogger

Like Box do Facebook em um popup estiloso para você ter em seu blog.

Tenha em seu blog agora mesmo este popup com a sua página do Facebook para que seus visitantes possam curti-la e assim divulgar mais ainda seu trabalho.

Em mais um tutorial, o blog ProDeveloper disponibiliza um popup com a opção de curtir sua página do Facebook. Em pequenos passos já estará funcionando perfeitamente em seu blog, a configuração é mínima, veja a seguir como proceder para colocá-lo em seu blogger.

OBS: Este popup aparecerá apenas uma vez para cada visitante que acessar seu blog, aparecendo novamente para o mesmo visitante só após ele limpar o cache de seu navegador.

Tutorial

1- Acesse seu blogger, no menu vá em "Layout".

2- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

3- Dentro do conteúdo do gadget adicione o código abaixo:

<br />
<style>
/*
ColorBox Core 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;}
/*
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCKt_KnZjKP_0o8dx6wwfs1i9sMiqkWkKp0rKKa4OkdhqtnXqCE6DMW4oGt26oEbTywMWKrSnvNrdi6MS1Re4rY2jO2pVx3MFhPU7ygxW__GvjH8FuAQHHRICeI5FPPyGcrPdEHcVPfx-/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MtOSnjWgnwUDiKBUcaC7zBRp-eP2vnPANqxRjOESadHszaiR63Rlk_2aS-QbxVXc0d1hQTLCYrh3jK23ZqB0Vu0aq5oZ6a96D1QfVHz9Yk-r05Wv6hKefHUghiy7UK8eT9ZSZKQZ7kwm/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCKt_KnZjKP_0o8dx6wwfs1i9sMiqkWkKp0rKKa4OkdhqtnXqCE6DMW4oGt26oEbTywMWKrSnvNrdi6MS1Re4rY2jO2pVx3MFhPU7ygxW__GvjH8FuAQHHRICeI5FPPyGcrPdEHcVPfx-/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCKt_KnZjKP_0o8dx6wwfs1i9sMiqkWkKp0rKKa4OkdhqtnXqCE6DMW4oGt26oEbTywMWKrSnvNrdi6MS1Re4rY2jO2pVx3MFhPU7ygxW__GvjH8FuAQHHRICeI5FPPyGcrPdEHcVPfx-/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MtOSnjWgnwUDiKBUcaC7zBRp-eP2vnPANqxRjOESadHszaiR63Rlk_2aS-QbxVXc0d1hQTLCYrh3jK23ZqB0Vu0aq5oZ6a96D1QfVHz9Yk-r05Wv6hKefHUghiy7UK8eT9ZSZKQZ7kwm/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCKt_KnZjKP_0o8dx6wwfs1i9sMiqkWkKp0rKKa4OkdhqtnXqCE6DMW4oGt26oEbTywMWKrSnvNrdi6MS1Re4rY2jO2pVx3MFhPU7ygxW__GvjH8FuAQHHRICeI5FPPyGcrPdEHcVPfx-/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCKt_KnZjKP_0o8dx6wwfs1i9sMiqkWkKp0rKKa4OkdhqtnXqCE6DMW4oGt26oEbTywMWKrSnvNrdi6MS1Re4rY2jO2pVx3MFhPU7ygxW__GvjH8FuAQHHRICeI5FPPyGcrPdEHcVPfx-/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCKt_KnZjKP_0o8dx6wwfs1i9sMiqkWkKp0rKKa4OkdhqtnXqCE6DMW4oGt26oEbTywMWKrSnvNrdi6MS1Re4rY2jO2pVx3MFhPU7ygxW__GvjH8FuAQHHRICeI5FPPyGcrPdEHcVPfx-/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRL4CdzJBzR7m09vmvGfICgb1idKeOEc9seO56euA9XIPJ7hF1MpyMAKLiqNG4beeBUiFd4CbYXxQgm-dyYV3OFgETex19vN2Rs3cf-jyw4TDnXnqpEM9oGGlZ3VcsBHN_gcw8A7wIS850/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPUwg9BCjaG2oehi4PoNgZQfyFhkbpOtjdSH0Q3ojepT_4sCHjQE3WucMyWLVu9ltDk14qrCDM9ljElvYdATCkKPV9RluTgzZxmfzOBXVwAYnNB8cRywa7bmkWTjuhCw51sfRVR9FZRxcR/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCKt_KnZjKP_0o8dx6wwfs1i9sMiqkWkKp0rKKa4OkdhqtnXqCE6DMW4oGt26oEbTywMWKrSnvNrdi6MS1Re4rY2jO2pVx3MFhPU7ygxW__GvjH8FuAQHHRICeI5FPPyGcrPdEHcVPfx-/s1600/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><br />
<br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><br />
<script src="http://dl.dropbox.com/u/103852546/popup/popup.js"></script><br />
<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><br />
<!-- This contains --><br />
<br />
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">
Receber todas as atualizações através do Facebook. Basta curtir nossa FanPage.<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%2FNOMEDAPAGINA&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><br />
</center>
</div>
</div>

Atenção para as partes destacadas

Em VERMELHO, substitua pelo nome de sua página no Facebook.

Em alguns casos as páginas do Facebook vem assim: 

EX: https://www.facebook.com/pages/NOMEDAPAGINA/123456789 , se for o seu caso use o ID como destacado em VERDE.

Em AZUL é a mensagem que aparece acima, substitua caso desejar.

4- Clique em "Salvar" e depois "Salvar Organização".

5- Veja o resultado em seu blog.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.