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

Cicklow Seguir
Seguidores
14

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
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:

budha

Eta
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
16 Jun 2009
Mensajes
1.411
Perdon por la inocente pregunta pero ¿esto para que sirve exactamente?
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
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.
 

Kenny Johnson

Redactor
No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
17 Sep 2011
Mensajes
2.960
Para charlar con los visitante de los blog
 

budha

Eta
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
16 Jun 2009
Mensajes
1.411
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
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
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.
 

SapoPepe

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Ago 2010
Mensajes
356
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

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
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.
 

SapoPepe

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Ago 2010
Mensajes
356
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".
 
T

trabajosweb

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:
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
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...
 

SapoPepe

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Ago 2010
Mensajes
356
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
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966

quimbox

1
Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
22 Mar 2012
Mensajes
2.340
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:
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
966
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...
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba