Tutorial: Chat Facebook en tu web (Simulador)

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
82
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
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
82
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.900
Edad
32
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
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
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
82
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.
 

IGNACIO

VIP
Mi
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
7 Dic 2011
Mensajes
3.210
Esta muy bueno, gracias
 

SapoPepe

Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2010
Mensajes
335
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
82
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
335
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
82
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...
 

Cargando

Épsilon
Verificación en dos pasos desactivada
Desde
1 May 2012
Mensajes
886
Gracias por compartir :encouragement:
 

SapoPepe

Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2010
Mensajes
335
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.899
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
82
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...
 

Christian Flores

Épsilon
SEO
Verificación en dos pasos desactivada
Desde
15 Nov 2011
Mensajes
884
Muchas gracias por el aporte are el experimento con una web
 

Arriba