Pop Up Me gusta de Facebook para Blogger

Un usuario anonimo me pidio un truco tipo PopUp en el se mostrase el boton Me Gusta de Facebook,y buscando un poco he encontrado el tutorial.

La vista previa del truco es la siguiente:

 La ventana se vera la primera vez que el lector entre a tu pagina con el fin de evitar molestias a los usuarios.

Para añadir este truco añade en un elemento HTML/Javascript lo siguiente:

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn...background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-...00/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Mantente en contacto con nosotros a través de Facebook. Sólo presiona el botón Me gusta <center><p style="line-height:3px;" >▼</p></center></h3>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FXanacom%2F 160821757320162&amp;width=300&amp;colorscheme=light&amp;show_face s=true&amp;border_color=%23ffffff&amp;stream=false &amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
</div>
</div>

Cambia lo que esta en azul por la URL de tu pagina en Facebook y listo.

Via/Foro Beta

Share

112 thoughts on “Pop Up Me gusta de Facebook para Blogger

  • abril 18, 2012 at 6:10 pm
    Permalink

    ESTA INCREIBLE JUVINAO AHORA MISMO LO PONDRE EN MI WEB GRAXIAS¡¡¡¡¡

    ¿NO TENDRAS UN CODIGO QUE SEA IGUAL ASI EL POP UP PERO PARA PODER INCRUSTARLE UN VIDEO?

    Reply
    • abril 19, 2012 at 2:31 pm
      Permalink

      Wilmer edita la parte siguiente:

      if (document.cookie.indexOf(‘visited=true’) == -1) {

      Debes cambiar el 1 por las veces que quieres que aparezca.

      Reply
  • abril 19, 2012 at 3:21 pm
    Permalink

    Esos Pop Up son bien molestas y feas, yo literalmente las odio. Mi mas humilde opinión. Saludos.

    Reply
  • abril 20, 2012 at 2:03 am
    Permalink

    Hola, Amigo modifico la fila if (document.cookie.indexOf(‘visited=true’) == -1) { para darle la cantidad de apariciones;
    ejemplo: Porngo -2 y debiera de aparecer 2 veces; pero no me aparece nada, solo me aparecio la primera vez cuando abri el blog, de resto no sigue apareciendo.

    http://www.imagenescuriosas.com.ar/

    Reply
    • abril 20, 2012 at 2:56 pm
      Permalink

      Amigo creo que el problema que tienes es por mucha publicidad,tal vez esto genera algun tipo de interferencia,pero te recomiendo que lo dejes en 1 porque un popup puede llegar a ser molesto para los usuarios.

      Reply
    • abril 23, 2012 at 7:51 pm
      Permalink

      Este truco utiliza jquery por lo que te recomiendo que elijas solo una de estas librerias.

      Reply
  • abril 28, 2012 at 8:17 pm
    Permalink

    Hola. Quisiera un popup igual a este que se abre automáticamente al abrir el blog, pero quisiera poner otro contenido dentro, que no sea de facebook. Me podrias ayudar, Gracias.:D

    Reply
    • mayo 1, 2012 at 4:31 pm
      Permalink

      keebyn elimina esta parte del codigo y en su lugar pon el codigo del cuadro de suscripcion.

      <iframe src=”//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FXanacom%2F 160821757320162&width=300&colorscheme=light&show_face s=true&border_color=%23ffffff&stream=false &header=false&height=258″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:300px; height:258px;” allowtransparency=”true”>
      </iframe>

      Reply
    • mayo 20, 2012 at 2:10 pm
      Permalink

      Zulianny es que el PopUp solo aparece la primera vez que el lector entra al blog.

      Reply
  • mayo 25, 2012 at 5:06 pm
    Permalink

    Hola Juvinao! Increible el codigo! Muchisimas gracias! pero quisiera saber como puedo hacer para que la caja del facebook siga al scroll, es decir que si al bajar lo siga. Saludos!

    Reply
  • mayo 30, 2012 at 6:19 pm
    Permalink

    Oye muchas gracias por todos estos gadgets que nos das solo queria hacerte una pregunta… necesito hacer q las personas agan click en los anuncios de adsence como ago para que lo agan? gracias mi blog menosaburrimiento.blogspot.com

    Reply
    • mayo 31, 2012 at 12:36 am
      Permalink

      Jorge te recomiendo que no hagas nada que incentive los clicks en los anuncios de Adsense porque ellos te penalizan.

      Reply
  • junio 9, 2012 at 2:28 am
    Permalink

    una pregunta como puedo poner que si no quieren compartir que se pueda cierren al momento

    Reply
  • junio 9, 2012 at 2:29 am
    Permalink

    como puedo poner que si alquien no quiere compartir que se pueda cerrar al momento

    Reply
  • junio 13, 2012 at 4:45 pm
    Permalink

    Buenas tardes Juvinao, en que parte del HTML del blog recomiendas colocar este código?.Por último, funciona bien en explorer 9?. Lo pregunto porque esta versión sigue generando problemas hasta con los favicons.
    Gracias.
    Luis Medina

    Reply
    • julio 8, 2012 at 8:13 pm
      Permalink

      Claro que funciona en explorer 9 y lo recomiendo en un gadget (elemento HTML/Javascript)

      Reply
    • julio 8, 2012 at 8:13 pm
      Permalink

      Jesus gracias por comentar y me da mucho gusto que te haya funcionado 😀

      Saludos.

      Reply
  • julio 11, 2012 at 5:47 am
    Permalink

    Solo una cosa, quiciera saber si podemos poner una X de Cerrar en la esquina izquierda o derecha amigo, pero esta super genial, la verdad que seguire en tu blog sin dudas…

    Tambien una ultima cosa, como se podria poner, pero que no sea en el HTML/java, si no, que solo se ponga dentro del blog, y cuando una persona entre le salga, es decir, que no usemos la caja de HTML/JAVA, y disculpa el atrevimiento 😉

    Gracias…

    Reply
    • julio 12, 2012 at 7:28 pm
      Permalink

      Amigo mira añadelo al final de la plantilla arriba de la etiqueta </body>

      Saludos 😀

      Reply
  • julio 12, 2012 at 8:35 pm
    Permalink

    Gracias hermano y lo de la X (Cerrar) ejejejej, y porrrrr ultimo 😀 😀 ya si sera la ultima, que solo salga en la pagina principal, si decidimos que se abra varias veces… 😀 jejejeje

    Reply
    • julio 13, 2012 at 7:21 pm
      Permalink

      Amigo el script viene predeterminado para que se abra solo la primera vez con el fin de evitar molestias a los usuarios.

      Reply
  • julio 22, 2012 at 3:21 pm
    Permalink

    Juvinao gracías, ya he instalado el popup y funciono muy bien, pero te tengo dos preguntas:
    1.- Se pueden cambiar las dimensiones de la ventana que emerge?
    2.- Se puede usar para promocionar un post o un concurso?

    Reply
    • agosto 3, 2012 at 12:51 am
      Permalink

      La ventana que emerge ocupa todo el ancho de la pantalla y en cuanto al uso tu le puedes dar el que quieras,solo debes cambiar el codigo de facebook que esta casi al final entre las etiquetas iframe.

      Reply
  • agosto 6, 2012 at 5:12 pm
    Permalink

    Excelente post… ya por fin lo instalé pero solo me funciona en Chrome, sabes por qué no me sale ni en IE ni Firefox?

    Reply
    • agosto 6, 2012 at 7:44 pm
      Permalink

      Juan a mi me sirve en Firefox, que versiones usas de estos navegadores? :zombie:

      Reply
  • agosto 24, 2012 at 11:58 pm
    Permalink

    No logro que me funcione y lo estoy plasmando como pones. donde puede estar el error. Gracias por adelantado.

    Reply
    • agosto 25, 2012 at 10:26 pm
      Permalink

      Amigo deja la direccion de tu blog para revisarlo y determinar cual es el inconveniente…

      Reply
  • septiembre 16, 2012 at 7:20 pm
    Permalink

    me podes dar el codigo para que no se abra cuando abra el blog, sino que siempre este como un gadget a la izquierda y sin las letras de mntente conectado[..], solo el nombre del facebook y el boton de “Me gusta” y el cartelito de los fans. Gracias

    Reply
  • septiembre 22, 2012 at 5:47 am
    Permalink

    hola estimado MENTOR JUVINAO, primeramente excelente aporte, ya lo instale en mi blog, el detalle es el siguiente:

    a mi me gustaria que esa ventana emergente que sale cuando entras al blog estuviera permanente y no se pudiera quitar hasta que le den like a la pagina, como obligando al visitante a que le den like para poder ver el contenido.

    estaba haciendo unas pruebas con otra pc y veo que cuando sale la ventana emergente y le das clik en cualquier lugar afuera del cuadro blanco la venta se cierra y podes entrar al blog.

    y lo que yo quisiera es que no se cierre, hasta que le den like a la pagina.

    en espera de tu ayuda JUVINAO EL MENTOR DE TODOS NOSOSTROS.

    Reply
    • septiembre 22, 2012 at 9:46 pm
      Permalink

      Pues amigo lo que pides no se puede hacer pero lo que si se puede hacer es que cada vez que el usuario actualice la pagina le aparezca el PopUp y para ello solo cambio true por false en (‘visited=true’) == -1

      Reply
  • septiembre 22, 2012 at 11:32 pm
    Permalink

    ok entiendo amigo, otra duda como puedo agregar la opcion de compartir pagina a este script? es decir para que el que le de like, de una vez comparta la pagina con sus amigos?

    gracias por tu valiosa ayuda

    Reply
  • septiembre 27, 2012 at 10:00 pm
    Permalink

    MIL GRACIAS POR TU APORTE, TENGO UN PROBLEMA DONDE PUEDO CONSEGUIR DE MI FACEBOOK LO DE AZUL QUE TENGO QUE CAMBIAR PARA QUE ME APARESCA EL ME GUSTA DENTRO DEL POP ???

    http%3A%2F%2Fwww.facebook.com%2Fpages%2FXanacom%2F 160821757320162

    Reply
    • septiembre 27, 2012 at 11:54 pm
      Permalink

      Arnulfo la ID corresponde a los últimos números de la url :zombie:

      Reply
  • septiembre 28, 2012 at 3:16 pm
    Permalink

    gracias mi amigo, pero no puede poner el me gusta., me marca un error… mi facebook es personal.. sera por eso ???? o que me suguieres para hacerlo ????

    Reply
  • septiembre 28, 2012 at 3:18 pm
    Permalink

    mi facebook es de perfil personal, creo por eso no puedo ponerlo ??? ó que suguerencia me das… brodii… tu eres el experto…. felicidades eres bueno no cabe duda

    Reply
    • septiembre 29, 2012 at 10:29 pm
      Permalink

      Arnulfo los blogs personales no tienen ID asi que hay que modificar el codigo del truco,mañana te paso el codigo que tu debes agregar :winky:

      Reply
  • octubre 31, 2012 at 8:29 pm
    Permalink

    Muchas gracias logre colocarlo en mi blog, gualaquiza.blogspot.com pero me gustaria que en vez que me visualice los post publicados, quisiera que me visualice las personas que les gusta la pagina de face… Saludos Graicas

    Reply
    • noviembre 17, 2012 at 10:29 pm
      Permalink

      Esto se puede solo hay que hacerle una pequeña modificacion al codigo y listo.

      Reply
  • noviembre 12, 2012 at 4:55 am
    Permalink

    ME GUSTA ESTE TRUCO (PERO) QUISIERA QUE TU VIERA EL BOTONCITO PARA CERRARLO EVISTO QUE TIENEN ALGUNOS BOTON, COMO EL QUE TINES EL DE TWIITER QUE TIENE BOTON PERO QUE SEA ESTE SALUDOS

    Reply
  • noviembre 13, 2012 at 2:30 pm
    Permalink

    ME GUSTA ESTE TRUCO (PERO) QUISIERA QUE TU VIERA EL BOTONCITO PARA CERRARLO EVISTO QUE TIENEN ALGUNOS BOTON, COMO EL QUE TINES EL DE TWIITER QUE TIENE BOTON PERO QUE SEA ESTE SALUDOS TE ESCRIVO OTRAVES POR QUE NOSE SI NO LE ISTE ESTE MENSAJE JEJEJE O SE TE PASO SALUDOS

    Reply
    • noviembre 17, 2012 at 10:30 pm
      Permalink

      Amigo lo que pasa es que la imagen del boton se cayo, en estos dias la resubo

      Reply
    • noviembre 17, 2012 at 10:31 pm
      Permalink

      Amigo lo que pasa es que la imagen del boton se cayo, en estos dias la resubo

      Reply
  • noviembre 17, 2012 at 10:38 pm
    Permalink

    GRACIAS ESTARE ANTENTO SALUDS

    Reply
  • diciembre 12, 2012 at 6:30 pm
    Permalink

    SOY NUEVA EN ESTO, COMO LO INSTALO EN FACEBOOK

    Reply
    • diciembre 16, 2012 at 11:49 pm
      Permalink

      Robin los videos hacen que los blogs carguen mucho mas lento, asi que si es mejor poner enlaces.

      Reply
    • diciembre 24, 2012 at 1:07 am
      Permalink

      Amigo la unica posibilidad que veo es que me vuelvas admin de algun blog de pruebas tuyo que tenga la misma plantilla del sitio en el que has intentado añadi el truco y asi yo te arreglo el problema.

      Reply
  • enero 14, 2013 at 10:30 pm
    Permalink

    Mil gracias pero mi duda es la siguiente, el aspecto del pop up se le puede editar? algun tipo de imagen png o algo?

    Reply
  • enero 31, 2013 at 3:33 pm
    Permalink

    Hola!!! Llevaba más de un año con este truco y me ha funcionado siempre a la perfección. Pero ahora me he dado cuenta que carga solamente el texto de arriba y no aparece por ningún lado el botón de Me gusta para que se agregen a mi página de Facebook. ¿Qué ha pasado? ¿Me puedes ayudar?

    Reply
  • febrero 1, 2013 at 9:00 am
    Permalink

    Hola Hayder, como estás, hace unos meses puse el pop ep que tenias en una vieja entrada creo que era del 2011, funciono perfecto hasta que hace do o tres meses sin que yo hiciera nada se cambio al que aparecen las actualizaciones de facebook. Anduvo asi unos meses y luego dejo de funcionar.Ahora puse en que te dan en facbook, pero aun me sigue saliendo el pop up con un error, como pasaba antes, y hace un mes no entra nadie desde facebook, y por ende me bajaron a la mitad las entradas !!! Ya no se que hacer…Ayuda !!!!tengo una captura de pantalla para que veas lo que sale…AUXILIO !!!!!
    Mónica de …zoomgraf.blogspot.com

    Reply
  • febrero 1, 2013 at 9:06 am
    Permalink

    Hola Hayder, soy Monica, hace casi un año puse el pop ep viejo, que tenias en una entrada del 2011, anduvo rebien hasta que hace unos meses empezó a tirarme un error y a partir de alli no entra nadie de facebook, cuando antes tenia el mismo trafico desde alli que desde google…Ya probe poniendo el nuevo que da facebook, sin pop up, pero sigue ahi la ventana con el mismo error. Ayuda!!!!!!!!!!!!!Auxilio!!!!!!! ya no se que hacer!!! Gracias

    Reply
  • febrero 1, 2013 at 9:07 am
    Permalink

    Hola Hayder, soy Monica, hace casi un año puse el pop ep viejo, que tenias en una entrada del 2011, anduvo rebien hasta que hace unos meses empezó a tirarme un error y a partir de alli no entra nadie de facebook, cuando antes tenia el mismo trafico desde alli que desde google…Ya probe poniendo el nuevo que da facebook, sin pop up, pero sigue ahi la ventana con el mismo error. Ayuda!!!!!!!!!!!!!Auxilio!!!!!!! ya no se que hacer!!! Gracias

    Reply
  • junio 29, 2013 at 4:44 am
    Permalink

    Hola Juvinao, amigo se q a pasado mucho tiempo dsd esta publicacion pero tengo un problema… hice todo tal cual dijist y sale el pop up pero en el cuadro solo aparece hasta dond dice siguenos a travez de facebook bla bla, pero n sale dond dar click a me gusta…. que pude hacr mal?

    Reply
  • agosto 29, 2013 at 10:22 pm
    Permalink

    ME PUEDEN AYUDAR ESQUE CUANDO PONGO EL GADGET EN MI WEB LA PARTE DE ARIBA DE EL GATGET SE VISUALIZA DEBAJO DEL ENCABEZADO ME PUEDEN AYUDAR PARA QUE ESTE ARIBA EN LUGAR DE ABAJO DEL ENCABEZADO

    ESTE ES MI WEB:

    CHABLETUTORIAL3S.BLOGSPOT.COM

    Reply

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *