Como poner pop up de una pagina de facebook en blogger

¡Hola blogger!
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:


Como poner pop up de una pagina de facebook en blogger




<!-- 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?

melyssa

18 comentarios:

  1. Muy útil, gracias por tus recomendaciones finales.
    Bss

    ResponderEliminar
  2. Muchísimas gracias Melyssa por compartir, me ha encantado y ya lo he puesto en práctica. Un beso guapa.

    ResponderEliminar
  3. Muchas gracias por la info!
    Yo también lo he aplicado y ahora mismo comparto la entrada en mis grupos de bloggers.
    Un beso.

    ResponderEliminar
  4. Me 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!

    ResponderEliminar
    Respuestas
    1. Puede ser porque ya me seguias guapa, besos

      Eliminar
    2. No, no te seguía, no me dejaba seguirte con el botón ese.

      Eliminar
  5. Chapo cielo como siempre. Acabo de hacerlo siguiendo tus indicaciones. Uno más de tus tutoriales la mar de útil.

    ResponderEliminar
  6. Hola! 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!

    Un besote!

    ResponderEliminar
  7. Ya mismo lo pongo en practica y comparto. Mil gracias.

    ResponderEliminar
  8. Super fácil, ahora lo pongo ;) Muchas gracias!
    Besitos!

    ResponderEliminar
  9. Me parece una idea genial. Muuuuchas gracias, guapa.

    ResponderEliminar
  10. en mi blog no funciona, no sale la ventana :(

    ResponderEliminar
  11. Hola, me gustaría saber como lo dejo fijo en una partesita de mi blog?

    ResponderEliminar