Como adaptar el script del Chat Despleglable de ForoActivo

La gente lo esta flipando ultimamente con los scripts que salen para los foros que se crean gracias a foroactivo.

Habra algunos que tambien adaptan scripts para su propio uso en algun foro, pero no lo publican, y yo soy de esos. Pero supongo que tengo tiempo para escribir este mini tutorial para utilizar todos los chats que puedas poner en foroactivo con el plus de que sea desplegable.

No voy a enseñar a poner un chat, si no la forma de hacerlo para poner cualquier chat.

El tutorial de donde saco los codigos y los "adapto" es este:  Asistencia.Foroactivo.com

El uso que hace es crear un iframe flotante que se abre al hacer click en la imagen tambien flotante.
Asi que basicamente, lo que vamos a hacer es poner el script de alguna pagina como xat.com, 99chats.com, chatango.com (en este la explicacion requerira ademas una cuenta de blogger) y demas en un pagina html, y luego configurar el script para que en vez de recoger la pagina del chatbox, recoja la de tu nuevo chat.

Lo primero, sera crear la cuenta correspondiente del chat que queramos usar.

Luego, si vamos a utilizar cualquier sistema (chatango mas abajo), nos vamos a nuestro foro, e inciamos sesion en el Panel de Administracion.

Una vez alli, nos vamos a la pestaña "Modulos", y en la misma, en el recuadro " HTML & JAVASCRIPT", entramos en "Gestion de las paginas HTML".

Cuando estemos dentro, hacemos click en crear una pagina nueva en modo avanzado HTML.

Alli, incluyes el codigo del chat que se te proporciono. Repito, Chatango mas abajo, no se porque no lo acepta Foroactivo, pero con un par de trucos se puede.

Cuando este, lo guardamos y nos volvemos a la gestion de paginas HTML, para copiar el enlace.

En realidad, lo que necesitamos del enlace, es solo la parte despues del primer /. Por poner un ejemplo:

http://foro.foroactivo.com/h1-xat

La parte en verde es la necesaria para el proceso.

Ahora, nos vamos a la gestion de codigos javascript, para crear el nuestro personalizado:

//Inicio variables a editar por el usuario
var imagen_chatbox_desplegable = "http://i45.servimg.com/u/f45/17/45/19/77/chat10.png";
var posicion_chatbox_desplegable = "derecha"; //Admite también 'izquierda'
//Fin variables a editar por el usuario

        document.write("<div id=\"chatbox_ret_cont\" class=\"chatbox_" + posicion_chatbox_desplegable + "\">");
        document.write("    <div onclick=\"(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); jQuery('#chatbox_ret').toggle('normal');\">");
        document.write("        <span id=\"chatbox_ret_online\">");
        document.write("            <img title=\"Abrir o cerrar el Chat\" src=\"" + imagen_chatbox_desplegable + "\">");
        document.write("        <\/span>");
        document.write("        <span id=\"chatbox_ret_offline\"><\/span>");
        document.write("    <\/div>");
        document.write("    <iframe src=\"\/chatbox\" id=\"chatbox_ret\" name=\"chatbox_ret\" ");
        document.write("       scrolling=\"no\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"1px\"");
        document.write("       onload=\"if(cb_new){cb_start();cb_new=0;}\">");
        document.write("    <\/iframe>");
        document.write("<\/div>");

¿Veis la palabra "chatbox" que he coloreado de rojo? Eso lo tendras que sustituir por lo que copiaste antes. Unicamente eso.

Y voila. Ya tendreis ese chat en forma desplegable. Ojo, lo mas probable es que no te quede ajustado porque el codigo usado en el tutorial del foro da un CSS con un alto y ancho predeterminado, pero puedes cambiarlo asi:

      #chatbox_ret_cont{
         x-index: 10000;
         z-index: 10000;
         background-color: transparent;
         position: fixed;
         bottom: 0;
        }
        #chatbox_ret_cont.chatbox_derecha{
          right: 0;
        }
        #chatbox_ret_cont.chatbox_izquierda{
          left: 0;
        }
        #chatbox_ret_cont div{
          cursor: pointer;
        }
        #chatbox_ret_cont iframe#chatbox_ret{
          background-color: white;
          border: 2px solid grey;
          display: none;
          height: 450px; /* AQUI CAMBIA EL ALTO */
          margin-bottom: 0;
          width: 900px; /* AQUI CAMBIA EL ANCHO */
        } 

Y listo, cambialo a tu gusto para ajustarlo.

Para poner un chat de Chatango desplegable en Foroactivo, lo primero sera crear el chat, y cuando tengas el codigo, copialo.

Lo siguiente, entra en www.blogger.com, create una cuenta o si ya la tienes, crea un blog, solo servira para esto.

Una vez lo tengas creado, te vas a la seccion "Plantilla", y haciendo click en "Editar HTML" haces uso de tu raton o de Ctrl+A para seleccionar todo el codigo que se te muestra para borrarlo.

Una vez borrado, metes este:

<!DOCTYPE html>
<html>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
      -----------------------------------------------
       Plantilla en blanco
      ----------------------------------------------- */ 
      body {margin: 0;} /* Deja el documento sin márgenes */  
      #navbar {display: none;} /* Oculta la navbar */      
    ]]></b:skin>
  </head>

  <body>
    <b:section id='main' showaddelement='yes' />  
  </body>
</html>

Y haces uso de "Guardar Plantilla".

 Una vez esta guardado, te vas a la pestaña "Diseño", y alli veras una unica seccion para añadir Gadgets. Añades uno "HTML/Javascript", sin titulo, y dentro pones el codigo de chatango. Lo guardas, y listo.

Y ahora volvemos un poco mas arriba, para seguir el tutorial normal, pero en vez de añadir el codigo del chat, añadimos este:

<iframe style="width: 100%; height: 100%;" name="Iframe" src="URL DEL BLOG" frameborder="0" scrolling="no"></iframe>

Y alli donde pone URL DEL BLOG en color rojo, lo sustituyes. Pegas ese codigo, y haces lo mismo de copiar la parte despues del "/" y ponerlo en el script, como se explica arriba para los xats normales.

A mi personalmente no me gustan estos chats porque una vez se vuelve a cerrar, es como si se reiniciara la pagina, pero oiga, para gustos, colores, mientras foroactivo no ponga sonido en los chats, ahi nos quedan estos trucos.

Tutorial probado en: PunBB, pero funcionando en todos.

Si tienes alguna duda: COMENTAMELA, podria ayudarte asi.

Ala, a disfrutar.

Categories: chat , Foroactivo , HTML , javascript