LikeBox en ventana PopUP

Bienvenidos a un nuevo tutorial, hoy veremos como lanzar en una ventana Pop-Up nuestra "Fan Page" de facebook.
En la actualidad la interacción con las distintas redes sociales, como por ejemplo: Facebook, Twitter, etc. es fundamental para publicitar nuestro servidor MuOnline para que este se comparta con nuevos usuarios.



Lo que necesitamos para realizar este tutorial es:
a)Una fan page o página de Facebook ya creada
b)Una página web con acceso total (Ya que sino tienen acceso al root de la web, dificilmente podrán hacer algun tipo de modificación)
c)Lectura comprensiva.

Veamos un ejemplo del trabajo terminado:



1)Lo primero que debemos hacer es ingresar al index.php de nuestro sitio web.
Una vez dentro buscamos la etiqueta </head> y arriba de la misma copiamos el siguiente código diseñado por kakiheboh:

<style type="text/css">
#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: 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>
   
<script type="text/javascript" src="https://www.google.com/jsapi">

</script><script type="text/javascript">
google.load("jquery", "1");
</script><script type="text/javascript" src="https://connect.facebook.net/es_LA/all.js#xfbml=1">

</script><script type="text/javascript">
 kakinetworkdotcom01username="Mututoriales",
 kakinetworkdotcom01title="Hazte Fan!",
kakinetworkdotcom01time="4",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="es"
</script><script type="text/javascript" src="https://espacioforos.miarroba.st/1924848/webmastercv/popupfb.js">

</script><script type="text/javascript">
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
</script>

2)Antes de guardar los cambios, lo primero que deben modificar es el valor de la variable

kakinetworkdotcom01username="Mututoriales",

Lo que deben hacer alli, es modificar "Mututoriales" por el nombre de nuestra página de Facebook
Y luego el contenido de la variable:

kakinetworkdotcom01time="4",

hace referencia al tiempo en el que la ventana se cerrará automáticamente, en este caso; 4 segundos.
Ustedes pueden modificar ese valor por el deseado.
Ahora si cerramos el archivo, guardamos cambios y verificamos.

Este código funciona al día de la fecha y dichas librerias fueron revisadas. Esto no implica que más adelante o luego de un tiempo el host en donde se alojan deje de funcionar o las mismas sean modificadas sin aviso previo.
En estos casos, lo que le recomendamos es descargarlas, y hacer un src. interno.

Espero que les sirva.
Recuerden que si tienen alguna duda pueden dejar su comentario o escribirnos a través de nuestros canales de comunicación.
Será hasta el próximo tutorial asd*

Con tu donación ayudas a mantener el sitio activo