Caja "me gusta" de facebook en forma de Pop Up con jQuery para blogger

Los que tenemos un blog y una página fans en facebook ponemos siempre nuestra caja "me gusta" en nuestra página gracias a los plugins que facebook nos provee. Pero siempre queremos algo más que una simple caja "me gusta", existen otros métodos en la que podemos personalizar un poquito más nuestra caja, quizá cambiarle de color, eliminar el logo, etc. Pero en esta ocasión, les traigo la caja "me gusta" de facebook en forma de pop up. Sí, esto quiere decir que al momento en que el lector entre a tu página, este verá la caja "me gusta" de tu página fan con un mensaje que tu puedes poner, animando al lector a pinchar ese "me gusta" y así incrementar los fans de tu página.

Este truco lo ví en mybloggertricks, y me pareció muy interesante, así que hoy me animo a compartir este truco con ustedes. Lo que más me gustó de este gadget es que este sólo aparece la primera que vez que el lector visite tu página, evitando así que se torne molestoso para nuestros lectores el tener que ver este gadget a cada rato.

VER DEMO


Agregarlo es muy sencillo y no tendrás que tocar tu plantilla en lo absoluto. 
Sigue los pasos:
1) Nos vamos a Blogger > Diseño > Elementos de la página:

2) Ahora añadimos un gadget y buscamos el que dice HTML/Javascript:

3) Ahora en el cuadro html, pegamos lo siguiente:

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPwJ_QTODOVPqrM_lfgg4e3Zc-YihHlkhPBaY0m29Umv2dcp3mmmZLIn1g6iC5Xi9EvjLev73vwbTceiiX9ELzF-yV-9O7Y0l1ADKEe9wM_7CAV8OGu9P7MXqDNl7KnDmWweJGYZrjOrlj/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsWG7XLPC1RY-EdJsAbC-VDVmZc5n3J23DIfymugzTcvhfNECHtYLkjJSBsU71Nfn6i38m1djTN5cY6Vx3Qv2prZzsFCO5mcAy86eXEe2uuyQupa3M4oAOLZX6slUdsr9XvHMJ3IktvMR/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPwJ_QTODOVPqrM_lfgg4e3Zc-YihHlkhPBaY0m29Umv2dcp3mmmZLIn1g6iC5Xi9EvjLev73vwbTceiiX9ELzF-yV-9O7Y0l1ADKEe9wM_7CAV8OGu9P7MXqDNl7KnDmWweJGYZrjOrlj/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPwJ_QTODOVPqrM_lfgg4e3Zc-YihHlkhPBaY0m29Umv2dcp3mmmZLIn1g6iC5Xi9EvjLev73vwbTceiiX9ELzF-yV-9O7Y0l1ADKEe9wM_7CAV8OGu9P7MXqDNl7KnDmWweJGYZrjOrlj/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsWG7XLPC1RY-EdJsAbC-VDVmZc5n3J23DIfymugzTcvhfNECHtYLkjJSBsU71Nfn6i38m1djTN5cY6Vx3Qv2prZzsFCO5mcAy86eXEe2uuyQupa3M4oAOLZX6slUdsr9XvHMJ3IktvMR/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPwJ_QTODOVPqrM_lfgg4e3Zc-YihHlkhPBaY0m29Umv2dcp3mmmZLIn1g6iC5Xi9EvjLev73vwbTceiiX9ELzF-yV-9O7Y0l1ADKEe9wM_7CAV8OGu9P7MXqDNl7KnDmWweJGYZrjOrlj/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPwJ_QTODOVPqrM_lfgg4e3Zc-YihHlkhPBaY0m29Umv2dcp3mmmZLIn1g6iC5Xi9EvjLev73vwbTceiiX9ELzF-yV-9O7Y0l1ADKEe9wM_7CAV8OGu9P7MXqDNl7KnDmWweJGYZrjOrlj/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPwJ_QTODOVPqrM_lfgg4e3Zc-YihHlkhPBaY0m29Umv2dcp3mmmZLIn1g6iC5Xi9EvjLev73vwbTceiiX9ELzF-yV-9O7Y0l1ADKEe9wM_7CAV8OGu9P7MXqDNl7KnDmWweJGYZrjOrlj/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/AVvXsEiy9FGifxKiaL7mSnBq5CWMTzyoU8NMEtrb9HXRsRkceaP6tiwimoUkIF-u3gmkr-9Fg9JW61A8Ymx-kQ0ufJAUtkA7pwquE77ztK7Ik5advtsHzbhbCisSKg8VkG8PpVvoFr5cyjRYRPFC/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FTHZiAk-rrhgA93ljIn861uWIoRjDv2C3sqpFyTqX0Wrfi2W4hbV83W3ig22i1dGtBCCC32YnXoZb5GYsiEKtW8v6NkM3v7f6hRMEjoPKYeaO2Gz-C65GYOaGunuM2Xe__ZwCQVSmue1/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/AVvXsEiPwJ_QTODOVPqrM_lfgg4e3Zc-YihHlkhPBaY0m29Umv2dcp3mmmZLIn1g6iC5Xi9EvjLev73vwbTceiiX9ELzF-yV-9O7Y0l1ADKEe9wM_7CAV8OGu9P7MXqDNl7KnDmWweJGYZrjOrlj/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>

<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">Recibe todas nuestras próximas actualizaciones a través de Facebook. Sólo presiona el botón Me gusta abajo<center><p style="line-height:3px;" >▼</p></center></h3> 
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Qui%C3%A9n-me-visita-en-facebook/152132771515923&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:258px;" allowtransparency="true"></iframe>

</center>
</div>
</div>

4) Podemos ahora realizar los siguientes cambios en el código de arriba:
> Puedes cambiar el mensaje que por defecto está en la caja. El mensaje está de color azul y puedes reemplazarlo por el mensaje que desees.
> Debes reemplazar lo que está de color rojo por la URL de tu página de fan de facebook.

> Lo que está de color verde es el script jQuery de las librerías API de Google. En caso de que ya lo tengas instalado con otro plugin de jQuery, entonces no lo agregues nuevamente.



5) Hecho los cambios respectivos, guarda los cambios de tu gadget y eso sería todo. Imprimir artículo