Caja Me gusta en Facebook en Popup o ventana emergente

Si buscas ganar más "Me gusta" en Facebook esta es la mejor manera, está comprobado que si el contenido gusta y aparece esta ventana tienes el "Me gusta" asegurado!

Siempre me gusta agregar esta caja en las webs que trabajo desde Facebook por la simple razón de que funciona demasiado bien, es tan fácil como buscar un público y la caja mágica hace el resto, es el perfecto complemento para conseguir una fanpage de éxito.

Cabe destacar que esta caja de "Me gusta" en popup funciona en cualquier plataforma, al estar diseñada en html y css funcionará tanto en Blogger como en Wordpress u otra cms cualquiera. Otros aspectos a destacar es que se pueden configurar cosas como el tiempo que tarda en aparecez desde que el visitante entra a la página, si solo puede aparecer una vez por visitante o si solo aparece en el home.

El código debe introducirse en la etiqueta head, a poder ser antes de cerrarla(</head>). Si usas Wordpress o Blogger puedes usar un widget de texto html para agregar la caja de "Me gusta". Hablando ya de configuraciones a continuación te dejo los detalles .

Incluir la url de tu página de Facebook

Busca "facebook.com/angelosadacom" y cambia "angelosadacom" por el identificador de tu página. También puedes cambiar la url directamente.

Cambiar el tiempo previo a aparecer

Por defecto la caja tarda 20 segundos, si quieres editarlo simplemente busca ".delay(20000)" y cámbialo siguiendo el patrón de que 1 segundo son 1000. Ejemplo: .delay(3000) = 3 segundos

Aparecer cada vez que se recarga la página

Si no eliminas un trozo de código que te diré ahora la caja solo aparecerá una vez por visitante, yo recomiendo dejarlo así ya que si no ha dado like la primera vez no lo hará a la quinta. El código a eliminar es el siguiente:

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

Bueno, sin más rollos aquí está el código(lo que está en rojo es lo que puedes modificar):

<!-- Caja Me Gusta popup --><!-- Conseguido en www.bloggeroficio.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><!-- Conseguido en www.bloggeroficio.com -->
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKGPZN1BGkAQXFStQLCtLrfR-v3lNYMuj4N8wIJMc1SAWCLOi_KwvVD_NMoNXQwuB1ZS3_dZMabkYKIb2gs0O-7YOPzuAR5WG3vYOy6xVdtO_meFxjKFiZ6CXYKn_IZnK5DnXacSY7vV70/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(''));
}
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><!-- Conseguido en www.bloggeroficio.com -->
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(20000).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/angelosadacom&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 rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts Consulting</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Widget</a></span></center>
</div>
</div>
<!-- Fin Caja Me Gusta popup --><!-- Conseguido en www.bloggeroficio.com -->

Una vez incluyas el código en tu blog podrás ver una hermosa caja de "Me gusta" en Facebook funcional y que seguro te ayudará mucho.


Valoración

4.90/5 – 3432BloggerOficio