Popup para compartir tu facebook para tu página web

Aquí os traemos una manera fantástica de aumentar los seguidores y los "me gusta" de facebook para su blog o página Web. Agrega este atractivo widget a tu página web y aparecerá un cuadro emergente de facebook con el efecto lightbox cuando un usuario visite tu página. El widget de Facebook aparecerá en tu página unos 10 segundos después de que la página se cargue (pero se puede personalizar). Esta es una manera infalible de aumentar dramáticamente los "me gusta" en tu diseño de página web.

Añadir Widget a tu página web

Agregua el código siguiente en cualquier parte de la sección body de tu plantilla. Para los temas de WordPress, las plantillas Weebly y Tumblr, tendrás que copiar y pegar manualmente el script en tu plantilla.

<!-- 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/cerotec&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="https://www.cerotec.net">Diseño</a></span></center>
</div>
</div>

¿Cómo personalizarlo?

¿Dónde encontrar el código?
Si ha instalado el widget haciendo clic en "Añadir a Blogger" tendrá que localizar el código para realizar personalizaciones. Para encontrar el html vaya al tablero del blogger> Layout. Haga clic en "editar" en el gadget "HTML / Javascript".

Insertar tu nombre de usuario de Facebook
Búsca http://www.facebook.com/cerotec y reemplázalo por la dirección URL de tu facebook.

Cambiar los 10 segundos de espera
De forma predeterminada, el widget aparece 10 segundos después de que la página termine de cargarse. Busque el código siguiente y cambie el número 20000 a un número mayor o menor.
1 segundo = 1000. 10 segundos = 10000. 60 segundos = 60000.

.delay(10000)

Popup cada vez que se cargue la página 
De forma predeterminada, el widget para conseguir seguidores en Facebook sólo aparece la primera vez que el usuario visita tu página. Si deseas que el cuadro de facebook aparezca cada vez que se cargue la página, elimina esta línea de código:

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

Mostrar solo cuando visitan la página principal
Puedes hacerlo rodeando el código del widget con las siguientes etiquetas condicionales. Vé a Plantilla > Editar HTML. Ahora busqua la etiqueta </ body>. Coloca el widget emergente de Facebook justo encima de esta etiqueta "body". Asegúrate de incluir las etiquetas condicionales a continuación.

<b:if cond='data:page.type == "index"'>REPLACE-WITH-FACEBOOK WIDGET-CODE-HERE </b:if>

¿Tienes problemas para ver el widget de Facebook?

De forma predeterminada, este widget de popup de facebook se muestra sólo una vez cada 30 días. Es posible que deba eliminar las cookies y eliminar la caché del navegador si deseas volver a verlo. O revisa arriva la sección "Cómo personalizar"  para mostrar el widget cada vez que un usuario visita tu página web.

Si sigues teniendo problemas con el widget emergente, deja un comentario a continuación. ¡Estaremos encantados de ayudarte!