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:

Scrip Like box de facebook

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="http://www.google.com/jsapi">

</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="Mututoriales",
 kakinetworkdotcom01title="Hazte Fan!",
kakinetworkdotcom01time="4",
 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>

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.
Like_Box.rar [2 KB]

¿Necesitas ayuda? Visita www.iceventas.com y nosotros lo hacemos por ti.

Se han publicado un total de 8 comentarios en Mu Online Tutoriales :

6 de diciembre de 2013, 21:17

Como podria editar la imagenes y eso de dond dice Siguenos en facebook por otra o que los Megustas le llegue al Facebook de la persoona

6 de diciembre de 2013, 21:39

rosember : La ruta de la imagen no se puede modificar a menos que:
Extraigas el .js linkeado externamente y modifiques la ruta por la deseada.
Saludos

26 de enero de 2014, 17:36

yo tengo en mi web un siguenos en facebook pero kiero agregarle la url de mi comunidad de FB como puedo hacerlo agradesko la ayuda

27 de enero de 2014, 9:45

luis ricardo fernandez herrera : Modifica la ruta por la deseada.
Saludos

21 de agosto de 2014, 20:55

donde se modifica la ruta por la deseada amigo se un poco mas especifico gracias..

22 de agosto de 2014, 9:49

Carlos : Esta explicado en la guia, ¿La has leido completa?
Saludos

15 de octubre de 2014, 8:14

Que seria la etiqueta ?

15 de octubre de 2014, 9:39

Anónimo : Sería el cierre del head sólo que el sitio interpreto la etiqueta, ya fue reparado el tutorial.
Saludos

Publicar un comentario en la entrada