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

JuanDRomero · 24 Abr 2012

Post modificado, coloque el enlace en html

miirkoo · 16 May 2012

JuanDRomero dijo:
Post modificado, coloque el enlace en html

Compra, creo que sigues teniendo el mismo problema con las imágenes ._.
Saludos ^^

malonso · 21 May 2012

Gracias, lo probare para ver que tal esta

Franklin · 29 May 2012

Muy bueno tu tutorial se te agradece

infrases · 1 Jun 2012

Bueno.. este asunto es muy bueno pero para cierto tipo de público. Realmente no todos los públicos consideran elementos como éste una buena opción. Creo que debemos ofrecer mejores contenidos y menos molestias al usuario del sitio.

Es mi pensar, pero si quien lo esté usando le funciona... excelente.. ojalá os vaya bien siempre!

Rs2pro · 20 Jun 2012

Acabo de ponerla

saludyenergia · 24 Jun 2012

Siguen los problemas con las imágenes...

- - - Actualizado - - -

ok ya encontre las url de las imágenes solo busquen en google la frase "Facebook Likebox popup For Blogger" y encontrarán varias sugerencias yo encontré el script en una web que se llama algo así spyce up your blog, no agrego los enlaces porque no se si esta permitido

serra2012 · 30 Jun 2012

al fin lo encuentro!

gracias por compartir, ya lo implemento en mi web, saludos!

dagvor · 13 Jul 2012

Realmente muy útil, lo probaré.

pieroski · 25 Jul 2012

Como puedo resetarlo para que les aparezaca a todos de nuevo, cada cierto tiempo?

webbber · 2012-08-21T12:16:53-0500

donde se agrega el codigo? en antes de cerrar BODY o despues de abrirla?
porque me dicen que un gadget

- - - Actualizado - - -

este es mas facil> http://www.exeideas.com/2012/03/how-to-add-pop-up-facebook-like-box-for.html

s0rk · 2012-08-25T06:30:01-0500

Lo acabo de añadir a mi blog

lo que pasa que a mi la X de cerrarlo con mi pc no me sale... me gustaria saber a vosotros si os sale la X pa cerrar

Enlace eliminado

edit: Lo quitado de mi blog.. no se por que.. la X sigue sin salirme para cerrar

libreman · 2012-08-25T22:58:59-0500

gracias por el tuto lo probaré en uno de mis sitios

fraani · 2012-08-26T00:25:37-0500

lo voy a probar compañero, gracias :sorrow:

JuanDRomero · 2012-08-27T18:16:16-0500

He corregido algunas cosas, a a alguno no les funciona?

s0rk · 2012-08-28T10:59:59-0500

Juan buenas
Por que en mi blog cuando lo pongo.. no sale por ningun lado la '' X '' para poder cerrar la ventanita??? saludos

mkal · 6 Sep 2012

Gracias por la info!

Aunque tuve que googolear un poco para ponerlo como se debe...

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_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/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_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/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='http://ajax.googleapis.com/ajax/libs/jquery/1.5/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">Danos un like y mantente actualizado de nuestros aportes<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%2Flacuartad&amp;width=300&amp;colorscheme=light&amp;show_faces=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>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.spiceupyourblog.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

1. Colocarlo en un gadget Html
2. Si ya tienes alguna version de jquery quitar esta linea para evitar complicaciones entre versiones:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
3. Cambiar lacuartad de color rojo por tu nick de fanpage en el siguiente texto:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flacuartad&width=300&colorscheme=light&show_faces=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>

espero les ayude... :welcoming:

Enlace eliminado

Obviamente debes tener hecho tu fanpage en el blog!

Baico · 6 Sep 2012

[MENTION=21665]mkal[/MENTION] me sale este mensaje: Could not retrieve the specified page. Please verify correct href was passed in.

Pulsar · 6 Sep 2012

Ajajaa! acabo de comprar un blog de blogger bastante barato solo para enviarle trafico y poner el script y asi llenar de me gusta algunas paginas. Justo pensaba en el codigo y veo el post en el inicio. MIL GRACIAS.

Si algo no me funca, vuelvo a pedir ayuda aqui.

s0rk · 6 Sep 2012

hay un problema..

si lo pongo sin quitar el codigo <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

el slider de mi blog y algunas cosas no funcionan...

y si quito el codigo <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

directamente no sale la ventanita del boton facebook me gusta

saludos !! espero tu respuesta crack

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

s0rk

s0rk

s0rk