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

Relacionados

Buscador Interno estilo Google Seguro que muchos de ustedes han visto que con el nuevo diseño de Google su buscador tambien ha cambiado de diseño y algunos han quedado fascinados ...
Caja de suscripciones para Blogger Luego de tanto pensar en que truco hacer para Blogger,se me ocurrió hacer esta excelente caja de suscripciones para el blog,el cual muestra los icono...
Iconos Sociales de Balones de Fútbol con efecto Z... Iconos Sociales de Balones de Fútbol con efecto Zoom En el día de hoy y aprovechando que estamos en pleno apogeo del mundial de fútbol, voy a co...
Outlook reemplaza a Hotmail Aunque esta noticia no es nada nueva, de todas maneras le presentare ya que seguro habrá algún bloggero despistado que todavía&...

Share

112 comentarios en “Pop Up Me gusta de Facebook para Blogger

    • 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.

    • 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>

  1. 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!

  2. 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

  3. 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

  4. 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…

  5. 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?

    • 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.

  6. 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

  7. 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.

  8. 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

  9. 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

  10. 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?

  11. 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

  12. 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

  13. 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

  14. 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?

  15. 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

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>