Hoy te traigo el tutorial blogger más facil del mundo para poner un pop up de tu pagina de facebook en blogger, o lo que es lo mismo que cuando alguien entre en tu blog le salga una ventanita para que le de a me gusta a tu pagina de fans.
Sin más rodeos que el tiempo es oro, es tan facil como ir a blogger/ diseño/añadir widget/ código html y pegamos:
<!-- Caja Me Gusta popup -->
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbOKIJG5OcZyXvbuOMT6yCQoZzNNZgo4R8eSL3OcUuDCUHKnS51BVBAKc1DJzBkcyyNKac_IYFfdZf0yMNknfoJme4q7c188xSVMLvqS6uHC5BHqat3VqaGcQGq5tbcP1Kfl21i7MWduOV/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=https://www.facebook.com/pages/Eresblogger/861355577212270
&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 -->
Os he puesto en rojo lo que podeis modificar:
1. Delay 2000 significa que por defecto la ventana si no la cierran o no le dan a me gusta permanecerá abierta por 20 segundos, si lo queréis modificar por ejemplo para que tarde solo 10 segundos pues ponéis 1000.
2. $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); aquà tenemos varias opciones, eliminarlo y que solo le salga al usuario la primera vez que entra en nuestro blog.
Dejarlo como esta y les saldrá cada 7 dÃas en el caso de que no le den a me gusta.
Modificar el 7 por más o menos dÃas, yo no os recomiendo por menos dÃas no lo hagáis, ya que la gente se cansa un poquito bastante.
3. Lo tercero que tenéis que modificar es la url de facebook, simplemente cambiáis la mÃa por la vuestra y listo.
Y a conseguir fans de facebook, luego tendremos que mantenerlos que eso ya es una tarea más difÃcil pero lo veremos en otro post.
¿Que te parece este tutorial blogger para poner facebook pop up en blogger?
Muy útil, gracias por tus recomendaciones finales.
ResponderEliminarBss
MuchÃsimas gracias Melyssa por compartir, me ha encantado y ya lo he puesto en práctica. Un beso guapa.
ResponderEliminarMuchas gracias a ti por compartir Beliluna.
EliminarMuchas gracias por la info!
ResponderEliminarYo también lo he aplicado y ahora mismo comparto la entrada en mis grupos de bloggers.
Un beso.
Mil gracias!
EliminarMuchas gracias!!!
ResponderEliminarUn beso
A ti, besos
EliminarMe parece super útil! aunque con el que aparece en tu blog tengo un problema, al momento de marcar "me gusta", se desmarca, con lo cual, no funciona como es debido. Échale un vistazo!
ResponderEliminarPuede ser porque ya me seguias guapa, besos
EliminarNo, no te seguÃa, no me dejaba seguirte con el botón ese.
EliminarChapo cielo como siempre. Acabo de hacerlo siguiendo tus indicaciones. Uno más de tus tutoriales la mar de útil.
ResponderEliminarMuchas gracias Airun
EliminarHola! Justo estaba leyendo el tÃtulo del post y me ha saltado lo del Facebook (y ya le he dado a me gusta, por supuesto!) Estoy echando un vistazo al blog y me encanta! Los tutoriales y consejos blogger son mi debilidad, asà que por aquà me quedo!
ResponderEliminarUn besote!
Ya mismo lo pongo en practica y comparto. Mil gracias.
ResponderEliminarSuper fácil, ahora lo pongo ;) Muchas gracias!
ResponderEliminarBesitos!
Me parece una idea genial. Muuuuchas gracias, guapa.
ResponderEliminaren mi blog no funciona, no sale la ventana :(
ResponderEliminarHola, me gustarÃa saber como lo dejo fijo en una partesita de mi blog?
ResponderEliminar