Popup: caja de me gusta (Facebook) para tu web o blog

05.12.2015 17:49

Me Gusta - Popup Widget

Seguro navegando por internet has visto en diferentes blogs que al cargar uno de sus artículos aparece el Fanbox de Facebook en una ventana emergente, lo cual casi te obliga mentalmente a darle clic al botón "Me Gusta". Este tipo de estrategias funcionan demasiado bien, es por ello que este widget se ve muy a menudo, incluso en los blogs mas famosos.

A continuación los pasos a seguir para ponerlo en cualquier página web.

Gracias al blog de un chico llamado James Morgan (Jasper Roberts) podemos obtener este increíble widget. La verdad es algo que le serviría a mas de uno y por ello quiero compartirlo.

El Like Box esta programado para mostrarse 10 segundos después de haber terminado la carga de la página por lo que no causara ningún problema con la experiencia de nuestros visitante. De igual forma cuenta con un gran botón (X) para poder cerrar el pop-up.

Bien, el widget se inserta mediante un código HTML, aquí esta :)

<!-- Facebook Popup Widget START --><!-- Brought to you by www.JasperRoberts.com - www.TheBlogWidgets.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#JasperRoberts {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-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: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.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;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
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() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
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(10000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Blog</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.JasperRoberts.com - www.TheBlogWidgets.com -->

 

Personalizar

Introduce el nombre de tu Página de Facebook.
Busca la linea (que esta de verde en el código): http://www.facebook.com/theblogwidgets y sustitúyela por lo que aparece al final de la dirección de tu fan page (Solo lo que esta después del http://www.facebook.com/.

Ejemplo:

http://www.facebook.com/todopatuweb

 

Puedes cambiar los 10 Segundos que vienen por defecto, el widget aparece 10 segundos después de que la página termine de cargar. Busca la siguiente linea. cambia el número 10000  a un número mayor o menor. 1 segundo = 1000. 10 segundos = 10000.

.delay(10000)

 

De forma predeterminada, el widget (pop-up) sólo se muestra la primera vez que el usuario visita la página. Si deseas que el cuadro de Facebook se muestre cada vez que se carga la página, a continuación, busca y elimina esta línea de código:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

 

OJO:

Por defecto, el widget sólo aparecerá una vez cada 30 días. Puede que tengas que suprimir las cookies si deseas volver a verlo.

Espero que te sea de mucha utilidad, si tienes problemas déjame un comentario para poder ayudarte. No olvides compartir el post en con tus amigos:)

 

 

HTML Comment Box is loading comments...
Powered by Jasper Roberts - Blog

Suscribete al blog

    

Todos los trucos y consejos ahora de manera facil

Solo pon tu e-mail: