Tutorial: Caja Pop Up "me gusta" de Facebook para Blogger

JuanDRomero

Eta
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2011
Mensajes
1.461
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




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:

HuGo

Mi
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
21 Ene 2011
Mensajes
3.392
Buen trabajo, una duda, esta caja sigue saliendo en sus próximas visitas al usuario o solo una vez? Saludos.
 

JuanDRomero

Eta
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2011
Mensajes
1.461
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.
 

HuGo

Mi
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
21 Ene 2011
Mensajes
3.392
Ya revise el código y trabaja con cookies, casi al final se puede modificar la duración de esta, saludos.
 

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.341
Agregado al listado de tutoriales de blogger.
 

tzogroup

Delta
Programador
Verificación en dos pasos desactivada
Desde
11 Oct 2009
Mensajes
682
funciona en wordpress? se puede poner? donde e
se pondria y como saludos?
 

frN13

Zeta
Verificación en dos pasos desactivada
Desde
10 Oct 2010
Mensajes
1.808
es algo muy molesto eso.
 

JuanDRomero

Eta
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2011
Mensajes
1.461
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.
 

Jose Canul

1
Pi
Exchanger
Verificado con videollamada
Verificación en dos pasos desactivada
¡Ha verificado su Paypal!
Desde
12 Sep 2011
Mensajes
5.141
Gracias lo probrare 2 dias aver si resulta.....
 

VaMpE

Iota
Domainer
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
22 Feb 2011
Mensajes
2.448
Buen tutorial :D Se Agradece el aporte :d :encouragement:
 

JoseTensei

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
9 Nov 2011
Mensajes
57
UFF excelente amigo gracias me ayudaste mucho una duda puedes explicarme como hacer eso del tiempo en el que tiene que salir??? :encouragement:
 

LuisMorales

1
Pi
Redactor
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
14 Mar 2011
Mensajes
5.761
lo probare a ver que tal funciona!
 
G

Gaberniqo

Dime ahi mismo puedo puedo colocar un adsense en la parte de abajo ?
o un smowtion ?
 

dendurweb

Zeta
Diseñador
Verificación en dos pasos desactivada
Desde
21 Nov 2009
Mensajes
1.507
Buen aporte amigo, gracias.
 

roning

Gamma
Diseñador
Verificación en dos pasos desactivada
Desde
31 Dic 2011
Mensajes
229
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:
 

JuanDRomero

Eta
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2011
Mensajes
1.461
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 ;)
 

HGCM

Iota
Verificación en dos pasos desactivada
Desde
16 Dic 2011
Mensajes
2.394
Muchas gracias por el aporte hacia tiempo que buscaba algo así para mi blog. :)
 

Arriba