Tutorial: Chat Facebook en tu web (Simulador)

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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:


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

Dseda
Programador
Verificación en dos pasos desactivada
Desde
16 Jun 2009
Mensajes
1.247
Edad
43
Crédito(s)
0
Puntos
64
Perdon por la inocente pregunta pero ¿esto para que sirve exactamente?
 

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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

No recomendado
Redactor
Verificación en dos pasos desactivada
Desde
17 Sep 2011
Mensajes
2.898
Edad
31
Crédito(s)
2
Puntos
390
Para charlar con los visitante de los blog
 

budha

Dseda
Programador
Verificación en dos pasos desactivada
Desde
16 Jun 2009
Mensajes
1.247
Edad
43
Crédito(s)
0
Puntos
64
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
 

IGNACIO

VIP
Mi
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
7 Dic 2011
Mensajes
3.196
Crédito(s)
9
Puntos
347
Esta muy bueno, gracias
 

SapoPepe

Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2010
Mensajes
330
Crédito(s)
2
Puntos
132
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
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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 desactivada
Desde
8 Ago 2010
Mensajes
330
Crédito(s)
2
Puntos
132
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".
 

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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 desactivada
Desde
8 Ago 2010
Mensajes
330
Crédito(s)
2
Puntos
132
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
 

quimbox

VIP
Zeta
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
22 Mar 2012
Mensajes
1.809
Crédito(s)
1
Puntos
221
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
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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...
 

Arriba