Facebook Comment Box

21/07/2009Facebook Comment Box

Posteado por admin en Uncategorized

Hoy les comento un poco de Facebook Comment Box, es un widget para tu web (con Facebook Connect) o para tus aplicaciones. Es una forma simple y rápida de poner un sistema de comentarios donde quieras. También podés publicar tu comentario en tu muro por lo que es una excelente método de hacer conocer tu sitio o aplicación.

Para añadir una “Comment Box” a tu sitio, todo lo que necesitas es :

1) Obtener una “API Key”
2) Agregar un archivo a tu sitio ( http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel )

Debajo está el contenido del archivo xd_receiver.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title> 
</head>
 <body> 
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body> 
</html>

3) Y unas pocas líneas de código en la página donde estará el widget.

Cambiar el tag

<html>

por

1	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Y este código donde querés que aparezca

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> 
 
<fb:comments> </ fb:comments>
 
<script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "<path from web root>/xd_receiver.htm"); </script>

Eso es todo!

Importante: Si queres poner este widget en una página donde ya estabas utilizando algún script de Facebook Connect que tenga FeatureLoader.js.php y una llamada a FB.init, no es necesario agregar todas estas líneas, solo

1	<fb:comments></fb:comments>

Ejemplo de algunos parámetros que se pueden agregar :

1	<fb:comments numposts="4" title="My Blog Comments" css="http://www.yourwebsite.com/css/comments.css?1234" simple="1"></fb:comments>

Más info acá :
http://wiki.developers.facebook.com/index.php/Comments_Box
http://wiki.developers.facebook.com/index.php/Fb:comments_(XFBML)

Ejemplo en funcionamiento!:

Les dejo un video de la gente de Facebook

How To: Create a Comments Box with Facebook Connect in 5 Minutes

Saludos!

52 Respuestas a “Facebook Comment Box”

23/07/2009 a las 1:39 PM Allan Odreman dice:

men no podrias poner en otro host este archivo necesario o incluso pasarmelo por msn? resulta q la pagina me sale en blanco al entrar en ella la descarga nunca inicia! noc q pasa! me harias un gran favor
23/07/2009 a las 2:06 PM admin dice:

Allan!

En el post puse el contenido que tiene el archivo xd_receiver.htm

Copialo en el notepad y guardalo como xd_receiver.htm y listo!

Saludos!
23/07/2009 a las 6:31 PM Allan Odreman dice:

men noc q pasa!:..algo me esta cagando!
23/07/2009 a las 7:38 PM Allan Odreman dice:

men nada!…no aparece creo q ago algo mal! no podrias de verdad! agregarme al msn! y ayudamer?

25/07/2009 a las 7:38 PM admin dice:

Allan, tu página solo debe tener esto y ya funciona

Solo tenes que ponerle tu API KEY

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<fb:comments></fb:comments>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "xd_receiver.htm"); </script>
</body>
</html>

01/10/2009 a las 2:44 PM Carlos Molina dice:

Tengo problemas, no me funciona bien o mas bien estoy haciendo algo mal y quisiera que me asesoraran: Esta es mi direccion: http://www.novios2000.com/prueba/prueba_face.html pero creo que no si hay que aplicar alguna cosa extra al API KEY al momento de crearlo. Si pueden ayudarme por favor.
01/10/2009 a las 11:23 PM admin dice:

Carlos, probé tu código html con mi “API KEY” y funciona perfecto. Fijate si tu “API KEY” está bien porque quizás pusiste el “Application Secret”. También fijate de chequear la configuración de tu App, anda a “Editar Configuración”–>”Connect” y en “Connect URL” tiene que decir “http://www.novios2000.com/”
02/10/2009 a las 1:00 AM Carlos Molina dice:

Oye excelente!… Muchas gracias amigo!, era eso… Sabes que seria bueno colocar esa nota en el articulo, yo estuve buscando en Internet los pasos para crear un Api Key para este tipo de procesos y no encontre ese detalle. Excelente Articulo amigo, muchas gracias!.
02/10/2009 a las 1:04 AM Carlos Molina dice:

Habria forma de saber o consultar el numero de comentarios por articulo que yo pueda compararlos algo asi como se haria en php que busca el tema con mas comentarios, lo he hecho en php pero soy algo nuevo con esto de las API de FB.
27/10/2009 a las 5:19 PM Daniel Lazarte Ramos dice:

Probando el facebook comment box!
19/02/2010 a las 5:19 PM Juan Kaneko dice:

Les recomiendo http://www.facebookapps.com.ar
09/04/2010 a las 4:30 PM Javier Miana dice:

con este comment box se puede tener uno por cada pagina? identificandolo con un id o algo para cada pagina?

desde ya muchas gracias

saludos
09/04/2010 a las 5:46 PM Javier Miana dice:

intente colocarlo en mi web pero no se muestra en internet explorer y en firefox solo aparece el cuadro publicar pero no el input para insertar el comentario, me fije en la pagina del ejemplo ke figura en el video:
http://www.somethingtoputhere.com/commentdemo/gallery.php?picture=1

y se les muestra bien

pero nose porke a mi no se me muestra correctamente:

http://www.ciberfriends.com.ar/galeria-197_cayo-coco-miercoles-7-de-abril-2010.html
10/04/2010 a las 12:27 AM admin dice:

Javier, primero que nada tenes que crear una aplicación en Facebook y configurarla para que tu sitio pueda utilizar Facebook Connect, esto ya lo hiciste?

Saludos!
10/04/2010 a las 2:55 PM Javier Miana dice:

hola, si esta todo creado, pero nose porke razon no se muestra :S es el unico ke falla porke hasta el live box anda perfecto en otra seccion de mi pagina ke esta junto al fan box
10/04/2010 a las 5:46 PM admin dice:

Chequeá si esta bien escrita tu API KEY , como ves en los comentarios de arriba para algunos ese era el problema. :/
10/04/2010 a las 6:06 PM Javier Miana dice:

hola si ya probe de muchas formas y si esta bien :S es muy raro :S

mira io lo tngo algo asi al codigo

<fb:comments width="800" xid="” numposts=”30″ title=”comentarios “>

FB.init(“72e823a7fa920b64e0b7d1dd09026843″, “xd_receiver.htm”);

10/04/2010 a las 6:09 PM Javier Miana dice:

 
&lt;fb:comments width=&quot;800&quot; xid=&quot;" numposts="30" title="comentarios "&gt; 
 FB.init("72e823a7fa920b64e0b7d1dd09026843", "xd_receiver.htm");

10/04/2010 a las 6:30 PM admin dice:

Pero fijate que en vez del tag html tenes que poner esto :

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

y donde queres poner los comentarios probá con esto, sin ponerle ninguna propiedad al fb:comments :

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> 
<fb:comments> </ fb:comments>
<script type="text/javascript"> FB.init("72e823a7fa920b64e0b7d1dd09026843", "xd_receiver.htm"); </script>

11/04/2010 a las 12:47 AM Javier Miana dice:

parece ke el error puede estar en alguna parte de la configuracion de la aplicacion, porke mira lo eh creado en un archivo vacio sin el contenido de mi web
y no se carga de ninguna forma
http://www.ciberfriends.com.ar/facebook.html

guiame en la configuracion de la aplicacion a lo mejor ahi esta la falla

y desde ya muchas gracias amigo
11/04/2010 a las 1:23 PM admin dice:

Javier, fijate que en la configuración de tu aplicación, en la solapa “Connect” este bien la url de tu web en el item “Conecte la página web”
11/04/2010 a las 5:29 PM Javier Miana dice:

si ta todo bien, estuve anoche revisando codigos y codigos y elimine del .htaccess el codigo para evitar el robo de imagenes de mi web,

y ahora se muestra aveces si y otras no en la parte de las galerias

por lo menos ya es un avance jejej

me parece raro ke ese codigo del htaccess cause conflicto solo con ese codigo
14/04/2010 a las 5:48 PM Movimiento Manuela Ramos dice:

Una consulta hice el procedimiento http://www.manuela.org.pe/prueba33.html pero no me aparece nada
14/04/2010 a las 6:00 PM Movimiento Manuela Ramos dice:

sale en el firefox pero no en el explorer
14/04/2010 a las 6:07 PM admin dice:

Recién acabo de entrar a esa url con FF y IE y veo los comentarios perfectamente!

Saludos!
14/04/2010 a las 6:17 PM Movimiento Manuela Ramos dice:

ya salio, una consulta los comentarios no van a mi muro como hago??
14/04/2010 a las 6:27 PM admin dice:

