Magazine

Ventana Pop Up de Facebook con Contador de Tiempo

Publicado el 28 noviembre 2013 por Aizum Blog @aizumblog
Ventana Pop Up de Facebook con Contador de Tiempo
Después de un tiempo sin publicar nada, he decidido postear este artículo que puede ser de interés para muchos usuarios de este blog, hablo de un gadget, con una ventana pop up de Facebook, para que tus usuarios de tu blog o web, puedan hacerse fan de tu página web o blog en Facebook y recibir así tus entradas y actualizaciones a través de Facebook. El widget del que escribo, trata de una ventana pop-up que surge de la nada, al ingresar en dicha página, que tenga instalado este gadget, en su plantilla. La ventana Pop-Up de Facebook, tiene un contador de tiempo con una cuenta atrás, al pasar ese tiempo, se cierre automáticamente, sólo. El widget lo he modificado a mi gusto, porqué estaba en el lenguaje universal anglosajón y lo he modificado al idioma, Español. Abajo la demo!
Demo!

Una vez vista la demo, de la ventana pop-up de Facebook, con contador de tiempo, si te gusta el artilugio, más abajo te explico detalladamente de cómo instalarlo.
Añade el siguiente código insertando un gadget en Blogger:
<style>#fblikepop {
    background-color: #fff;
    display: none;
    position: fixed;
    top: 200px;
    _position: absolute;
 /* hack for IE 6*/
    width: 480px;
    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: 80%;
}
.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: 800%;
    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: 14px !important;
    font-weight: normal !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", 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: 16px !important;
    font-weight: normal !important;
    margin: 5px 0 0 0;
    text-align: right;
    line-height: 28px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/es_LA/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
 kakinetworkdotcom01username="AizumBlog",
 kakinetworkdotcom01title="Síguenos en Facebook!",
 kakinetworkdotcom01skin="http://1.bp.blogspot.com/-idL1ie8MNRI/UmDevMUWulI/AAAAAAAAPsw/I7fWzG5eXIY/s1600/siguenos_facebook.png",
 kakinetworkdotcom01time="45",
 kakinetworkdotcom01wait="9",
 kakinetworkdotcom01lang="es"
//]]>
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/48457927/FBMeGutsaPopUpDeAizumBlog.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
 jQuery(document).ready(function(){jQuery().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Instrucciones y pasos a seguir para modificar algunos códigos:
  1. Cambia el username o el nombre de tú página de Facebook por la página de fans del tuyo: kakinetworkdotcom01username="Aquí_Tu_Username",
  2. Cambia el título: kakinetworkdotcom01title="Síguenos en Facebook!",
  3. Cambia la imagen del gadget: kakinetworkdotcom01skin="Url-Imagen",
  4. Cambia el segundero de espera: kakinetworkdotcom01time="45",
  5. Cambia el segundero del gadget para ordenar al widget el tiempo que quieres para que aparezca: kakinetworkdotcom01wait="9",


Eso es todo, espero que os guste está ventana pop-up de Facebook, para vuestra página web o blog, si tenéis alguna duda comentar, sois bienvenidos, responderé con la mayor brevedad posible. Sí deseáis, no os olvidéis de hacer clic en los banners de publicidad, es la única manera de agradecer y contribuir económicamente, para sostener está pagina web. Gracias por su colaboración. Enjoy this!

Get free premium widgets for your blog and website.

Volver a la Portada de Logo Paperblog

Dossier Paperblog