Pop-up caja de me gusta facebook para blogger




Una buena idea para mantenernos en contacto con nuestros lectores es mediante las redes sociales, con facebook podemos crear páginas de fans de nuestro sitio web y compartir constantemente nuestras entradas. Una buena forma de asegurarnos de que los que visitan nuestro blog hagan clic en "me gusta" es con un pop-up que se abra cuando visitan nuestro blog. 

Para agregar este pop-up a nuestro blog lo que haremos será ir al panel de administración de blogger y entramos en diseño. 


Una vez allí hacemos click en añadir un gadget


Agregaremos un gadget del tipo HTML/Javascript


Nos abrirá una nueva ventana en la que pegaremos el siguiente código

<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(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/BlogUnEstudiantedeInformatica&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>

Copiamos y pegamos el código anterior como se muestra en esta imagen. Además buscamos la línea que contiene el enlace http://www.facebook.com/BlogUnEstudiantedeInformatica y la cambiamos por el enlace de nuestra página de facebook. Finalmente hacemos click en guardar.


Es importante resaltar que este pop-up solo se mostrará una vez a cada visitante, a menos que este borre las cookies. El pop-up se mostrará luego de 20 segundos, sí queremos aumentar o disminuir este tiempo buscamos la línea $('#fanback').delay(20000).fadeIn('medium');  y editamos el delay que es el tiempo en milisegundos que tarda en mostrarse el pop-up. Es decir, sí son 20000 milisegundos correspondería a 20 segundos. Y sí queremos que se muestre en 10 segundos entonces cambiaríamos 20000 por 10000.

Agregar dos FanPages al pop-up:

En los comentarios de esta entrada Ana Turon preguntaba sí es posible agregar más de una página de fans al pop-up. Si, es posible.

Sí poseemos mas de una página de fans en facebook una buena opción podría ser agregar al menos dos de estas al pop-up, esto lo haremos insertando un nuevo iframe de la caja de facebook cambiando para este el enlace de la fanpage. También hacer un cambio en el css en cuanto a la altura del gadget. El código html para poder agregar dos fanpage es el siguiente:

<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:540px;
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(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>
<p><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/NombreDeLaPrimeraFanPage&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>/<p>
<p><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/NombreDelaSegundaFanPage&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>/<p><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>

IMPORTANTE
Solo debemos editar el enlace de nuestras páginas de fans de facebook donde dice:

http://www.facebook.com/NombreDeLaPrimeraFanPage
http://www.facebook.com/NombreDelaSegundaFanPage

Una vez agregado el gadget nuestro pop-up con dos páginas de fans se vería de la siguiente manera:


También te podría interesar:
Slider automático de últimas entradas para blogger
Iconos sociales color azul para blogger
Crear formulario de contacto para blogger
Colocar código en entradas de blog


¡Ayúdanos a seguir creciendo, comparte en tus Redes Sociales!

Siguiente
« Prev Post
Anterior
Next Post »

41 comentarios

Click here for comentarios
Ana Turon
admin
18 de agosto de 2014, 14:06 ×

Gracias por este tutorial tan útil y bien explicado! Me encantó y lo puse en mis blogs, pero tengo dos fanpages de Facebook. Podía poner las dos en una misma ventana popup? Gracias!

Reply
avatar
22 de agosto de 2014, 21:26 ×

¡Gracias a ti Ana, me alegra mucho haberte ayudado!

Si vale, te explico. Lo que debes hacer es insertar otro iframe de la caja de facebook cambiando para este el enlace de la fanpage. También hacer un cambio en el css en cuanto a la altura del gadget. El código html para poder agregar dos fanpage en un mismo pop-up lo he colocado en la entrada.

IMPORTANTE
Solo debes editar el enlace de tus FanPage donde dice:

http://www.facebook.com/NombreDeLaPrimeraFanPage
http://www.facebook.com/NombreDelaSegundaFanPage

Anexaré esta opción en la entrada, me pareció bastante interesante. Gracias por aportar tu idea. Saludos.

Reply
avatar
Ana Turon
admin
24 de agosto de 2014, 17:58 ×

Muchísimas gracias!! Lo puse y quedó buenísimo! Intenté escribir unas palabras entre cada uno de los box, pero no pude. En qué me equivoqué? http://museolibrogardel.blogspot.com.ar/

Reply
avatar
26 de agosto de 2014, 21:35 ×

¡Excelente Ana!. Debes escribirlas usando párrafos, para ello usa la etiqueta html P, una etiqueta para abrir y otra para cerrar, entre amabas el parrafo o palabra.

A su vez sería recomendable expandir un poco mas el gadget, hacerlo mas alto. Al agregar mucho contenido este podría dejar de mostrar adecuadamente la caja de fans.

Reply
avatar
27 de septiembre de 2014, 16:35 ×

Hola, y si quisiese poner 1 de facebook y la otra de otra red, por ejemplo twiter. Gracias,

Reply
avatar
28 de septiembre de 2014, 16:10 ×

Hola, debe colocar el código del widget (twitter por ejemplo) antes de las 2 últimas etiquetas div. Espero haberte ayudado, saludos.

Reply
avatar
28 de septiembre de 2014, 19:53 ×

Hola d nuevo, lo intente y no consigo adherir el widget, Lo puse pero sale fuera del cuadro. Perdón, no tengo conocimientos en esto.

Reply
avatar
1 de octubre de 2014, 20:35 ×

Hola, escríbeme por el formulario de contacto para ayudarte a través del correo electrónico. Saludos.

Reply
avatar
16 de octubre de 2014, 21:05 ×

Hola Melissa, ¿estas segura de que seguiste todos los pasos correctamente?

Reply
avatar
ElH Zarco
admin
8 de diciembre de 2014, 18:00 ×

Muchas Gracias se ve excelente!

www.tuzonafut.net

Reply
avatar
VayaCorte!
admin
6 de enero de 2015, 9:39 ×

Hola! hay alguna manera para que no se repita en cada página? y solo salga en la de inicio?
Se podría poner para que en vez de en el medio salga en un lateral por ejemplo en el derecho?
Gracias! Todo lo demás correcto.

Reply
avatar
4 de marzo de 2015, 22:30 ×

Muchas gracias amigo me quedó perfecto puedes visitar mi blog y darle like a mi pagina por favor :) http://popworldnoticias.blogspot.mx/

Reply
avatar
5 de marzo de 2015, 12:22 ×

¡Hola!, me alegra te haya ayudado, quedó genial. Vale perfecto, por acá cualquier cosa. Saludos.

Reply
avatar
5 de marzo de 2015, 12:26 ×

Hola, usa un sistemas de cookies, es decir, aparecerá una sola vez por cada usuario nuevo que nos visite.
Si, puedes agregarle un margin-left.
Saludos.

Reply
avatar
Jose Gaona
admin
8 de mayo de 2015, 19:22 ×

¡Excelente tutorial, Francisco! Una pregunta: para los que tenemos una página con un número ridículo de seguidores en facebook, ¿puede modificarse alguna línea de código para que no aparezca el "a no se cuantas personas les gusta..."? Si no puede eliminarse, ¿cómo se podría cambiar el color para ponerlo blanco y que no se pudiera leer a simple vista por confundirse con el blanco de fondo?

Muchas gracias y saludos.

Reply
avatar
Anónimo
admin
17 de mayo de 2015, 9:30 ×

esta pagina es flash? por adsense lo digo, no meja poner contenido flash.

Reply
avatar
Anónimo
admin
21 de mayo de 2015, 14:46 ×

Hola, gracias por la explicación. Yo tengo una duda y si la resolviera, me sería de gran interés para resolver cierto problemilla de una web. He sabido colocar la ventana flotante con el likebox de Facebook, pero lo que quiero hacer es justamente a la inversa. Que la ventana aparezca al final, cuando la gente ya ha leído la información, tal y como vosotros habéis hecho aquí. Es decir, cuando la gente llegue a cierto punto del artículo, que emerja una ventana flotante diciendo, si te ha gustado, dale al me gusta. ¿Cómo podría hacerse eso? Por otra parte, estoy haciendo anuncios e insertándolos en Blogger. Hasta ahí no hay problema. La cuestión es que no sé qué código debo incluir para que las medidas de la foto que incluyo como anuncio se adapten al ordenador. Este es el código que yo inserto... Lamentablemente, no se escala... No os podéis imaginar hasta qué punto me salvaríais la vida... Este es mi email. ferranlikesyou@gmail.com para la respuesta.

el código que no se escala. Parece que no me deja insertar el código aquí

Reply
avatar
23 de mayo de 2015, 11:10 ×

Hola José, anteriormente podías modificar algunas propiedades de la like box con las cuales quizás podrías lograr tu objetivo. Sin embargo lamentablemente la like box fue sacada de facebook developers https://developers.facebook.com/docs/plugins/like-box-for-pages ahora existe una nueva llamada page plugin. Te coloco su link para que le des un vistazo https://developers.facebook.com/docs/plugins/page-plugin .

Reply
avatar
23 de mayo de 2015, 11:15 ×

Hola, en cuanto a lo de la like box te recomiendo que leas sobre SumoMe, es una herramienta que te puede ayudar a lograrlo, por otra parte para los anuncios podrías escoger uno de los recomendados por ellos mismos, el auto adaptable, ya que este es útil para webs responsives.

Reply
avatar
Anónimo
admin
12 de junio de 2015, 17:11 ×

Hola!

Muy bueno, solo que tengo un problema. El popup aparece, todo bien. Pero al momento de cerrarlo, no puedo hacer clic en unos botones, que justo están bajo el popup, no se si me explico.
Ojalá puedas ayudarme.

Reply
avatar
13 de junio de 2015, 10:43 ×

Hola!, agregaste algunos botones al popup? o te refieres al de cerrar?

Saludos.

Reply
avatar
23 de junio de 2015, 21:34 ×

Hola Amigo, excelenteeee!, pero tengo una duda, resulta que la versión movil no me permite visualizarlo bien, debo hacer algo para mejorarlo?

Reply
avatar
23 de junio de 2015, 21:40 ×

Hola Amigo, excelenteeee!, pero tengo una duda, resulta que la versión movil no me permite visualizarlo bien, debo hacer algo para mejorarlo?

Reply
avatar
Anónimo
admin
7 de julio de 2015, 14:09 ×

Excelente tutorial amigo, pero tengo un pequeño problema: Al parecer el popup le aparece a todo el mundo incluidos a los que ya son fans de la pagina, lo cual puede ser molesto para ellos. Se puede solucionar?

Reply
avatar
13 de julio de 2015, 9:30 ×

Si es cierto, aunque este se visualiza una sola vez por persona amigo (a menos que borren las cookies) por lo tanto no resultará ser molesto.

Reply
avatar
HectilierWeb
admin
27 de agosto de 2015, 10:26 ×

gram ayudame hermano Dios te bendiga

Reply
avatar
27 de agosto de 2015, 15:17 ×

A ti amigo, amén, bendiciones y saludos.

Reply
avatar
5 de septiembre de 2015, 12:25 ×

Genial tutorial y explicación bro. Quisiera un Popup que fuese editable, por un tiempo que fuese el cuadro de likes de Facebook, en otros casos cuando ya decida cambiarlo, que sea un aviso o anuncio hecho por mi, o una imágen, o texto, etc que sé yo... ¿Me podrías decir cómo hago eso? Saludos!

Reply
avatar
5 de septiembre de 2015, 14:53 ×

¡Gracias amigo! pues puedes usar el mismo código fuente, solo debes remplazar la caja de facebook por lo que desees colocar allí.

Reply
avatar
misa maqueda
admin
2 de noviembre de 2015, 23:19 ×

no me funciona quiensabe por que alguien que me ayude

Reply
avatar
Alx97
admin
5 de diciembre de 2015, 23:07 ×

Gracias amigo me funciono excelente pero me puedes decir como hacer que el popup aparezca cada cierto tiempo me puedes ayudar porfavor.

Reply
avatar
3 de enero de 2016, 15:47 ×

Hola, el aparece cada cierto tiempo, inserta una cookie a los visitantes para no aparecer más. Saludos.

Reply
avatar
Ar FlowMusic
admin
27 de abril de 2016, 14:03 ×

buenas Me arroja un error con Width despues del link de facebook este es el error

Error al analizar XML, línea 1132, columna 155: The reference to entity "width" must end with the ';' delimiter.

que puedo hacer

Reply
avatar
Ar FlowMusic
admin
27 de abril de 2016, 14:08 ×

buenas Me arroja un error con Width despues del link de facebook este es el error

Error al analizar XML, línea 1132, columna 155: The reference to entity "width" must end with the ';' delimiter.

que puedo hacer

Reply
avatar
2 de agosto de 2016, 2:13 ×

Hola amigo, excelente tutorial te felicito;

Unas preguntas por favor, me interesaría que no sea sólo 1 sesión por personas sino modificar este valor para que el popup se muestre al menos 3 veces a la persona y luego ya desaparezca.

Dime dónde modifico ese valor, asi como donde modifico el tiempo de expiración de la cookie en dias supongo y finalmente en qué parte puedo adicionar texto, una imagen o un codigo html.

Muchisimas gracias por tu amable respuesta.

Saludos, Pedro.

Reply
avatar
JJ LG
admin
17 de agosto de 2016, 12:42 ×

yo tengo ese mismo problema en la versión móvil no me aparece la caja de likes

Reply
avatar