Fan Page y Boton Me Gusta de Facebook en PopUp

Publicado el 17 de Agosto, 2012. 12:10:09 en Webmasters
Facebook se ha convertido sin duda en un lugar para atraer trafico a nuestros sitios webs, facebook ha lanzado muchas herramientas utiles para los webmasters, pero la mas utilizada hoy en dia es el Box de fan page y el mod de comentarios.Esta publicacion es de infokgeek.com
En esta ocacion les traigo un codigo para poner el boton me gusta o nuestro fan page en un popup para que la gente al ingresar a nuestro sitio se haga fan.
Esta publicacion es de infokgeek.com
Hay dos maneras para hacerlo, una es poniendo el codigo y que se muestre cada vez que entra un usuario, y el otro sistema es con Cookies para que se muestre el popup una vez sola por persona.
Esta publicacion es de infokgeek.com
Antes que nada copien el codigo css, es para darle color al box y al popup.

<style type="text/css">
#fblikepop {
   background-color: #fff;
   display: none;
   position: fixed;
   top: 200px;
   _position: absolute;
/* hack Para 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;
}
/* InfokGeek.com */
#fblikebg {
   display: none;
   position: fixed;
   _position: absolute;
/* hack Para 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: 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: 11px !important;
   font-weight: normal !important;
   margin: 5px 0 0 0;
   text-align: right;
   line-height: 16px;
}
</style>


Y ahora vamos con el script que hace funcionar al popup.

Sin Cookies, se mostrara cada vez que alguien ingrese a nuestro sitio:

 
<script src="http://www.google.com/jsapi" type="text/javascript">
</script><script type="text/javascript">
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">
 kakinetworkdotcom01username="infokgeek",
 kakinetworkdotcom01title="Hazte Fan!",
kakinetworkdotcom01time="15",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="es"
</script><script type="text/javascript" src="http://espacioforos.miarroba.st/1924848/webmastercv/popupfb.js">
</script><script type="text/javascript">
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
</script>

Con Cookies, se mostrara solamente una vez por persona.


if(!isset($_COOKIE['desa12'])){
setcookie('desa12',1,time()+86400);

echo'<script src="http://www.google.com/jsapi" type="text/javascript">
</script><script type="text/javascript">
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">
 kakinetworkdotcom01username="infokgeek",
 kakinetworkdotcom01title="Hazte Fan!",
kakinetworkdotcom01time="15",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="es"
</script><script type="text/javascript" src="http://espacioforos.miarroba.st/1924848/webmastercv/popupfb.js">
</script><script type="text/javascript">
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
</script>';
}

El Script fue sacado de Webmastercv y fue modificado por InfokGeek.
5 Comentarios Fan Page y Boton Me Gusta de Facebook en PopUp
  1. tommynrh dijo:

    hola amigo exelente tuto pero donde devo colocar el script para hacer funcionar el popup

  1. cruzito dijo:

    Hola tommy, yo siempre lo uso antes del cierre de la etiqueta

  1. cruzito dijo:

    la etiqueta < /body >

  1. juan dijo:

    buenas!! Consulta como hago para agregar el codigo al fan page? espero respuesta y Gracias!!!1

  1. cruzito dijo:

    Hola juan, este codigo es para tu sitio web o blog, solamente tienes que agregar el user de tu FanPage a esta linea del codigo kakinetworkdotcom01username="infokgeek", En este caso el user de mi FanPage es infokgeek Saludos!