Mostrar la fanbox de facebook en una lightbox al cargar la pagina con Jquery
Este Widget que les presento en el dia de hoy es muy útil para usarlo en Blogger,se muestra un cuadro emergente ( Popup ) con un fondo oscuro el cual este es obtenido con JQuery ,seguro han visto este efecto en imagenes en videos etc.. pero ahora lo que vamos a mostrar es la fanbox de facebook cada ves que un visitante entre al sitio esta le aparecera de primero, con un efecto muy bonito proponiendole seguirte en facebook al igual si no quieren tienen la opcion de cerrar.
Tenemos dos alternativas una si quieres que aparesca cada ves que carge la pagina o mediante las cookie esta lee la IP del visitante y solo le aparecera una sola ves.
Este widget es muy facíl de implementar en solo unos pasos ya esta listo no tenemos que tocar la plantilla para nada solo lo añadiremos a un gadget para eso nos vamos a blogger >>> Diseño >>> Añadir un gadget >>> y buscamos HTML/Javascript y ponemos el siguiente codigo :
<style>
div.fanbox {
background-color: #dcdcda;background-image: -moz-linear-gradient(#000, #dcdcda);background-image: -webkit-linear-gradient(#000, #dcdcda);background-image: -o-linear-gradient(#000, #dcdcda);background-image: linear-gradient(#000, #dcdcda);
-moz-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:5px 5px 8px #000;
-ms-filter:
"progidXImageTransform.Microsoft.Shadow(color=#000,direction=125,strength=5)";filter: progidXImageTransform.Microsoft.Shadow(color=#000,direction=125,strength=5);-webkit-box-shadow: 5px 5px 8px #000;
width:290px;
height:160px;
overflow:hidden;
}
div.fanbox iframe {margin:-1px}
#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:fixed;}
#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:url(http://4.bp.blogspot.com/-8n5B05PTdFc/T1eJ4l1t1jI/AAAAAAAABBQ/wjOQPxrTcsI/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-top:28px;}
#cboxTitle{position:absolute; top:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; top:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; top:0; left:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; top:0; left:27px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; top:0; right:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -25px 0; width:20px; height:20px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook fanbox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#fff;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #00008b;
font-size: 16px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #00000;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #000;
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.6.1/jquery.min.js'></script>
<script src="http://img89.xooimage.com/files/b/b/1/jquery.colorbox-min-381970d.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -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:"340px", inline:true, href:"#subscribe"});
}
});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:1px; background-color: #;
-moz-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:5px 5px 8px #000;
'>
/*-----------------------------------------------------------------------------------*/
/* Despues de estas lineas podrian poner un titulo con el codigo que les voy a dar
/*-----------------------------------------------------------------------------------*/
<center><div class='fanbox'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Ftube-trucos%2F161206907309924&width=300&height=180&colorscheme=dark&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:180px;" allowtransparency="true"></iframe></div></center></div></div>
El siguiente codigo es por si quieren añadirle un titulo donde les indique en el codigo anterior donde dice Te unes en Facebook lo pueden remplazar por lo que ustedes quieran eso es a gusto de cada persona todo va en la imaginacion .
<h4 class="box-title"><center>Te unes en Facebook</center></h4>
Lo que esta en color 000 es el color negro del fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.
lo que esta en color dcdcda es el color gris que esta tambien de fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.
Donde dice false lo pueden remplazar por true ,con false aparece siempre que carge la pagina con true solo una ves .
Donde dice pages%2Ftube-trucos%2F161206907309924 lo remplazan por el nombre de su pagina en facebook si todavia no tienen la url personalizada y tienen nombre y numeros lo copian desde donde dice page y las / la remplazan por %2F una ves hecho eso la colocan donde les dije en el codigo .
Hecho todo le dan a guardar al gadget y nos vamos a la pagina ya podran apreciar que al cargar les aparece este fabuloso widget.
Este Widget que les presento en el dia de hoy es muy útil para usarlo en Blogger,se muestra un cuadro emergente ( Popup ) con un fondo oscuro el cual este es obtenido con JQuery ,seguro han visto este efecto en imagenes en videos etc.. pero ahora lo que vamos a mostrar es la fanbox de facebook cada ves que un visitante entre al sitio esta le aparecera de primero, con un efecto muy bonito proponiendole seguirte en facebook al igual si no quieren tienen la opcion de cerrar.
Tenemos dos alternativas una si quieres que aparesca cada ves que carge la pagina o mediante las cookie esta lee la IP del visitante y solo le aparecera una sola ves.
Este widget es muy facíl de implementar en solo unos pasos ya esta listo no tenemos que tocar la plantilla para nada solo lo añadiremos a un gadget para eso nos vamos a blogger >>> Diseño >>> Añadir un gadget >>> y buscamos HTML/Javascript y ponemos el siguiente codigo :
<style>
div.fanbox {
background-color: #dcdcda;background-image: -moz-linear-gradient(#000, #dcdcda);background-image: -webkit-linear-gradient(#000, #dcdcda);background-image: -o-linear-gradient(#000, #dcdcda);background-image: linear-gradient(#000, #dcdcda);
-moz-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:5px 5px 8px #000;
-ms-filter:
"progidXImageTransform.Microsoft.Shadow(color=#000,direction=125,strength=5)";filter: progidXImageTransform.Microsoft.Shadow(color=#000,direction=125,strength=5);-webkit-box-shadow: 5px 5px 8px #000;
width:290px;
height:160px;
overflow:hidden;
}
div.fanbox iframe {margin:-1px}
#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:fixed;}
#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:url(http://4.bp.blogspot.com/-8n5B05PTdFc/T1eJ4l1t1jI/AAAAAAAABBQ/wjOQPxrTcsI/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-top:28px;}
#cboxTitle{position:absolute; top:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; top:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; top:0; left:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; top:0; left:27px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; top:0; right:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -25px 0; width:20px; height:20px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook fanbox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#fff;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #00008b;
font-size: 16px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #00000;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #000;
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.6.1/jquery.min.js'></script>
<script src="http://img89.xooimage.com/files/b/b/1/jquery.colorbox-min-381970d.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -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:"340px", inline:true, href:"#subscribe"});
}
});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:1px; background-color: #;
-moz-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:5px 5px 8px #000;
'>
/*-----------------------------------------------------------------------------------*/
/* Despues de estas lineas podrian poner un titulo con el codigo que les voy a dar
/*-----------------------------------------------------------------------------------*/
<center><div class='fanbox'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Ftube-trucos%2F161206907309924&width=300&height=180&colorscheme=dark&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:180px;" allowtransparency="true"></iframe></div></center></div></div>
El siguiente codigo es por si quieren añadirle un titulo donde les indique en el codigo anterior donde dice Te unes en Facebook lo pueden remplazar por lo que ustedes quieran eso es a gusto de cada persona todo va en la imaginacion .
<h4 class="box-title"><center>Te unes en Facebook</center></h4>
Lo que esta en color 000 es el color negro del fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.
lo que esta en color dcdcda es el color gris que esta tambien de fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.
Donde dice false lo pueden remplazar por true ,con false aparece siempre que carge la pagina con true solo una ves .
Donde dice pages%2Ftube-trucos%2F161206907309924 lo remplazan por el nombre de su pagina en facebook si todavia no tienen la url personalizada y tienen nombre y numeros lo copian desde donde dice page y las / la remplazan por %2F una ves hecho eso la colocan donde les dije en el codigo .
Hecho todo le dan a guardar al gadget y nos vamos a la pagina ya podran apreciar que al cargar les aparece este fabuloso widget.