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(https://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://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(https://1.bp.blogspot.com/-PPvu-446sn...background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://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(https://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="https://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&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>
</center>
</div>
</div>
Cambia lo que esta en azul por la URL de tu pagina en Facebook y listo.
Via/Foro Beta
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?
Creo que un codigo similar como este podria ser usado para tal fin.
OK¡¡¡¡¡
¡Esto es fantástico! En qué parte del código se determina la cantidad de veces que aparece el pop-up?
Wilmer edita la parte siguiente:
if (document.cookie.indexOf(‘visited=true’) == -1) {
Debes cambiar el 1 por las veces que quieres que aparezca.
Esos Pop Up son bien molestas y feas, yo literalmente las odio. Mi mas humilde opinión. Saludos.
Tranquilo amigo esa es tu opinion y es respetable.
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/
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.
ME ESTA DANDO PROBLEMA CON MOOTOOLS
Este truco utiliza jquery por lo que te recomiendo que elijas solo una de estas librerias.
Buenisimo 🙂 me encanto
Que bueno que te haya gustado amigo 😀
no funciona amigoo
Darkfenis en que blog no te funciono?
no me funciono ayudad !!!!
Amigo sigue los pasos tal cual como los explico 😛
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
keebyn exactamente que contenido quieres agregar.
quiero agregar un cuadro de suscripción de E-mal,
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>
Lo puse y funciono bien, después no me quiso aparecer mas 🙁 ¿porque?
Zulianny es que el PopUp solo aparece la primera vez que el lector entra al blog.
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!
Amigo tengo justo lo que necesitas,te dejo el link del tuto.
http://www.miltrucosblogger.info/2012/03/fanbox-de-facebook-flotante-con-la.html
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
Jorge te recomiendo que no hagas nada que incentive los clicks en los anuncios de Adsense porque ellos te penalizan.
una pregunta como puedo poner que si no quieren compartir que se pueda cierren al momento
como puedo poner que si alquien no quiere compartir que se pueda cerrar al momento
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
Claro que funciona en explorer 9 y lo recomiendo en un gadget (elemento HTML/Javascript)
Muy bueno!!! Ya lo puse en mi blog y funciona al 100…Muchas gracias!!
Jesus gracias por comentar y me da mucho gusto que te haya funcionado 😀
Saludos.
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…
Amigo mira añadelo al final de la plantilla arriba de la etiqueta </body>
Saludos 😀
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
Amigo el script viene predeterminado para que se abra solo la primera vez con el fin de evitar molestias a los usuarios.
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.
Excelente post… ya por fin lo instalé pero solo me funciona en Chrome, sabes por qué no me sale ni en IE ni Firefox?
Juan a mi me sirve en Firefox, que versiones usas de estos navegadores? :zombie:
No logro que me funcione y lo estoy plasmando como pones. donde puede estar el error. Gracias por adelantado.
Amigo deja la direccion de tu blog para revisarlo y determinar cual es el inconveniente…
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
Matias aca te dejo el link de la entrada donde esta justo lo que pides.
http://www.miltrucosblogger.info/2011/08/gagdet-hazte-fan-en-facebook-para.html
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.
????????????????? como hago JUVINAO???
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
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
Tienes que añadir la opcion de recomendar,dame unos dias y te hago el tutorial 😛
excelente JUVINAO, sabes he recomendado tu pagna, gracias!!!!!!! estare esperando el tuto
Gracias amigo por recomendar mi blog 😎
amigo yuninadoooo!!!!! tengo un gran problemaaaaaa, fijate que compre un dominio en GODADDY el cual solamente me redirige a mi blog, yo lo compre para darle mas profesionalismo a mi blog, pero ya no se que hacer.
el dominio que compre es http://www.encuestasdepaga.info y mi blog es http://www.encuestasdepaga.blogspot.com, cuando pones en tu navegador el nombre de mi dominio solo manda a los visitante al blog, pero ya adentro sigue apareciendo el blogspot!!!! no se que hacer para solucionar eso.
yo quiero que todo el tiempo me aparesca http://www.encuestasdepaga.info y cuando vea alguna pagina que se vea de esta forma http://www.encuestasdepaga.info/preguntas-frecuentes etc.
me explico?
esppero me podas ayudar amigo
Amigo mi nombre es Juvinao XD! :blaf: bueno claro que te entiendo,lo que yo creo es que configuraste mal las DNS,aqui hay un tutorial que creo te puede servir..
http://ciudadblogger.com/2010/11/configurar-dominio-de-blogger-usando.html
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
Arnulfo la ID corresponde a los últimos números de la url :zombie:
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 ????
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
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:
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
Esto se puede solo hay que hacerle una pequeña modificacion al codigo y listo.
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
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
Amigo lo que pasa es que la imagen del boton se cayo, en estos dias la resubo
HOLA JUVINAO SOLICITO DE TU AYUDA OCUPO QUE ESTE POP UP DE ME GUSTA DE FACEBOOK TENGA EL BOTON DE CERRAR (X) COMO LO TIENE ESTA ENTRADA http://www.miltrucosblogger.info/2012/09/pop-up-follow-de-twitter-para-blogger.html QUE SEA EN ESTE MISMO COLOR EN BLANCO ESPERO QUE ESTA VES SI ME CONTESTES SALUDOS
Amigo lo que pasa es que la imagen del boton se cayo, en estos dias la resubo
GRACIAS ESTARE ANTENTO SALUDS
SOY NUEVA EN ESTO, COMO LO INSTALO EN FACEBOOK
Amigo este truco es para instalar en un blog no en facebook.
me sirvio gracias lo andava buscando, una pregunta para que carge mejor mi pagina es recomendable mejor poner enlaces y no pegar codigos de videos etc supongo no a ver si me responden http://sinestesiaradio.blogspot.com/
Robin los videos hacen que los blogs carguen mucho mas lento, asi que si es mejor poner enlaces.
Que modifico mi código de facebook personal para que funcione en mi blog
Qué modifico en el enlace de mi facebook personal para que funcione en mi blog????
Cambia lo que esta en azul por la URL de tu pagina en Facebook y listo.
Este comentario ha sido eliminado por el autor.
YEBO MAS DE DOS ORA INTENTANDO PONERLO, Y NO ME SALE, CAMBIE LA URL Y NADA, HICE ASTA OTRA URL PARA VER SI ERA MI BLOG Y NADA, AYUDAME X FII MI BLOG ES http://amorconfe.blogspot.com/
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.
Ok no hay problema lo are ahora mismo, cual es tu correo para enviarte la solicitud
hayderjuvinao@gmail.com
dame tu correo para ponrte
Justo lo que estaba buscando mil gracias ^^
Gracias Matias por tu comentario
Mil gracias pero mi duda es la siguiente, el aspecto del pop up se le puede editar? algun tipo de imagen png o algo?
Exactamente que quieres editar?
Juvinao no importa si lo pongo pa k me parezca 10 veses el Pop Up de Facebook?
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?
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
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
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
Ahh!! no me pude registrar en el foro!!!monica
solo sirve una vez, cuando actualizo ya no vuelve aparecer
NO SE QUE ES LO QUE HAY QUE CAMBIAR Y COMO ?
Solo tienes que poner la URL de tu fanpage
en hatml /java scrip no me sale sera que lo puedo colocar en
body
Inténtalo y dime como te fue
Hola amigo, lo puse en mi web pero no me sale el botón de me gusta 🙁 uso la plataforma de blogger, mi sitio es: http://www.tutorialesydescargas.com/
quisiera que me ayudaras bro cuando puedas para poder colocarlo bien.
De antemano muchas gracias
Amigo yo lo veo funcionando muy bien 😛
no es cierto Luis no se ve y eso lo que estoy tratando de hacer ahora yo
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?
En que blog se presenta el problema?
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
Al parecer ya quitaste el PopUp,así no te puedo ayudar.
Saludos
oe men naa no me sale ayudenme xfa
El truco sirve amigo.
Muy bien man gracias.
Me salió: http://www.dcumbia.com/
Amigo se ve muy bien el pop up en tu blog.
Gracias por comentar.
Saludos
No me sirve hice todos los pasos y aun no me sale ni una ves
Amigo DJ podrías indicarme cual es tu blog?
Saludos
no me sirve me sale solo la parte de arriba pero no aparece el boton me gusta de mi fans page
el código es increíble muchas gracias eres un crack saludos desde chile
Gracias a ti por comentar.
Saludos
como hago para ke aparesca siempre?
Me esta dando errors, se ve muy bueno, igual gracias por compartir!!!