Tutorial: Cómo agregar una caja emergente de Me gusta de Facebook a un blog de Blogger con JQuery

  • Autor Autor JuanDRomero
  • Fecha de inicio Fecha de inicio
JuanDRomero

JuanDRomero

Eta
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Hola a todos,

Primero aclaro que esto no es algo inventado hecho por mí, fue donado por uno de mis colaboradores a mi pagina y como resulto súper sencillo hacerlo ademas que siempre he querido tener el Pop Up de Me gusta para Facebook me pareció genial compartirlo con ustedes, siempre busque el Pop up para facebook pero todos los métodos que existían eran en PHP y como Blogger no permite esto pues malo... ahora resulta que si se puede hacer con JQuery.

Este lo agrego como tutorial porque sé que es muy solicitado por los propietarios de blogs en blogger.


Caja Pop Up "me gusta" de facebook para blogger


pop+up+facebook+xanateach.JPG


PAGINA PRUEBA



Pasos para agregarlo:

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


HTML:
<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%2FEstatriste%2F186903574749125%3F&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>

DEBEN CAMBIAR http%3A%2F%2Fwww.facebook.com%2Fpages%2FEstatriste%2F186903574749125%3F por el link de su FANS PAGE


Bueno espero que les sea de utilidad. cualquier cosa no duden en comentar y con mucho gusto los ayudo.

Saludos
 
Última edición:
Buen trabajo, una duda, esta caja sigue saliendo en sus próximas visitas al usuario o solo una vez? Saludos.
 
Buen trabajo, una duda, esta caja sigue saliendo en sus próximas visitas al usuario o solo una vez? Saludos.

Buena pregunta. a mi me sale solo la primera vez... para darme cuenta si funcionaba abría el navegador de manera Anonima (si usas chrome es control+shit+N) y asi supe que estaba activo.
 
Ya revise el código y trabaja con cookies, casi al final se puede modificar la duración de esta, saludos.
 
Agregado al listado de tutoriales de blogger.
 
funciona en wordpress? se puede poner? donde e
se pondria y como saludos?
 
es algo muy molesto eso.

Quizás a algunos les parezca molesto si visitan muchas paginas con ese script, lo bueno es que solo aparece una vez ya que trabaja con cookies para que el usuario cuando vuelva a visitar la pagina no le salga. el resto todo normal.

Yo lo recomiendo como un método muy bueno para aumentar los seguidores en una fans page, sobre las visitas te puedo comentar que no disminuyen por esto. Ganas seguidores reales.
 
Gracias lo probrare 2 dias aver si resulta.....
 
Buen tutorial 😀 Se Agradece el aporte :d :encouragement:
 
UFF excelente amigo gracias me ayudaste mucho una duda puedes explicarme como hacer eso del tiempo en el que tiene que salir??? :encouragement:
 
lo probare a ver que tal funciona!
 
Dime ahi mismo puedo puedo colocar un adsense en la parte de abajo ?
o un smowtion ?
 
Dime ahi mismo puedo puedo colocar un adsense en la parte de abajo ?
o un smowtion ?

eso es ilegal de acuerdo a las políticas de Adsense. No lo hagas, o pro lo menos no lo divulgues.
 
Buen aporte amigo, gracias.
 
Dime ahi mismo puedo puedo colocar un adsense en la parte de abajo ?
o un smowtion ?

Con adsense es ilegal, con smowtion lo he visto y no he escuchado el primero que ha tenido problema con esto.
 
en ocasiones esa ventana llegar a ser muy molesta y los usuarios como ven que salen ese tipo de ventana creen ellos que son virus y ya o vuelven a tu pagina. Pero se agradece :encouragement:
 
en ocasiones esa ventana llegar a ser muy molesta y los usuarios como ven que salen ese tipo de ventana creen ellos que son virus y ya o vuelven a tu pagina. Pero se agradece :encouragement:

Si es usuario frecuente de tu web el script solo le aparecerá una sola ip ya trabaja con cookies... si es nuevo tienes la oportunidad de que este se afilie a tu fans page y sea seguidor de la pagina 😉
 
Muchas gracias por el aporte hacia tiempo que buscaba algo así para mi blog. 🙂
 
Atrás
Arriba