Fanbox para Blogger

En esta entrada les enseñaré a poner un fanbox de Facebook, que sirve para que los usuarios al ingresar a nuestro blog les aparezca el fanbox y así vean que el Blog tiene una fanpage, y así más posibilidades de que le den like, en este fanbox usaremos javascript (jQuery), CSS y obvio HTML, ya saben para que, el HTML y CSS para la estructura y el diseño, y el Javascript tendrá dos funciones, una es para poner el botón cerrar, y la otra es para las cookies, más adelante hablaré para que sirve.

Demo en esta misma entrada, si ya lo ocultaste vuelve a mostrarlo, Click aquí

Y así empezamos con el tutorial 😀

Primero y como siempre nos vamos a ir a Nuestro blog -> Plantilla -> Editar HTML, una vez ahí vamos a abrir el buscador, esto lo hacemos presionando CTRL + F y enseguida buscamos ]]></b:skin> y justo arriba de esa línea agregamos los siguientes estilos:

#fanbox {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .7);
z-index: 9999;
display: none;
}
#fanbox .botoncerrar {
position: absolute;
right: -10px;
top: -10px;
cursor: pointer;
z-index: 9999;
}
#fanbox .contenido {
background: #FFF;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin: -153px 0 0 -250px;
border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 3px 5px 9px #333;
-o-box-shadow: 3px 5px 9px #333;
-ms-box-shadow: 3px 5px 9px #333;
-moz-box-shadow: 3px 5px 9px #333;
-webkit-box-shadow: 3px 5px 9px #333;
}
#fanbox .contenido h3 {
display: block;
background: #3b5998;
color: #FFF;
font-family: sans-serif;
padding: 12px 10px 11px 10px;
margin: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
}

Y listo, ya tendremos los estilos, ahora lo que vamos a hacer es agregar el javascript, que es necesario para poder cerrar el fanbox y también para usar las cookies, ¿Para que usamos la cookie? bueno, es fácil la cookie la vamos a usar para no mostrar siempre el fanbox, osea que cuando se presione el botón de cerrar vamos a crear la cookie, y cuando la cookie exista no lo mostraos, pero cuando no exista si lo vamos a mostrar, y para eso eso, espero que me hayan entendido 😀
Bueno, ahora si agregar el javascript, para esto buscamos </body> y justo arriba agregamos:
Y listo, ya tenemos también el javascript xD, ya arriba expliqué que es lo que hace.

<script type=”text/javascript”>
$(document).ready(function() {
var cookie = document.cookie.indexOf(‘fanbox’);
if (cookie != -1) {
return;
} else {
$(‘#fanbox’).css(‘display’,’block’);
}
$(‘.botoncerrar’).click(function() {
$(‘#fanbox’).fadeOut();
document.cookie = ‘fanbox=desactivado';
});
});
</script>

Y por último vamos a agregar el HTML, abajo del código javascript que pusimos lo vamos a poner, es el siguiente código:

<div id=”fanbox”>
<div class=”contenido”>
<img class=”botoncerrar” alt=”Cerrar” src=”//2.bp.blogspot.com/-CsyU7v9PcNI/VLS_0bf60II/AAAAAAAACNU/da2Ss7WSYW4/s1600/close.png” title=”Cerrar” onclick=”$(‘#fanbox’).fadeOut()” />
<h3>Únete a la página de Facebook</h3>
<iframe src=”//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:500px; height:258px;” allowTransparency=”true”></iframe>
</div>
</div>
<b:if cond=”data:blog.isMobile”>
<style type=”text/css”>
#fanbox {
display: none !important;
}
</style>
</b:if>

Y listo 😀 ahora si ya tenemos todo, para agregar nuestra fanpage solo editamos FacebookDevelopers y en vez de eso ponemos nuestra fanpage, ejemplo, si mi página es https://www.facebook.com/ayudarbloggers lo que tendría que agregar es solo ayudarbloggers.
Y eso es todo 😀 espero que les guste y que les haya servido.

Cerrar

Únete a la página de Facebook