Caja "me gusta" Pop Up de Facebook con contador de tiempo (jQuery)

Si no les funciona la alternativa anterior de la caja me gusta pop up de facebook, entonces prueben con esta otra alternativa que ví en mybloggertricks.

Lo que diferencia esta caja de la otra es que este cuenta con un contador de tiempo; es decir, puedes asignar el tiempo que quieres que la caja pop up se muestre al momento de ingresar a la página. Este gadget contará los segundos, y cuando llegue a 0, automáticamente desaparece.

Ya pudieron haberlo apreciado en este blog de pruebas cuando ingresaron en él.

Este gadget estaba totalmente en inglés, incluyendo la imagen, así que he cambiado el idioma, la imagen, el botón me gusta y algunos códigos.

Para agregar este gadget, sigue estos pasos:


1) Nos vamos a Blogger > Diseño > Edición de HTML

2) Buscamos ahora por la siguiente etiqueta:

</body>

3) Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<script type='text/javascript'> //<![CDATA[ KNFBFansPRO='NOMBRE-DE-USUARIO-DE-TU-PAGINA-FAN' //]]> </script> <style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;} #fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;} .fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;} #fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;} #fblikepop #closeable{float:right;margin:7px 15px 0 0;} #fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;} #fblikepop #actionHolder{height:30px;overflow:hidden;} #fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;} #fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;} #fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;} #fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;} #fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src='http://connect.facebook.net/es_ES/all.js#xfbml=1' type='text/javascript'/> <script src='http://bloggeame-blogger.googlecode.com/files/FanBox.js' type='text/javascript'/> <script language='javascript'> //<![CDATA[ $(document).ready(function(){ $().KNFBFansPRO({ timeout: 25, wait: 0, url: 'http://www.facebook.com/NOMBRE-DE-USUARIO-DE-TU-PAGINA-FAN', closeable: true }); }); //]]> </script> <div id='fbtpdiv'/>

4) Para finalizar, necesitas hacer los siguientes cambios:

>  Lo que está sombreado de amarillo NOMBRE-DE-USUARIO-DE-TU-PAGINA-FAN , lo reemplazas por el nombre de usuario de tu página de fans de facebook 2 veces.

> Si ya tienes el script de la librería jQuery, entonces no coloques lo que está sobreado de color verde.

> Lo que está de color rojo:

25: Es el tiempo que durará la caja pop up en mostrarse.

0: La caja por defecto aparecerá inmediatamente después de que el visitante ingrese a tu página. Si deseas que este gadget aparezca después de 1 minuto ó más, edita el 0 de color rojo.

5) Hecho estos cambios, guarda los cambios de tu plantilla y eso es todo. :)

Imprimir artículo