A lo largo de los años que llevo publicando en Mil Trucos Blogger he publicado varios fanbox de Facebook tanto normales como aquellos que se abren en forma de PopUp, como es el caso del truco que voy a publicar en el que veremos como añadir un fanbox de facebook en un Popup (versión actualizada al 2016).
Fanbox de Facebook PopUp versión 2016 ..
Vista Previa del Truco
Para añadir este truco a tu blog ve a Plantilla, Editar HTML y justo antes de ]]></b:skin> añade lo siguiente:
.popup {
background-color: #ffffff;
color: #888888;
height: 285px;
padding: 20px;
position: fixed;
right: 30%;
top: 25%;
width: 340px;
z-index: 101;
-moz-box-shadow: 0px 0px 10px 1px #888888;
-webkit-box-shadow: 0px 0px 10px 1px #888888;
box-shadow: 0px 0px 10px 1px #888888;
border-radius: 10px;
-moz-border-radius: 10px;
}
.overlay {
background: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
opacity:0.5;
}
a.close {
background: url("http://i.imgur.com/ZSlkx6J.png") repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 32px;
left: 32px;
position: relative;
top: -33px;
width: 32px;
}
#backpop{background-color: rgba(51, 51, 51, 0.81);width: 100%;height: 100%;z-index: 999;position: fixed;}
Ahora antes de </head> añade lo siguiente:
<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#popup').css('display','block');
$('#popup').animate({'left':'30%'},500);
});
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#overlay').fadeOut('fast');
});
}
</script>
<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#backpop').css('display','block');
$('#backpop').animate({'left':'30%'},500);
});
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#backpop').fadeOut('fast');
});
}
</script>
Por último busca la etiqueta <body> y pega arriba de ella lo siguiente:
<div id="backpop">
<div id="popup" class="popup">
<a onclick="closeDialog('popup');" class="close"></a>
<div>
<div style="font-size: 14px;color: #333;line-height: 1.8em;text-transform: uppercase;text-align: center;font-weight: bold;">Apoyanos con un Like! es GRATIS! :D</div>
AQUI CODIGO DE TU FANBOX
</div>
</div>
</div>
Para obtener el código del fanbox debes dirigirte al Plugin de Páginas de Facebook (recuerda que en este paso solo debes pegar la segunda parte del código que te da Facebook, la primera la puedes pegar en un gadget HTML/JavaScript).
Ya solo queda guardar los cambios y disfrutar de este genial truco.
2 comentarios
Feliziano23 · mayo 20, 2016 a las 9:42 pm
Gracias por compartir….me gustaría saber si esa ventana emergente se puede colocar que no ocupe la pantalla completa.
Juvinao · mayo 20, 2016 a las 9:46 pm
Hola Feliziano, la ventana emergente no ocupa toda la ventana completa, de hecho el tamaño del cuadro es de 285×340 px.
Saludos 😉