No es posible que se publiquen en tu muro, lo que podés hacer es que te envíe una notificación. Tenes que hacer click en “Administrar Comentarios” arriba a la derecha del cuadro de comentarios, y luego tildar el checkbox “Inclúyeme” en “Suscriptores a las notificaciones” .

Saludos!
15/04/2010 a las 7:06 PM Movimiento Manuela Ramos dice:

Una consulta como puedeo retirar los cuadros Add comentario, nombre y correo, solo quiero que aparezaca “Connect with facebook”
Gracias.
15/04/2010 a las 9:55 PM admin dice:

Estuve buscando sobre ese tema y no pude encontrar porque aparece especificamente en algunos comments box, algunos dicen que aparece por unos meses, otros que es según el dominio o que tenes que verificar tu cuenta de FB. En verdad aún no encontré la solución para que no te pida esos datos, ni el captcha. Seguiré buscando..

Saludos!
16/04/2010 a las 1:54 PM Movimiento Manuela Ramos dice:

bueno me avisas, porq me ocupa mucho espacio http://www.manuela.org.pe/index33.asp
gracias
16/04/2010 a las 3:03 PM admin dice:

Podrías probar con la opción “Permitir comentarios anónimos” y seleccionar “NO” yendo a la parte de “Administrar comentarios” .
Saludos!

20/04/2010 a las 3:07 PM Javier Miana dice:

amigo te fijaste que ahora cambiaron un poco los codigos? asi aparece en la parte developers

 
 
window.fbAsyncInit = function() {
  FB.init({
    appId: "TU APPID",
    xfbml: true
  });
};
(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());

esto es asi en estos como en los otros codigos ke hay tambien

20/04/2010 a las 3:09 PM Javier Miana dice:

ups we se modifico el codigo que puse pero yendo a la parte
http://developers.facebook.com/tools.php?connect_wizard&wizard=comments

ahi veras los codigos cambiados
20/04/2010 a las 10:38 PM admin dice:

Javier, es verdad parece que ese código es el que se debería poner, igualmente el que explica este post todavía funciona y es el que todavía aparece en la wiki

http://wiki.developers.facebook.com/index.php/Comments_Box
http://wiki.developers.facebook.com/index.php/Fb:comments_(XFBML)
23/04/2010 a las 6:16 PM Movimiento Manuela Ramos dice:

Una consulta tengo una cuenta en el facebook y he creado una pagina de fans en la cuenta como hago para deshabilitar la primera cuenta de amigos para que no sigan agregandose, pero permanecer con la cuenta de fans, espero me puedas ayuda gracias
24/04/2010 a las 3:51 PM admin dice:

mmmm disuclpá pero no entiendo a que te referís con “cuenta de amigos” y “cuenta de fans” ¿?
27/04/2010 a las 2:40 PM Movimiento Manuela Ramos dice:

una consulta se puede invitar seguidores para la página de fans, pero que no sea el boton de “sugerir esta pagina a mis amigos”
28/04/2010 a las 9:56 PM admin dice:

No es posible hacerlo de otra forma ya que sería considerado spam, por eso solo te permiten invitar a tus amigos.
Saludos!
29/04/2010 a las 12:37 PM Movimiento Manuela Ramos dice:

una consulta cuando “mis amigos” se hacen fan lo puedo eliminar de la lista de mis amigos, porque solo actualizo la página de fans, esto no varía en mi lista de seguidores??
29/04/2010 a las 12:51 PM admin dice:

Claro, una vez que se hicieron fans, lo siguen siendo aunque no los tengas más como amigo.
Saludos!
20/05/2010 a las 7:20 PM Gary Adasme dice:

Puedo integrar y probar Comment Box de manera local???
20/05/2010 a las 10:12 PM admin dice:

Mientras tengas conexión a Internet vas a poder.

Saludos!
22/06/2010 a las 2:00 PM Back Door dice:

Hola muy bueno tu tutorial, tengo una consulta.
Ya implemente lo del comment box, pero quisiera saber si hay alguna forma de obtener una lista de todos los comentarios que me dejan. Cuando entro a la configuracion de mi aplicación hay una opción que se llama DataStoreAdmin, y me habla algo sobre el Data Store Api. Como puedo configurar esto o como podría hacer para recuperar los comentarios dejados en mi comment box.
Agradezco de antemano su respuesta
22/06/2010 a las 2:12 PM admin dice:

