FanBox de Facebook Emergente y Desvaneciente

Anteriormente publique una Caja Popup de Facebook que puedes encontrar aquí . Esta vez vengo con algo igual en función pero diferente en estilo.

Muchos se quejan de estas ventanas Popup, porque molestan al lector. Sin embargo tanto esta como la que publique anteriormente pueden ser controladas por medio de las Cookies del navegador, lo que quiere decir, que solo sera mostrada según la frecuencia de días que se estipule en el script; con lo cual no resultara nada molesto para los visitantes, puesto que en varios días no se le mostrará de nuevo la ventana emergente.
A mi gusto, me parece mas atractiva esta Fanbox de Facebook. Por este tiempo, yo estoy utilizando esta caja emergente, sin embargo, como posiblemente la quite en algunos dias, te dejo una demostracion en un blog de pruebas.

Observa esta Fanbox en funcionamiento aquí

Ahora ve a Blogger.com - Diseño - Añadir un gadget - HTML/Jacascript y pega allí este código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<style>
#fanback{display:none;background:url(https://sites.google.com/site/terrenoblogger/imagenes/bg.png);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}#fan-exit{width:100%;height:100%}#fanbox{background:white;width:420px;height:270px;position:absolute;top:50%;left:50%;-webkit-box-shadow:inset 0 0 50px 0 #939393;-moz-box-shadow:inset 0 0 50px 0 #939393;box-shadow:inset 0 0 50px 0 #939393;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:-135px 0 0 -210px;}#fanclose{float:right;cursor:pointer;background:url(https://sites.google.com/site/terrenoblogger/imagenes/fanclose.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}.remove-borda{height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}
</style>
<script type="text/javascript">
jQuery.cookie=function(key,value,options){

if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);

if(value===null||value===undefined){options.expires=-1;}

if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);}

value=String(value);

return(document.cookie=[
encodeURIComponent(key),'=',
options.raw?value:encodeURIComponent(value),
options.expires?'; expires='+ options.expires.toUTCString():'',
options.path?'; path='+ options.path:'',
options.domain?'; domain='+ options.domain:'',
options.secure?'; secure':''].join(''));}

options=value||{};
var result,decode=options.raw?function(s){
return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
</script>

<script type="text/javascript">
jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium')})}
$.cookie('popup_user_login','yes',{path:'/',expires:3})});
</script>

<div id="fanback">
<div id="fan-exit"></div>
<div id="fanbox">
<div id="fanclose"></div>
<div class="remove-borda"></div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http://facebook.com/USUARIO-FACEBOOK&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false" style="border: none; height: 230px; margin-left: 8px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div>
</div>

Ahora en expires:3 colocarás el numero de dias que tardara en reaparecer la Popup de nuevo a un usuario. Por defecto esta en 3 dias.

En USUARIO-FACEBOOK escribes el nombre de usuario de tu pagina.

Si el usuario de tu pagina en facebook esta en este formato: https://www.facebook.com/pages/Terreno-Blogger/161470857350835.
Entonces lo que deberás reemplazar por USUARIO-FACEBOOK será solo el ID de tu pagina, es decir, en este caso: 161470857350835

El código resaltado en rojo es Jquery, si ya lo tienes en tu plantilla entonces omitelo.

Probé con varias versiones de Jquery y en todas funcionó, seguramente no tendrás conflictos a la hora de instalar este widget.

Con esto ya tienes instalada esta ventana emergente muy atractiva y nada molesta.

¿Tienes algo para decirme?

Imprimir artículo