De nuevo estamos aquí, escribiendo sobre un nuevo artilugio que puede ser de interés para muchos usuarios que se adentren en este blog, para buscar recursos de distinta tipología e índole. Hoy os traigo una caja emergente de Facebook, o ventana Pop-Up, que surge de la nada, cuando ingresamos en la página, dónde tenemos insertado este gadget social, y sirve para que tus lectores o queridos usuarios, se hagan fácilmente con un clic, fan de tu página en Facebook. Así de fácil y así de sencillo, básicamente sirve para eso, para obtener más fans, para que sigan tu página web o blog, en la red social de moda e intrusiva de Facebook.
Para muchos lectores, cabe decir, que puede ser muy molesto añadir está caja emergente de fans de Facebook, ya que surge sin previo aviso, y en medio de la página, al ingresar en dicha página, resulta algo molesto, y fastidioso, ya que simula o parece, que si quieres leer los escritos o lo que sea en el contenido de la página, tengas que hacerte fan, obligatoriamente o forzosamente en la página web o blog, en la que quiera adentrarse el cliente.
Pero hay un pero, en está ocasión, pueden ser controladas por medio de los Cookies del navegador correspondiente, lo que quiere decir, que sólo será mostrada según la frecuencia de días que éste estipulado en el script, que veréis más adelante; con lo cual, no resultará tan fatigoso para tus visitantes, puesto que en varios días, no se le mostrará de nuevo a un usuario la ventana emergente o Pop-Up. Es una ventana dichosa, para algunos. También el gadget, tiene un icono de cierre, para cerrar rápidamente la ventana, si no te interesa, o ya estás suscrito. Bueno, después de algunas palabras escritas, vamos con el código de inserción, qué para Blogger será de la siguiente forma o de la distinta manera, que verán ahora:
Demo ventana!
- Ir a Blogger
- Después a Diseño
- Añadir un gadget
- Y ahora ir a HTML/Javascript
- Y por último copiar y pegar el siguinte código:
- Si ya tienes instalado jQuery, no lo vuelvas a insertar:
<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&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false" style="border: none; height: 230px; margin-left: 8px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div>
</div>
Algunas configuraciones a tener en cuenta
- Busca en el anterior código expires:3 ahí podrás colocar el numero de días que tardará en reaparecer de nuevo la ventana Pop-up a un usuario. Por defecto está en 3 días.
- Busca igualmente en el anterior código, esto: USUARIO-FACEBOOK y remplaza y escribe el nombre de usuario de tu página de Facebook, o también la ID (identificación), que es una numeración que está al final de cada URL de cada cuenta de fans en Facebook, dependiendo del formato que tengas.
- Si tuvieses jQuery implantado en tu plantilla no lo vuelvas a instalar, es la primera línea de código. Si no te funciona el widget, prueba con otras versiones de jQuery, remplazando la primera línea de código igualmente.