Tutorial: Caja Pop Up "Me Gusta" de Facebook para blogger (funcionando)

MarieGhz

Alfa
Verificación en dos pasos desactivada
Desde
27 Nov 2013
Mensajes
25
Saludos a todos, he modificado el código para ayudaros con la caja, que en un tutorial anterior de: http://forobeta.com/tutoriales-de-blogger/89125-caja-pop-up-me-gusta-de-facebook-blogger.html aparecía el recuadro pero no mostraba nuestra página, resulta que ingeniando un poco, lo que faltaba era que nosotros modificáramos el código final donde ubica la página de Facebook pero en "Developers" sin más preámbulo os explico:

Vamos a: Diseño / Elementos de la página / HTML/Javascript:

Colocaremos todo lo anterior que sería:

Código HTML:

Insertar CODE, HTML o PHP:
<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=Vuestra página&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=1415581528675720" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>

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

Lo único que hice fue ir a: https://developers.facebook.com/docs/plugins/like-box-for-pages/ y volver hacer todos los pasos que indica Facebook con el nuevo diseño de ellos, el error era, cambiar el iframe por el actual, en el código puesto sólo tenéis que colocar vuestra página, esta insertado hasta la fecha.

Prueba:

 

Adjuntos

  • nmr0.jpg
    nmr0.jpg
    65,8 KB · Visitas: 812

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.358
Tutorial aprobado, se agradece el aporte.
 

Rappers

Baneado
Gamma
Social Media
Verificación en dos pasos desactivada
Desde
30 Jun 2013
Mensajes
200
Gracias amigo, lo andaba buscando pero sabia el nombre, se te agradece.
 

Alanruix

No recomendado
Diseñador
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
14 Nov 2011
Mensajes
344
Gracias :encouragement:
 

mbantolin

Alfa
Verificación en dos pasos desactivada
Desde
21 Nov 2013
Mensajes
19
Se me queda un poco grande, haber cuando puedo encargar que me lo hagan.
 

davidtorresruiz

Delta
Programador
Verificación en dos pasos desactivada
Desde
5 Ene 2014
Mensajes
554
Hola disculpa pero a mi no me funciono en mi blogger, lo coloque en el <body> adentro y nada y afuera y adentro del <head> y nada y lo coloque en PLANILLA + EDITAR HTML y nada.. :sorrow:
 

ego2k

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
19 Jun 2013
Mensajes
242
Muchas gracias amigo, siempre haabia buscdo algo como eso :p8:
 

redactorweb

VIP
Zeta
Redactor
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
28 Jul 2010
Mensajes
1.903
Lo probe y quedó expectacular.
Hola disculpa pero a mi no me funciono en mi blogger, lo coloque en el <body> adentro y nada y afuera y adentro del <head> y nada y lo coloque en PLANILLA + EDITAR HTML y nada..
Tenés que pegarlo en BODY y agregas <style> antes de todo y queda.
Saludos.
 

miguel0n

Delta
Redactor
Verificación en dos pasos desactivada
Desde
14 Feb 2014
Mensajes
677
Explicate mejor, solo tienes que copiar el nuevo iframe que te arroja Developers, y sustituirla en
HTML:
<iframe src="//www.facebook.com/plugins/likebox.php?href=Vuestra página&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=1415581528675720" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>
 

Ezequiel Velarde

VIP
Kappa
Social Media
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
25 Feb 2013
Mensajes
2.592
no hay demos? :distant:
 

cybertec

Dseda
Verificación en dos pasos desactivada
Desde
6 Ago 2014
Mensajes
1.045
Guardando tutorial para usarlo mas adelante, gracias :encouragement: .
 

Kelvin Estevez

Dseda
Marketing
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 May 2013
Mensajes
1.192
Buen tuto, Ya lo tenia implementado pero se me olvido gualdarlo :welcoming: Asi que a guardar :cool:
Gracias por el aporte
 

Gary Reyes

Dseda
Verificación en dos pasos desactivada
Desde
23 Dic 2012
Mensajes
1.077
muchas gracias me sirvio muchoo saludos :encouragement:
 

alejandros

Mi
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
23 Oct 2014
Mensajes
3.241
YA NO ANDA CREO U.U lo acabo de hacer y nada
 

chrisdmarzo

Alfa
Videoblogger
Verificación en dos pasos desactivada
Desde
7 Sep 2014
Mensajes
23
excelente, lo estaba buscando hace días!! Gracias bro, podré realizar las mejoras
 

KGG1

Alfa
Verificación en dos pasos desactivada
Desde
27 Nov 2014
Mensajes
21
Gracias por el tutorial!:encouragement:
 

AlexxxBcN

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
18 Feb 2013
Mensajes
408
Buen tutorial

Hay forma de que si entro desde movil no salga la caja ?
ya probé con añadir mobile= "no" , pero sigue saliendo

Si alguien sabe como hacer para que no salga en moviles
gracias
 

aruiz99

Beta
Verificación en dos pasos desactivada
Desde
23 Ene 2013
Mensajes
145
Excelente tutorial, voy con ello :p8:
 

SonGoku

Delta
Redactor
Verificación en dos pasos desactivada
Desde
15 Oct 2014
Mensajes
637
Pero hay un iframe que se coloca facilmente en un widget
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba