Tutorial: Agregar una Caja Pop Up "Me Gusta" de Facebook en tu blog de Blogger

  • Autor Autor MarieGhz
  • Fecha de inicio Fecha de inicio
M

MarieGhz

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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:

nmr0.jpg
 

Adjuntos

  • nmr0.webp
    nmr0.webp
    22,4 KB · Visitas: 825
Tutorial aprobado, se agradece el aporte.
 
Gracias amigo, lo andaba buscando pero sabia el nombre, se te agradece.
 
Gracias :encouragement:
 
Se me queda un poco grande, haber cuando puedo encargar que me lo hagan.
 
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:
 
Muchas gracias amigo, siempre haabia buscdo algo como eso 😛8:
 
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.
 
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>
 
no hay demos? :distant:
 
Guardando tutorial para usarlo mas adelante, gracias :encouragement: .
 
Buen tuto, Ya lo tenia implementado pero se me olvido gualdarlo :welcoming: Asi que a guardar 😎
Gracias por el aporte
 
YA NO ANDA CREO U.U lo acabo de hacer y nada
 
excelente, lo estaba buscando hace días!! Gracias bro, podré realizar las mejoras
 
Gracias por el tutorial!:encouragement:
 
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
 
Excelente tutorial, voy con ello 😛8:
 
Pero hay un iframe que se coloca facilmente en un widget
 
Gracias por el aporte! vamos a ello! 🙂
 
Atrás
Arriba