Hola Back Door,
Fijate que algo similar preguntaron en el Foro, podrías utilizar FQL :
http://www.facebookapps.com.ar/blog/foro/?wpforumaction=viewtopic&t=23.0

Saludos!
22/06/2010 a las 6:20 PM Back Door dice:

HOla Admin,

Revise, lo del foro, pero por ejemplo donde puedo probar esos fql, entre a la seccion de dataStoreAdmin de mi aplicación que cree para tal proposito, luego fui a la seccion FQL Query y coloque la sentencia como decia en el ejemplo y me devolvía a mi home de usuario?

Por otra parte estuve revisando otras paginas y hay una donde incluso muestran que se puede configurar por xid (http://wiki.developers.facebook.com/index.php/Comments_Box) ver imagen de la seccion “Administering Your Comments Box” pero cuando yo veo en mi widget solo me sale “Comments box global settings” y no me aparece ningún id.

Podría indicarme como podría hacer para obtener la lista de comentarios por xid.
Agradezco la ayuda brindada.
Saludos,
24/06/2010 a las 12:23 AM admin dice:
En esta página podes probarlo : http://developers.facebook.com/docs/reference/rest/fql.query

Seleccionas la aplicación que utiliza el fb comments y escribis el query de esta manera:
```
SELECT xid, fromid, time, text, id FROM comment WHERE xid="<tu xid>"
```
En el panel de la derecha te va a mostrar toda la info que te devuelve.

En PHP ejecutas el fql de esta manera :
```
$query = 'SELECT xid, fromid, time, text, id FROM comment WHERE xid="<tu xid>"' ;
$result = $facebook->api_client->fql_query($query);
```
Donde $result es un array que tendrás que recorrer.

Saludos!
18/08/2010 a las 4:35 PM Diego Zaragoza dice:

Hola “admin”, el tutorial me resulto perfecto! Pero tengo una consulta para hacerte:

Estoy haciendo un sitio de noticias y preciso poner el Comments Box debajo de cada nota. Pero necesito un box diferente por cada nota. La pregunta es… ¿Para hace esto tengo que crear una aplicacion diferente por nota?

Sdos, y agradesco tu respuesta.
Abz
18/08/2010 a las 5:04 PM admin dice:
Hola Diego,
No hace falta crear una aplicación por cada nota, para mostrar un comment box diferente para cada una tenes que agregarle el parámetro xid :
```
<fb:comments xid="<un identificador de la nota>" ></fb:comments>
```
El xid puede ser la URL o el ID de la nota o algo que la identifique, si no le seteas el xid te toma la url por default, pero si llegas a cambiar la url no vas a poder ver los comentarios.

Saludos!
19/08/2010 a las 1:09 PM Diego Zaragoza dice:

Muchas gracias!!! me quedo de maravillas!
18/10/2010 a las 1:12 PM Como llevar una pyme a facebook « Tesne Blog 2.0 dice:

[...] se publica automáticamente en su News Feed. Es como llevar el Muro de Facebook a tu propio sitio. En este sitio puedes leer las instrucciones de como implementarlo en la página web de tu pyme. Espero que este post te haya sido [...]
07/04/2011 a las 11:32 AM Ivon Bacaicoa dice:

Todo funcionaba perfecto en los dos blog de Blogger que administro. Al intentar instalara en un 3º, generé una nueva App y por arte de magia desaparecieron lo box de los dos blogs… Qué estoy haciendo mal ? No logro identificar ningún error en la cofiguración y tanto las apps como el código incluído en blogger siguen intactos…
07/04/2011 a las 6:52 PM admin dice:

Hola! Cómo estás agregando el coment box? Con javascript como esta explicado aca?.. Verificaste que la Api key este ok?

Saludos!

Dejar una respuesta

Debes estar logueado para comentar.

21/07/2009Facebook Comment Box

52 Respuestas a “Facebook Comment Box”

Dejar una respuesta

Buscador

COMUNIDAD

Twitter

Importante

Ultimos Comentarios

FoRo

Facebook Cookbook

Facebook Blog

Facebook API News

21/07/2009Facebook Comment Box

52 Respuestas a “Facebook Comment Box”

Dejar una respuesta

Buscador

COMUNIDAD

Twitter

Importante

Ultimos Comentarios

FoRo

Tags

Facebook Cookbook

Facebook Blog

Facebook API News