Tutorial: Cómo crear un simulador de chat de Facebook en tu sitio web sin necesidad de programar

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio
Cicklow

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Buenas, en esta ocasión aprenderemos a crear un simulador de chat (facebook) para nuestros sitios webs.

Vale aclarar que no tendrán que programar nada, solo colocar códigos en sus respectivos lugares, configurar los textos y el script que programe trabajara solo.

Lo que logramos con esto es que cuando el usuario haga clic en el chat, se abre una ventana con la url antes configurada.

Pueden ver un ejemplo en esta web:
HTML:
http://www.cicklow.com/FChat/
Descarga:
HTML:
http://www.cicklow.com/FChat/FChat.rar

Colocar entre <head> y </head>
HTML:
<link rel='stylesheet' href='style.css?v=1' type='text/css' media='all' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='config.js?v=1'></script>
<script type='text/javascript' src='script.js?v=2'></script>

Después de <body>
HTML:
<div id="fb-root"></div>

Antes de </body>
HTML:
<div id="chat_face_panel" class="chat_face_style_FL"><img src="img/chat.gif"><div id="chat_face_dialog_from"><img src="img/online.gif" style="display:inline"> <font color="#ffffff"><b>#QUIEN#</b></font></div><div id="chat_face_dialog_text"><p>#IMAGEN##TEXTO#</p></div><img id="chat_face_panel_close_FL" src="img/blank.png"></div>
(Este texto no lo editen, solo agréguenlo al final.)

Ahora las opciones son (config.js):
Url destino (al hacer click en el chat, se abre una ventana con esta url)
HTML:
var _URL = 'http://www.google.com.ar'; //Url Destino

Mensaje del chat (#NOMBRE es una variable, significa el nombre del usuario logeado en facebook), pueden usar html
HTML:
var _TXT = 'Hola #NOMBRE#<br/>Mensaje bla bla bla 1<br/>Mensaje bla bla bla 2<br/>Mensaje bla bla bla 3<br/>Mensaje bla bla bla 4';

Nombre de la persona que les escribe (virtualmente)
HTML:
var _NOM = 'Esica Romero';

Imagen de la persona que les escribe
HTML:
var _IMG = 'http://profile.ak.fbcdn.net/hprofile-ak-ash2/370855_1602586368_952994566_q.jpg';

ID de la aplicación en facebook:
HTML:
var _APPID = 'ID_APP';

Y tendremos esto:
2csf98y.jpg


Vale aclarar que si el usuario no esta logeado en facebook, aparece "Usuario" en lugar del nombre que usa en facebook!
 
Última edición:
Perdon por la inocente pregunta pero ¿esto para que sirve exactamente?
 
Perdon por la inocente pregunta pero ¿esto para que sirve exactamente?

Lo que logramos con esto es que cuando el usuario haga clic en el chat, se abre una ventana con la url antes configurada.
 
Para charlar con los visitante de los blog
 
Ok, tenia esa duda, en realidad no es un chat activo, simplemte un "engaño" para re dirigir a las visitas a otra URl.

Muchas gracias
 
Para charlar con los visitante de los blog

Es un simulador, le hace creer al usuario que le están hablando y cuando el usuario hace clic en el chat se abre un popup con la url que configuramos.
 
Esta muy bueno, gracias
 
Cicklow, se agradece el aporte. El usuario debe tener "bajas" las políticas de privacidad? porque he probado estando logueado en facebook y no me ha funcionado.

Para facebook, ¿esto es 100% legal?

Saludos
 
Cicklow, se agradece el aporte. El usuario debe tener "bajas" las políticas de privacidad? porque he probado estando logueado en facebook y no me ha funcionado.

Para facebook, ¿esto es 100% legal?

Saludos

Pero aparece el chat?

Es como las publicidades que aparecen que simulan un nuevo mensaje o esas cosas. No hay problema alguno.
 
Pero aparece el chat?

Es como las publicidades que aparecen que simulan un nuevo mensaje o esas cosas. No hay problema alguno.

Si el chat aparece, pero no me aparece el nombre del usuario logueado, solo me aparece "Usuario".
 
Intenta aca: Enlace eliminado

Gracias por el tutorial. El nombre que a mí me sale es Esica Romero que evidentemente no es el mío.. Y en esta url que pasas de último no siquiera me sale el cuadro de chat. Pero está muy bueno la verdad que sí, muchas gracias.. :encouragement:
 
Gracias por el tutorial. El nombre que a mí me sale es Esica Romero que evidentemente no es el mío.. Y en esta url que pasas de último no siquiera me sale el cuadro de chat. Pero está muy bueno la verdad que sí, muchas gracias.. :encouragement:

Esica Romero es la persona que te habla... Eso se modifica.
La ultima url es raro que no aparezca ya que lo e testeado en:
Firefox 13
Chrome 19
IE 9


Y funciona en todos...
 
Esica Romero es la persona que te habla... Eso se modifica.
La ultima url es raro que no aparezca ya que lo e testeado en:
Firefox 13
Chrome 19
IE 9


Y funciona en todos...

En la segunda url directamente no abre la ventana del chat.

Sera que se debe autorizar la api?

Saludos
 
Por aquí yo tengo un software que hace la misma función, pero el chat no es con el estilo de facebook, cuando pueda lo publico.

Y gracias por tutorial :encouragement:
 
Ahora aparece? (sino aparece la 1° vez actualiza)

Ahora si aparece, pero con "Hola Usuario", igual que en el primer caso. Sera por las políticas de privacidad de mis cuentas facebook?
 
Ahora si aparece, pero con "Hola Usuario", igual que en el primer caso. Sera por las políticas de privacidad de mis cuentas facebook?

Sisi, es que si el user no agrego la aplicacion no aparece el nombre... ¬¬' pense que era publico... pero parece que no jajaja...
 
Muchas gracias por el aporte are el experimento con una web
 
Atrás
Arriba