Desde el 13 de diciembre de 2011, Facebook ha cambiado su SDK javascript haciendo que muchas aplicaciones de Facebook por javascript dejen de funcionar. Los cambios se refieren a la forma en la que conseguir hacer el login en facebook (que ahora pasan a hacerse por OAuth 2.0).
Este script para ayudar a hacer la conexión más fácilmente ha sido modificado y vuelve a funcionar correctamente, ahora con la nueva conexión y la nueva forma de comprobar los permisos del usuario.
Si ya usabas este código javascript para tu página, simplemente vuelve a descargar el archivo simpleFacebookGraph.js y reemplaza el de tu web.
Hace unos días comentaba la aparición de Facebook Graph API (tambien llamada Facebook OpenGraph) en la que se pone a disposición de todos los desarrolladores la posibilidad de incluir el Javascript SDK para conectarse a Facebook con javascript. Comentaba también que había algunas cosas de este SDK que no acababan de gustarme…
He estado trabajando en un pequeño script por encima de Javascript SDK y quería publicar aquí el resultado. No se trata de una gran aportación, simplemente de un script que ya haga por si solo las funciones más corrientes que podemos querer de Facebook Graph Api y nos permita incluirlas en nuestros sites sin preocuparnos demasiado por el fondo que hay detrás.
Puedes ver el ejemplo funcionando aquí:
Simple Facebook Graph Api Example
¿Qué contiene este ejemplo?
El Ejemplo es un HTML muy sencillo que llama al script que he desarrollado: simpleFacebookGraph.js y que facilita las funciones básicas de Javascript SDK. Con este elemento cargado simplemente se generan tres eventos en la página:
1.- Si el usuario está ya logado en la Aplicación, carga sus datos en la página reemplazando el botón de login por estos.
// Cuando la pagina carga miramos si ya hay un usuario identificado.
fb.ready(function(){
if (fb.logged)
{
// Cambiamos el link de identificarse por el nombre y la foto del usuario.
html = "Hola " + fb.user.name + "
";
html += '
';
html += '';
document.getElementById("conectar_facebook").innerHTML = html;
}
});
2.- Crea la función de login en facebook, y lanza cuando el login se produce el mismo tipo de reemplazo que en el punto 1.
// Funcion para logarse con Facebook.
function login() {
fb.login(function(){
if (fb.logged) {
// Cambiamos el link de identificarse por el nombre y la foto del usuario.
html = "Hola " + fb.user.name + "
";
html += "![](" + fb.user.picture + ")
";
document.getElementById("conectar_facebook").innerHTML = html;
} else {
alert("No se pudo identificar al usuario");
}
})
};
3.- Crea en el link de «Publicar algo en tu muro» la llamada necesaria para hacer la publicación
// Funcion para publicar un mensaje en tu muro
var publish = function () {
fb.publish({
message : "Estoy probando un script para que la gente publique desde mi/s web/s en Facebook",
picture : "http://blog.ikhuerta.com/wp-content/themes/ikhuerta3/images/ikhuerta.jpg",
link : "http://blog.ikhuerta.com/usando-facebook-graph-api-con-javascript-sdk-pero-aun-mas-sencillo",
name : "Simple Facebook Graph Javascript SDK",
description : "Facebook Graph es una nueva forma de conectar tu web Facebook. Con este script es muy fácil conseguirlo :)"
},function(published){
if (published)
alert("publicado!");
else
alert("No publicado :(, seguramente porque no estas identificado o no diste permisos");
});
}
Y con estos tres fragmentos ya se realiza toda la integración con Facebook.
Puedes ver el ejemplo funcionando aquí:
Simple Facebook Graph Api Example
Pero esta sencillez en realidad viene dada de configurar y usar el script de simpleFacebookGraph.js. Seguidamente la documentación del mismo por si alguien quiere usarlo.
El script se almacena dentro de la variable «fb», que no es la misma que la variable «FB» que genera el Javascript SDK de Facebook (si, seguramente no ha sido muy buena idea ponerles nombres tan parecidos).
La configuración:
Al principio del código se encuentran las distintas variables para configurar la conexión a Facebook a tu manera.
config :{
// CONFIG VARS:
app_id : 'xxxxxxxxxxx',
use_xfbml : true,
extendPermissions : 'publish_stream' ,
locale : 'es_ES'
// END CONFIG VARS
},
app_id : es el código de nuestra aplicación, a la que realmente se conecta el usuario. Debemos crear una Aplicación, como si fuese para Facebook Connect antes de poder conectarnos a Facebook.
use_xfbml : Si lo marcamos como true, se buscarán en el html etiquetas xfbml para reemplazarlas por los elementos adecuados de facebook. Si no vamos a hacer uso de ellas, mejor dejarlo a «false».
extendPermissions : Cuando cualquier usuario se identifique en Facebook se le pedirán automáticamente los permisos que vayamos a querer usar. En este caso se pide el permiso «publish_stream» para poder publicarle elementos en su muro. Puedes informarte sobre que extended permissions existen aquí
locale : Debemos escoger en que idioma queremos ver Facebook. Se trata simplemente de indicar el código de idioma adecuado. Puedes ver todos los códigos de idioma disponibles aquí
Con esto ya tienes tu aplicación preparada para conectarse y solo hará falta que tu javascript llame en algun momento a las funciones adecuadas para interactuar con Facebook. Son pocas, no he querido hacer funciones que casi nunca vaya a usar… veámolas:
fb.ready( function() { Tu Script });
Las funciones de Facebook no pueden funcionar hasta que los scripts y los distintos accesos han cargado completamente. Incluyendo nuestras funciones dentro de fb.ready() nos aseguraremos de que estas se ejecuten solo cuando la parte de Facebook esté disponible.
fb.login( callback )
Cuando lancemos esta función intentaremos logar al usuario y pedirle los permisos necesarios. Cuando este proceso acabe, se lanzará la función callback() que enviemos como argumento.
Una vez un usuario se identifica, podemos consultar todos sus datos en fb.user (por ejemplo fb.user.name). Puedes saber cuales son todos los datos de un usuario aquí.
Una vez un usuario está logado esta variable se vuelve a informar ella sola cada vez que se inicia una página.
fb.logout( callback )
Cuando la lancemos el usuario saldrá de facebook y al terminar se lanzará la función callback()
fb.hasPerm( extedndedPermission )
Con esta función podemos preguntarle a facebook si tenemos permiso para hacer algún tipo de acción con el usuario. Simplemente debemos indicarle que permiso queremos y nos dirá si lo tiene o no.
fb.publish( publishObj , callback )
Esta es la función creada para poder publicar en el muro del usuario que se ha identificado (aunque solo si ha dado permisos de «publish_stream»). Con ella lanzamos un objeto que contenga las distintas variables que queremos publicar en el muro del usuario. Cuando la publicacion haya terminado se lanza la función callback() que enviemos y que recibe como argumento un true o false, dependiendo de si ha podido o no publicar lo que se deseaba en el muro del usaurio. Puedes consultar que elementos incluir en el objeto de publicación en el muro aquí.
Y con esto está todo. Esta claro que este Script es muy personal y que seguramente querrás cambiar algo o añadirle algunas funciones más. Solo espero que a alguien le simplifique un poco el trabajo.
– Descargar simpleFacebookGraph.js
118 respuestas a “Ejemplo de Facebook Graph API con Javascript SDK, pero aun más sencillo (Actualizado con Login por OAuth 2.0)”
el ejemplo en tu web no funciona…
tan solo muestra
«…La URL de receptor http://blog.ikhuerta.com/jsExamples/simpleFacebookGraphApi.html de domino cruzado Facebook Connect URL debe tener la aplicación Connect URL — como prefijo. Puedes configurar la aplicación Connect URL…»
[NOTA: Arreglado!]
Muy buen ejemplo @ikhuerta. Gracias me sirvio de mucho… Yo usaba la libreria php… pero creo que con tu ejemplo es más facil…
Ahora he venido intentando … colocarle más de dos imagenes y no lo he lo grado me podrias ayudar a resolver esto?
fb.publish({
message : ,
picture : más de 2 imagenes aqui ,
link : ,
name : ,
… etc etc …
de antemano gracias!
Buenas,
Veo que me había dejado este post desatendido y encima con la app de ejemplo mal configurada… en fin! Creo que ya debería funcionar (decidmelo si no es así) hice pruebas en otro directorio y al moverlo Facebook dejo de aceptar la petición.
@Jose, me alegro de que te haya servido. No he probado a subir más de dos imágenes a la vez pero si te deja con 2 y con 3 no será más bien que no se puede. Yo probaría usando el elemento «caption» para el link a ver si por ahi se la cuelas…
No me funciona para IE
Hola Andrés,
Ahora mismo no tengo mucho tiempo libre para mirarmelo. A que IE te refieres? Si es el 6 puede ser que sea porque Facebook no da soporte a IE6… lo mirare cuando pueda.
Hola que tal, muy bueno el script.. me hizo mucho mas facil todo!
tengo una pregunta, se puede modificar el publish() para que publique en el muro de un amigo de quien lo use?..
en mi caso, tengo un array de uid que cumplen una condicion y necesito publicarles en sus muros algo tal cual es el formato del ejemplo. Muchas gracias!
Llevo intentando días informarme sobre esto, y por el momento esto ha sido donde más me he enterado aún asi no se donde hay que poner esos codigos que muestras, a ver si alguien me aclara un poco más. GRAcias
Se puede hacer funcionar desde mi maquina local?
Porque por mas que lo intento no lo logro… me da siempre el mismo error
» FB is not defined »
Es que la aplicacion debe ser ejecutada desde el Facebook? o tambien puedo ejecutarla desde mi pc local(conectado a internet)?
Saludos.
Hola RockXell, dos detalles sobre ese tema:
1) PAra poder manejar funciones Ajax siempre es necesiaro ejecutar las páginas desde un dominio válido. Eso significa que en Local puedes ejecutar ajax pero solo si te montas un servidor wen en tu ordenador y lo ejecutas desde ese y no desde el arbol de ficheros de tu ordenador.
2) Facebook para conectarse a tu pagina te pide que indiques una url concreta que el consultara para validar que realmente está ahi tu aplicación. Si trabajas en local nunca podrás acceder a esta página por lo que no lograrás iniciar la sesión del usuario.
3) El error que defines, tiene más pinta de que no se ha cargado bien el script JS. Te dice que el objeto FB aun no existe por lo que no puede lanzar sus funciones… Para garantizar que FB ya existe debes lanzar tus funciones dentro de fb.ready( function() { /*Tu Script*/ });
Muchas gracias,
Efectivamente era la FB no se cargaba debido a que mi PC no accedía a la all.js(agradezco a mi administrador de red, y su súper firewall)
(:-D)
Por último, leí en tu post del 20 de Sept, que el FBML ya no se podrá usar?
Pero no afecta al caso del uso del Java script SDK, es decir que aun funcionara la conexión vía tu simpleFacebookGraph.js(esta genial), después del 01-01-2011?
Muchas gracias, y en especial por la pronta respuesta…
Gracias, es genial , por fin he podido integrar la aplicación .
Este script que has desarrollado es una maravilla.
Gracias a personas como tu , esto tira adelante.
Jordi del rio
RockXell,
Me alegro de que lo solucionases. Lo de ese Post no debería preocuparte. Lo que va a pasar es que Facebook dejará de permitir CREAR NUEVAS aplicaciones del tipo FBML. Esto no es que el sistema FBML vaya a desaparecer sino que dejara de permitir crear nuevas aplicaciones internas y solo permitirá crear las de IFRAME o en tu propia web. Precisamente para esos dos tipos de aplicaciones es para las que sirve el SDK Javascript, así que vas por buen camino 😉
Jordi, gracias por tus comentarios, me alegro de que alguien más le saque partido a ese js 🙂
Hola ikhuerta, gracias por el post, me sirvió muchísimo!!
Tengo una pregunta nada mas, cuando se hace el post en facebook, al dar click en el link en la página de facebook, se hace correctamente pero en la misma ventana. No hay forma de enviar algún parámetro para que dicho link sea con target=»_blank» ya que de lo contrario te saca de facebook.
Hola Omar,
Tengo preparado un post sobre crear aplicaciones en modo iframe (que creo que es a lo que te refieres con dentro de facebook). El problema es que por un error de la api el ejemplo aun no funciona muy bien. Estoy esperando a que lo arreglen para publicarlo… espero que no tarden demasiado.
disculpa, muy buen post!!
Soy nuevo en esto!! provee con lo que tu provees pero me tira el siguiente error
«Ha ocurrido un error con XFBML Pruebas. Por favor, inténtalo de nuevo más tarde.»
porq sera, no tengo idea como seguir!
Hola, ante todo gracias por el ejemplo.
He leído el html y el javascript y más o menos se entienden.
Lo he probado en mi servidor, desde Opera y me arroja un montón de errores de CSS.
» y:block;height:16px;position:absolute;right:19px;top:18px;width:14px;top:10px\9;
»
Estos errores… no me importan mucho, pero … ¿donde están las CSS?
Con las herramientas de desarrollo de Opera, he visto que hacen referencia a tu web.
¿Dónde puedo cambiar eso?.
Luego tanto en la pantalla de login, como en la de publicar algo, aparece:
«static.ak.fbcdn.net»
No consigo logarme, me sale el popup de usuario y contraseña, envia, pero … no ocurre nada.
Creo que estoy usando algún fichero, libreria, css …. que hace referencia a tu ejemplo, a tu app y por eso no funciona bien del todo.
¿Qué se me ha pasado por alto? 🙂
Gracias, un saludo.
queria saber para poder publicar un flash q le devo agregar?
Holaa, exelente el recurso, mi duda es la siguiente ( estoy intentando resolverlo y me lei de todo pero no encontre una solución )
si yo quiero dejar una publicación en el muro de un amigo, como hago ?
Hola Freddy,
Creo que no se puede publicar un flash directamente. Lo que deberias es publicar un link a la url donde está el flash colgado en tu dominio. Facebook lo interpretará como sepa (si es video segurametne pondrá el video directamente pero dudo que ponga un flash cualquiera en el muro de nadie)
Lenadro,
Para hacer que un usuario publique en el muro de otro usuario deberías lanzar la publicación igual que como se hace en este ejemplo, solo que cambiando donde dice «/me/feed» por «/[[id-usuario-destino/feed»
Un saludo
ya lo pruebo, muchisimas gracias por la rápida respuesta !
estoy haciendo el ejemplo, y me tira este error … que puede ser ? ..
La URL ?perms=read_stream%2Cpublish_stream&selected_profiles=1313303298&installed=1&session=%7B%22session_key%22%3A%222.ncCqH6NzL1W4gAAAkKHmBw__.3600.1291136400-1313303298%22%2C%22uid%22%3A%221313303298%22%2C%22expires%22%3A1291136400%2C%22secret%22%3A%22QayvrW_qhovDLRw27AZ4mA__%22%2C%22base_domain%22%3A%22www.espacio-cero.com.ar%22%2C%22access_token%22%3A%22173378152692350%7C2.ncCqH6NzL1W4gAAAkKHmBw__.3600.1291136400-1313303298%7C37oyIuwhKSWVnPstCDItDIQY384%22%2C%22sig%22%3A%22bc023f547ecdaa75306f920953e13b79%22%7D no es válida.
Lo sentimos, la aplicación que estabas usando está experimentando un problema. Por favor, inténtalo de nuevo más tarde.
Interesante lo que hiciste, me da una vista rápida de cómo usar el Open Graph. Tu demo funciona perfectamente. ¿Con esto se podría hacer una BD de las personas que han usado tu demo?, es decir tener un record de las personas que se loguearon con Face y publicaron el muro
Buenas,
Como poderse, está claro que a la que disponemos de ciertos datos podemos guardarlos. El claso es si es legal o no (que creo que ahora es legal pero habría que mirarlo con lupa por si acaso). En cuanto al cómo al ser javascript y ejecutarse en el navegador del usuario habría que enviar esos datos mediante ajax al servidor para almacenarlos.
Por otro lado, los datos concretos no te sirven de gran cosa ya que no puedes trabajarlos (si no te dedicas al spam, claro) y en cuanto a estadisticas solo por el hecho de ser una aplicacion de Facebook (que aunque lo uses con javascript tienes que dar de alta una app para conseguir los ids de la app) ya tienes una serie de informes que te aporta facebook sobre el numero de usuarios que usan la app diariamente. Hay a quien no le acaban de gustar estos informes pero yo creo que son bastante completos.
Hola Iñaki.
He probado tu ejemplo al pie de la letra y me da este error:
Argumento no válido
La URL indicada no esta permitida por la configuración de la aplicación.
Me he creado una aplicación para el club de la franquicia. Me dieron el siguiente Id. de aplicación
169303593107501, que lo sustituí en SimpleFacebookGraph.js por el tuyo
y la aplicación cuelga de:
http://www.clubdelafranquicia.com/fb/index.html
y no hay manera.
¿Sabes a qué se debe el error?
Gracias y un saludo
El problema lo tienes en la configuracion de la aplicación.
Entra en tu config, Repasa las distintas pestañas y asegurate de indicar bien tu URL en los distintos campos donde se te pide.
Iñaki tengo una duda con respecto a tu ejemplo.
Cuando hago logout se cierra la sesión efectivamente…pero sigue apareciendo la imagen del usuario y su nombre, y esto no se borra hasta que se actualiza la pagina, de que manera puedo evitar esto, o actualizar automáticamente para que el usuario no quede con la impresión de que se ha quedado logueado.
Por lo demas, excelente ejemplo, funciona a la perfección.
Buenas Juan Francisco,
Cuando lanzas fb.logout() se te permite lanzar una función callback como argumento. Es esa la función que debes usar para realizar los cambios despues del logout.
Así:
fb.logout(function () {
alert(«ya no estás logado»);
})
lanzaría un alert tras el logout. Ahora solo tienes que cambiar ese alert por lo que tu quieras hacer (quizas cambiar los elementos del DOM que muestran al usuario logado o simplemente forzar el reload de la página)
Cuando quiero usar FB.Canvas.setSize para modificar el alto del iframe de la app me crea conflictos con el js, alguna solucion?
Buenas,
Yo lo he lanzado sin problemas (eso sí, siempre dentro de fb.ready para que la librería FB este iniciada):
Por ejemplo:
fb.ready(function(){
FB.Canvas.setSize({ width: 515, height: 2000 });
});
Hola excelente post sobre Facebook con Javascritp pero tengo unas dudas.
Cuando descargo la API de Facebook para desarrollar con Javascript cuantos archivos fuentes son? y tu los utilizas en que parte?. Por otra parte el archivo que configuraste que vendria siendo?. Quizas parescan preguntas inutiles pero es que soy nuevo en esto de Javascritp y Facebook y tengo que presentar un proyecto que me permita identificarme desde Facebook y obtener los datos personales…
Muchas Gracias
Junior, el script de Facebook esta hecho para que lo incluyas asíncronamente desde su servidor. No hace falta bajarselo, solo incluirlo.
El código que yo he hecho si que habría que bajarselo o copiarlo. Este código aparte de añadir las funciones que comento en el post ya hace la inclusión de código de Facebook el solo. Con lo que en la practica te bastara con bajarte este código. Incluirlo y olvidares de incluir el de facebook
Usando esta definición (en lugar de iframe) obtendo un error del tipo: Argumento no valido; linea 5, carácter 202 en la URL http://static.ak.fbcdn.net/rsrc.php/yf/r/mz6o8eG7kn5.js
Sin acceso
Alguna idea ?
Ni idea tuverano . Que has hecho exactamente?
Hola muy buen post, pero tengo una duda, porque tu forma de programar es tan diferente a la que esta en la documentacion de Facebook usando Javascript? Necesito obtener los datos del usuario, como gustos, musica favorita, etc. Pero no me keda muy claro, si has descargado la API o estas haciendo referencia a ella desde los servidores de Facebook. Espero puedas aclararme esta dudaaa… Gracias!
Juniordeleon,
Es el mismo script, que se llama al incluir este codigo. La forma de incluir el script es distinta básicamente porque no me gusta nada la forma que te dice Facebook para incluir su código. Es estúpida.
Luego La forma de programar es distina porque en javascript me es mucho mas cómoda y ordenaba la notación literal de objetos. Te ahorra lineas de código (lo que siempre es importante en ja) y te permite no mezclar cosas anidandolas todas bajo un mismo objeto. Normalmente los ejemplos que te dan en las documentaciones son lineales para que todo el mundo los entienda a la primera… Pero a fin de cuentas las funciones terminan haciendo lo mismo, usa aquello con lo que te sientas mas cómodo.
Hola Iker, excelente post sobre Facebook con Javascritp pero tengo unas dudas.
Cuando lo ejecuto en mi URL va todo bien hasta que le hago click en «Publicar algo en tu muro» y no lo consigo. Se abre una ventana con el sigiente mensaje: «No publicado :(, seguramente porque no estas identificado o no diste permisos» . Si estamos identificados y tambien otorgamos permisos. A ver si me puedes ayudar. Te dejo el link.
http://inelco.zobyhost.com/
Buenas Juan Jose,
Que mania teneis todos por entender que «ik» es iker! si puse el bloque blanco arriba para que la gente viese que es «iñaki!»
Respondiendo a lo que dices se me ocurren dos cosas:
1) Seguro que tu aplicación tiene por id el «136926349706181» ?
2) Puede que tengas tu aplicación marcada como «sandbox» en la configuracion? Eso haría que solo funcionase para logar al usuario propietario de la misma.
Gracias Iñaki, tomo nota.
He comprobado el id de la aplicacion y si que es «136926349706181», tambien he comprobado que el «sandbox» este desactivado, pero no hay manera de poder publicar en mi muro.
buenos dias, che tengo problemas con el html! copio y pego pero se me rompe todo… no toma los comentarios etc. que puede ser?
estoy muy interesado en meterme mas en el mundo face!!! mandame un mail si queres asi compartimos conocimientos!
saludos
ALEJO
Hola, Iñaki
Gracias por tu blog, me están siendo muy útiles tus artículos para entender esto de facebook :-), lo veo muy completo.
Necesito hacer justo lo que hace el ejemplo, publicar en el muro de una página de facebook, en concreto desde otra web. He creado la aplicación en fb, tras adaptar tu script, al pulsar en publicar en tu muro me sale:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.
Debe tratarse algo de la configuración pero no tengo claro qué poner en cada sitio ya que no quiero que la aplicación se vea en facebook, ni en mi web poner facebook. Por tanto no sería ni tipo iframe ni tipo FBML.
La idea sería como el ejemplo, una función javascript que inserta directamente en el muro. ¿Puedes indicar como has configurado tú la aplicación fb?
Además, un detalle, he creado una cuenta como usuario y pero no me interesa publicar en este muro, sino en el de la página que he creado.
Muchas gracias.
Ana.
Hola de nuevo:
si fb necesita una página en mi web para autentificarse, cual de las que pide es y qué debe recibir y devolver para que sea correcto
Gracias de nuevo.
Hola a mi me salio de maravilla y eso que no soy programador jeje
Pero quiero que se publique en los muros de mis amigos como seria exactamente el codigo ya que hay estos [[ y no se cierran y hay otro en tu javascript que dice me/ a ese tambien se le modifica?
/me/feed» por «/[[id-usuario-destino/feed»
Gracias desde ahora seras mi mentor en la web..
Saludos
Choko
Buenas Christian,
Como dices, para publicar a un amigo basta con cambiar donde pone me por el id de usuario de tu amigo. Esos corchetes no se de donde salen 😛 Simplemente hay que poner el id, tipo: «/123456/feed».
Otro tema es que por hacer esas cosas pueden llegar a cerrarte la aplicación. Para más info sobre esto:
http://blog.ikhuerta.com/spam-y-baneo-de-aplicaciones-en-facebook
Hola estimado :
Por fin un script que funciona a la primera.
¿ Por que Facebook, no hace este tipo de ejemplos ?. Sencillos y de real aplicación.
Gracias
bueno segui tu ejemplo y me salio de las mil maravillas
pero lo que si deseo es hacerlo de otro modo si es q me puedes ayudar en mi web debe publicarse en el muro de face aunq no este logeado pero si aya dado antes los permisos en lo cual tu aplicacion me pide loguearme
nose si as visto la pagina del comercio.pe aunq no esteas logueado en facebook si tu cuenta ya a sido vinculada con face te lo publica de todas maneras
porfa ayudame
hola, quiero mostrar el nombre del visitante en mi fanpage por medio de iframe… alguna idea?
Hola te felicito por el codigo me ha simplificado la vida… quisiera saber si puedo postear con el metodo publish el muro de un amigo o que variable puedo pasarle para esto de antemano muchas gracias….
Hola muchas gracias por tu ayuda!!!, ahora puedes aclararme una duda, soy novato y quisiera saber si el codigo de arriba sirve para ponerlo en un JSP???, o si es un javascript como lo incluyo a la html o al jsp???, desde ya muchas gracias!
gracias me sirvió chévere….le tuve que hacer unas modificaciones pero me andubo a la perfección..
Saludos desde Santiago de Chile..
a mi me pasa tambien lo de la url
API Error Code: 191
API Error Description: The specified URL is not owned by the application
probe de todo
verifique lo de sandbox,
no se que puede pasar
tengo otro ejemplo de prueba que estoy haciendo por otro lado y que si que funciono con mi app
Aprobar Permisos
asi ke no se si es de configuracion de mi app, ya que ese ejemplo si que pide los permisos sin dramas
en el caso de tu ejemplo, directamente no sale la ventana de permisos sale la de ese maldito error
API Error Code: 191
API Error Description: The specified URL is not owned by the application
ayuda PLEASE
hola, una pregunta ¿Como hago para publicar mas de una cosa? por ejemplo…
Estoy Feliz, Estoy triste, Estoy Normal… algo asi por ejemplo.
Gracias
Muy buen recurso! la verdad es que me ha ayudado bastante a entender como funciona facebook.
Estoy intentando mejorarlo obteniendo algo de informacion mas sobre mi perfil de usuario, pero no consigo sacar informacion extra.
cuando creas el GetUser recuperas una variable user que contiene el campo ID. que otros campos se pueden recibir de esta forma? hay algun listado de campos que se puedan obtener de la misma forma? o hay alguna manera de hacer que recupere via consulta los datos que me interesan (como direccion, ciudad o demas)??
Gracias por adelantado.
Qué debo tener en cuenta para mostrar un album de facebook que es público. ¿ Es necesario solicitar permisos al usuario ?
Si no recuerdo mal, a todo lo publico tienes acceso con Google Graph sin necesidad de Login. Suerte!
hola que tal:
me ha servido mucho tu ejemplo, gracias.
Tengo una duda, si quisiera mostrar el correo de la persona se que tendria q agregar el permiso «email» a la lista de extendPermissions, mi duda es si solo con eso ya me traeria el email o tengo que hacer algo mas.
Gracias
Hola, me sirvio mucho tu tutorial, felicitaciones!!
Quisiera saber cuales son los campos que debes llenar al momento de registrar la aplicacion en Facebook. He trabajado con Rest y Java y recuerdo que tenia que registrar un ServletCallback. Pero por lo que me doy cuenta aqui no es necesario(no se si es por Graph API), por lo cual me encuentro muy confundido. Si me podrias dar una mano con esos parametros te lo agradeceria muchisimo
Hola Ikhuerta estoy haciendo una prueba. segui este blog pero me arroja un error que dice «Ocurrió un error con XFBML Pruebas. Por favor inténtalo de nuevo más tarde.» Me puedes ayudar a resolcverlo? estaria muy agradecido…
Eres un genio. Gracias, me dolía amargamente la cabeza con este asunto. Un abrazo.
Hola ikhuerta buenisimo tutorial, solo hay una cosa, como agarro y meto los datos del usuario a una base de datos??? por lo de mas te doy un 10, es el mejor tutorial que he encontrado (y mira que he buscado bastante), gracias…
Buenos días,
Tengo el mismo problema de la configuración de la aplicación.
Este error solo me sale en los navegadores IE y opera, en otros funciona muy bien.
Error cuando intento loguearme:
Argumento no válido
La URL indicada no esta permitida por la configuración de la aplicación.
despues de ingresar el usuario y la contraseña me sale este error:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.
Por favor me pueden colaborar con alguna imagen de como deberia ser la configuración.
hola 1 pregunta, como se puede hacer para que se publique un video de youtube y se reproduzca en el mismo facebook sin tener que ir a Youtube??
Salu2
pd: tambien tengo lo del error XFBML
Hola:
El ejemplo me parece muy claro y útil. Solo tengo una cuestión a ver si nos puedes ayudar (creo que no soy el único con este problema):
En el parámetro app_id va un valor numérico. Dicho valor numérico es el que te facilita Facebook una vez hayas dado de alta una aplicación, correcto?. El problema es cómo dar da alta una app a través de la página de developers. Hay un paso en el que te pido el movil para enviarte un código de confirmación y completar el proceso. El problema es que dicho sms con el código nunca llega al móvil. Puedes ayudarme a resolver este escollo?
Gracias.
Q onda IK oye una duda, bueno mas bien varias, estoe con un proyecto aun en localhost desde tomcat, las dudas son: necesito crear una app en Facebook o puedo usar este mismo id:184098739134 q es el q tu usas en el ejemplo??? otra cosa es necesario tener ya la applicacion en la nube para q funcione??
Amigo, podria usar tu libreria en un proyecto free? estoy haciendo un generador de aplicaciones para Facebook y me seria de gran utilidad tomar algunos trozos de codigo. Gracias.
Sin problemas,
Como si cobras por el! con que alguien le saque provecho ya ha tenido sentido hacerla 😉
Estoy implementando, la autentificacion con Facebook y tendo 2 dudas:
1. Primero inicio con Facebook, luego ingreso a mi aplicacion y como ya acepte la aplicación (en otra oportunidad)…me devuelve los datos de la persona loqueda en Facebook (todo perfecto)… pero cuando cierro mi aplicacion, en mi prefil de Facebook me pide que vuelva a ingresar. (es eso correcto, o debería mantenerse ni Facebook abierto aunque cierre mi aplicación). Por favor su ayuda. Gracias.
Psd: Aplicacion en Aspx.
amigo una pregunta, necesito usar tu libreria pero el show es que esta bloqueado Face en la intranet, solo el server de la app lo tiene libre y cuando en local intenta conectar a: /connect.facebook.net/en_Us/all.js
pues no me deja sabes si ahy alguna manera de hacer la publicacion usando solo el server??
Hola,
hace tiempo que uso este código y funcionaba correctamente. Pero esta mañana no funciona, da el error «Oauth2 specification states that ‘perms’ should now be called ‘scope’».
Lo he cambiado en la invocación a FB.login y ahora no da el error pero no valida. Puede que haya que hacer más adaptaciones para el OAuth 2.0, pero en algunos posts que lei bastaba con lo anterior.
¿A alguien le pasa y lo ha solucionado?
Gracias por vuestra ayuda.
Hey ana!!
me ha pasado lo mismo y por mi parte lei que el dominio ahora tiene que tener el protocolo de seguridad HTTPS, y bueno aun no logro solucionarlo pero espero que si alguien logra solucionarlo, comparta el conocimiento…..
Que tal!!
Con recpecto a los problemas que mencione en mi comentario anterior, yo solucione dichos problemas solo sustituyendo la palabra «perms» por «scope» y session por «authResponse», espero pueda ayudar de algo.
Saludos
https://developers.facebook.com/docs/reference/javascript/FB.login/
Hola,
Este código dejó de funcionar hace unos días y dando tumbos por la web me encontré con un artículo en el cual Facebook menciona que hizo unos cambios que afectan la forma como se obtienen los datos del usuarios FB.
He leido e intentado adaptar el código, pero no lo he logrado. Yo soy bastante malo con el Javascript.
Allí les dejo la publicación, agradeciendo que si alguien puede adaptar el codigo lo publique.
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Saludos
Buenas,
Gracias a todos por reportar el cambio…
La verdad es que habian cambiado varias cosas y por eso al arreglar solo algunas puntualmente no funcionaba. Aparte del Scope, los permisos ahora hay que pedirlos por separado y no te los da en el login, por lo que siempre detectaba que no había permisos…
Republico el post y lo vuelvo a poner en twitter para que la gente esté avisada…
Hola, muy bueno el post, usaba en mi web el script hasta el dia 13D, leo en tu nota que dices que has republicado el post, pero no veo el script con lo del perm cambiado y el oauth true por ningún lado…Dónde lo has colgado? He intentado readaptarlo yo a mano, lo he logrado con el login pero no con publish…muchas gracias, un saludo.
Buenas «Uno»
He hecho los cambios minimos para que el código siguiese funcionando. Ellos mismos han cambiado internamente la conexión de las funciones pero al hacerlo han hecho que estas devolviesen otros datos y por eso el script antiguo no iba.
Si miras ahora en el ejemplo:
http://blog.ikhuerta.com/jsExamples/simpleFacebookGraphApi.html
Verás que se conecta a Facebook y puedes publicar. Si no es así, por favor, decidme por qué no podéis ya que solo he hecho pruebas con mi usuario.
El código que he cambiado es el de
http://blog.ikhuerta.com/jsDownload/simpleFacebookGraph.js
Donde he cambiado algunas partes del login y de la solicitud de permisos del usaurio para que el mismo código funcionase con las peculiariedades de las nuevas funciones.
Muchas gracias, lo tenía cacheado y por eso no iba…
Un saludo.
Hola,
Ayer probé tu ejemplo, y me funcionó perfectamente, pero hoy le doy y ya no va, al principio me decia que me intentara más tarde, y ahora ya me sale el siguiente error:
API Error Code: 191
y seguidamente algo de que la URL no es adecuada…
¡Un saludo!
El ejemplo a mi me va perfectamente.
Prueba de nuevo. Facebook hace estas cosas, cambia cosas y rompe la api durante algunas horas sin avisar…
Lo suyo sería en las aplicaciones controlar que si algo falla avisar al usaurio de que es temporal. Este ejemplo es demasiado básico y no hace nada de eso, pero todo es ponerse…
¡Gracias!
Ahora funciona… en fin. Serán los de facebook…
😀 ¡Muy útil este post!
Gracias! esta muy util, solo tengo una duda como podria agregar otros permisos aparte extendPermissions? 🙂
Buenas Liss,
Solo tienes que bajarte el archivo JS. Ahi, edita en la parte de configuración el valor de extendPermissions con los permisos que requieras ( http://developers.facebook.com/docs/reference/api/permissions/ ). Indica cuantos necesites separados por una coma.
HOla: Estoy logeado en facebook, pero al ingresar al ejemplo me aparece el texto para hacer login.
Debería aparecer mi nombre de usuario y mi imagen verdad?
Por que puede suceder? Me sucede lo mismo al ejecutar el codigo desde mi servidor. Gracias
Saludos, tu script me ha servido mucho, Gracias.
Dios!! me he pasado dia entero programando y editando con los codigos de Facebook Connect para que cuando intente publicar via PHP no me funcione grrr! y ahora encuentro esto que se limita a 2 paginas y funciona a la perfeccion, MADRE MIA!!
gracias man
hey Iñaki gracias, me sirvió de mucho !!!!
graciaaaas!! me pidieron que arreglara un script que daba error.. era el js entonces…
Salu2!!
pd: como se puede obtner el email y cumpleaños del usuario??
Hola, he intentado aplicar tu ejemplo desde ayer y me da el siguiente error:
Ha ocurrido un error, por favor intente de nuevo más tarde.
puse en el .js el ID de mi aplicación que es una pestaña de página.
subí el html y el js a mi ftp y en la configuración bñasica de mi aplicación puse lo siguiente:
URL de la pestaña: URL del html mencionado.
URL segura de la pestaña: la misma pero con https.
El error estaría en mi procedimiento o será que es algo de facebook? no me lo especifica 🙁
Muchas gracias por tu post ayuda muchisimo muy bueno.
Hola me sirvio de mucho tu informacion pero tengo problemas con OPERA: intento iniciar session y me sale una ventana en blanco con el titulo de XD proxy puedes probar tu link: http://blog.ikhuerta.com/jsExamples/simpleFacebookGraphApi.html en opera y sale el mismo error ayuda..
Hey señor muchas gracias, yo no soy programador pero trabajo con uno actualizo las paginas y se algunas cosas de facebook y sus codigos fue muy sencillo esto.
Gracias en serio ayudo bastante.
Muy bueno, y funciona perfectamente. Muchísimas gracias!!! Eternamente agradecido!
Hola Iñaki! estoy buscando por toda la web y no puedo encontrar una forma de hacer que mi aplicación para facebook, identifique la página que la contiene. Estoy usando solo javascript. ¿Conoces si existe algún método o propiedad que permita conocer el id de la página que contiene el canvas con la app?
Muchas gracias Iñaki! Desde ya te estoy agradecido.
Saludos cordiales! Matías.
muy buena tu librería, me ha servido para entender un poco mas el api de fb y poder jugar con ella, muchas gracias.
Para todos aquellos que al hacer el procedimiento les da un error que dice «Ha habido un error con la aplicación XXXX intentelo más tarde» o algo similar les cuento que yo lo solucioné poniendo dentro de mi aplicación en Facebook en la misma página donde muestra lo de la App ID más abajo dice «Website with Facebook Login» ahí hay que poner la URL donde estamos poniendo el botón (yo puse el dominio o sea http://www.abcde.com)
Excelente trabajo, funciona todo!!! Te hago una consulta es posible enviar en el mensaje amigos etiquetados, lo mismo que se consigue con la arroba??? Muchas gracias.
Un excelente script, gran colaboración, felicidades!
Gracias, me ha funcionado muy bien!
gracias buen aporte me sirvio para todo 🙂
que posibilidad ahi de que hagas un manual o un ejemplo con PHP y MySQL??
seria otra buena opcion de poder lograr conexion! saludos!
Buenas Alejandro, Encontrarás en este blog algunos apuntes sobre como configurar tu aplicación y algunos viejos artículos sobre la API de facebook con PHP.
Por desgracia Facebook es de las empresas menos estables que existen con su API, hay un blog donde cada semana anuncian cambios y si no te dedicas a realizar aplicaciones de forma activa es imposible estar seguro de que el código que incluyes es el correcto.
Por ese motivo he preferido no meterme más en el tema. Los viejos artículos pese a que tienen una advertencia de que ya no son válidos no paran de generar comentarios sobre que el código no funciona y ya que no puedo mantenerlo no quiero despistar a más gente. Lo siento.
Segui las instrucciones como se pudo, llega a conectarse con el facebook, me logueo, pero…. no me muestra nada despues, es problema de mi aplicacion? (ya que es solo un «hola mundo»)
viejo funciona de perlas, de maravilla…
muchas gracias de verdad.
Me sale esto, y no he podido solucionar, alguien que me ayude, o le pague por honorarios para que me asesore?? mi correo es [email protected]
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application
Hola que tal oye si quisiera sacar el correo del usuario que esta ocupando la app! Como seria? Gracias!
Para eso primero tienes que certificar tu aplicación (no puedes pedir correos con aplicaciones no certificadas), luego a la hora de ver que permisos pides al usaurio debes solicitarle el permiso para ver el correo. Aún así, si no recuerdo mal no obtendrás el correo de verdad sino un correo de facebook con el que escribirle.
¡Muchas grácias por el artículo! es muy senzillo de hacer grácias a como lo explicas.
¿Y si quisiera que además de escribir en el muro hiciera unMe gusta en una fan page? No me aclaro con los permisos.
¡Muchas grácias por tu blog Iñaki!
holaa que tal esta muy bueno tu ejemplo lo e intentado aplicar pero al momento de mostrarme el pop up para pedir permisos de escritura me marca el siguiente error
Se ha producido un error. Inténtalo más tarde.
no me da codico de error ni nada soy un poco nuevo en espo me podrias comentar por favor a que se debe este error
saludos
Gracias! Oye me acaba de salir un erro en la funcion fb.ready(function){} el error es: Unhandled Error: Undefined variable: fb
Espero y me puedas ayudar gracias!
Y como certifico la app¡ tamnbien porfavor
Me sale este error cuando va a buscar la aplicacion en Facebook Ha ocurrido un error, por favor intente de nuevo más tarde. y en la consola de errores sale Port error: Could not establish connection. Receiving end does not exist. Muchas gracias por su respuesta
Gracias por el aporte, me ha servido mucho este y otros artículos para aterrizar mis ideas sobre el desarrollo en facebook.
Hola…. todo anda muy bien.. pero en mi caso. el login de facebook lo uso para ver si tiene asociado una cuenta de mi sistema…. el problema va cuando reemplazo el contenido que se vea por el envío de los datos del usuario por post para hacer mis verificaciones y poder entrar por la cuenta asociada… Todo anda excelente.. pero al hacer esto se genera una vulnerabilidad en cuando al array que mando desde el script de facebook a mi php de validación…. cualquiera puede enviar un array falso de una cuenta de facebook y tranquilamente loguearse en mi sistema y pasar con la cuenta de la victima……. ¿existe alguna alternativa en cuanto a loguearse y pasar esos datos de alguna forma segura desde javascript a php?
Efectivamente, si informas usuario desde js tienes este tipo de problemas de seguridad. Lo suyo si vas a logar al usuario con tu bbdd y facebook a la vez es que te mires el sdk php y logues al usuario con un oauth desde ahi. Asi la vuelta del usuario la recogeras en el callback tu mismo y sin riesgos.
Ha ocurrido un error, por favor intente de nuevo más tarde.
El caso es que en algunas maquinas anda muy bien pero en otras sale el error, sabes que puede ser? Gracias y Feliz año para todos!
Si no recuerdo mal es el propio facebook el que no da soporte en algunos navegadores antiguos (ejemplo ie6) ni con su codigo ni con su web.
Solo escribo para darte las GRACIAS !!!!!!! sos un genio, si supieras lo que pase buscando algo que simplifique las descripciones que figuran en facebook !!!!!. Gracias de nuevo!!!
buenisimo ejemplo, ya tenia funcionando el login, probé solamente incluir en la parte cuando ya sé que el usuario está logueado poner lo de publicar en el muro, y funcionó perfecto, lo que me falta es poder mostrar los amigos de la persona, o al menos obtener los id, muy buena pagina, felicitaciones.