Caja "Me gusta" de Facebook, Pop Up (Emergente)


Ventana Pop up que contiene el botón Me Gusta de tu pagina de Facebook. Una tecnica que es usada por muchos para conseguir mas fans, y de esta manera llegar a mas personas a traves de Facebook.  invitando a hacer click en "Me Gusta" para ver el blog.

Muchos se quejan de estas ventanas Pop up, porque molestan al lector. Sin embargo tanto esta como 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. 

Agregar PopUp a Blogger:

1.Ahora vamos Blogger Diseño.  
2.Añadir un gadget
3.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/BLUEEXTREMER/283106831808288.
Entonces lo que deberás reemplazar por USUARIO-FACEBOOK será solo el ID de tu pagina, es decir, en este caso: 283106831808288

El código resaltado en azul 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.


No hay comentarios :

Publicar un comentario

Entradas populares