como usar facebook connect en nuestras webs


Nota
La Api de Facebook antigua, en la que está basada la mayor parte de este post, está siendo reemplazada poco a poco por una nueva api de facebook. Es necesario que sepas que Facebook cada día da menos soporte a su antigua api y a Facebook Connect.

Si estás buscando información general sobre este tema te recomiendo que leas los artículos más actuales en la categoría Facebook Graph Api de este mismo blog.

Más concretamente, y en relación a este artículo, puedes leer:

Bueno, después de haberme peleado con la api de facebook para aplicaciones ahora le tocaba el turno a Facebook Connect. Se trata de la evolución de la propia API de facebook dándole las más posibilidades, en particular ampliando la API hasta el punto de permitirte usarla en tus propios sitios web. En este post daremos un repaso sobre las posibilidades de Facebook Connect y los conectos clave ya que como siempre, la documentación oficial es muy completa pero cuesta hacerse una idea de forma rápida.

¿Qué es Facebook Connect?

En realidad se trata de la unión de la API ya existente de Facebook con una nueva API en javascript. Esta nueva API nos permite realizar las acciones de las que anteriormente se encargaba el propio facebook al mostrar nuestra aplicación. Son más pero lo que nos sobretodo nos interesa es saber que nos va permitir hacer 3 cosas:

  • Iniciar sesión en Facebook Connect, una sesión de facebook iniciada en nuestro propio site. La api javascript de facebook se encargará de generar la ventana modal en nuestro site para que el usuario de permisos a nuestra web para interactuar con su usuario de Facebook.
  • Métodos de la API desde javascript. Podemos lanzar algunos de los métodos más comunes de las apis de servidor (PHP, ASP, Java, C#, etc…) mediante esta nueva API javascript
  • Trabajar con el lenguaje FBML (FaceBook Marckup Language) en nuestro site. Esta es la parte facil de integrar en el site, por la cual sin dejar de usar javascript meternos en lenguaje de servidor podremos mostrar al usurio sus datos de facebook mediante etiquetas especificas de facebook: Su nombre, su foto, las fotos de su amigos
  • Trabajar con el lenguaje XFBML, una extensión de estas etiquetas que en vez de generar datos simples nos permitirán incluir en la web widgets completos de Facebook sobre nuestro site.
  • Lanzar los métodos de las Apis de Servidor desde nuestro propio site, aprovechando que la sesión de usuario se inicia con javascript y comparte las mismas Cookies.
  • Acceder a los datos del usuario que se ha conectado con facebook desde el servidor y por lo tanto ganar la posibilidad de registrar directamente esos datos en nuestra web. Esta es la parte más deseada de Facebook connect ya que permite con dos clicks tomar nuevos registros de usuarios en nuestras webs con datos de perfil ya completados

Todo esto, que no es poco, a la hora de la verdad no es demasiado inmediato con lo que van a ser necesarias unas cuantas horas de pruebas hasta conseguir realmente integrar facebook connect en nuestro site… pero, poco a poco y buena letra…

Parte técnica 1: ¿cómo integrar la API javascript en nuestro site?

Facebook usa una rebuscada técnica (que no vamos a explicar) para poder conseguir ajax crossdomain desde nuestro site hacia el de facebook. Lo primero que tenemos que hacer para aplicarla es buscar un sitito que no nos moleste mucho dentro de nuestro dominio y crear un archivo html con el nombre «xd_receiver.htm». Dentro, este html tiene que incluir el siguiente código.




    Cross-Domain Receiver Page


    


Dejamos este archivo creado y no volvemos a preocuparnos por él.

Ahora le toca a la página de verdad, en la que estamos integrando facebook connect, los cambios.

1 – Incluiremos en la cabecera de la página (en facebook recomiendan dentro del body, pero no tiene ningún sentido que sea asi) la siguiente etiqueta de script:


Esta es la encargada de cargar la API. Como se puede ver, tras el «.php/» se nos permite indicar el idioma de la interficie. Algo útil, sobretodo para las etiquetas del leguaje XFBML.

2- Para indicar la «traducción» de las etiquetas FBML y XFBML al contenido real de facebook deberemos hacer 2 cosas. A. Crear nuestro archivo html con un atributo especial: «xmln:fb» y B. lanzar tras haberlas creado (o mejor aún en el onload de la página) el método FB.init(). Este método recibe 2 parámetros que debemos definir como variables globales en el documento: apikey (la api que nos da facebook al crear nuestra aplicación) y channelpath que es la ruta relativa desde el documento que estamos viendo hasta donde hemos creado el documento «xd_receiver.htm».

Este ejemplo muestra como crear el tipico botón de facebook connect para invitar al usuario a logarse. El ejemplo ya incluye la cabecera de la etiqueta html con el atributo «xmlns:fb» indicado en la misma.







Conectate a facebook:

Pueden buscarse las etiquetas disponibles en las secciones FBML y XFBML de la wiki para desarrolladores de facebook. A destacar que la documentación para FBML se hizo con etiquetas cerradas pero para usarlas con la api javascript es necesario colocar la etiqueta de apertura y de cierre. Así para mostrar el nombre del usuario «12345678» no debemo usar >fb:name uid=»12345″ /< sino >fb:name uid=»12345″<>/fb:name<

3 – Por útlimo, en la parte de la Api Javascrip nos queda como usar las clases de la API. Para esto Facebook nos ha procurado un sistema en el que abundan las funciones con callbacks lo que va a hacer dificiles estos desarrollos para aquellos que no estén acostumbrados a ellas.

var api_key = '54d4eb8cf2a7ddb90f8986fb';
var channel_path = 'facebookConnect/xd_receiver.htm';

// esta función espera hasta que se han cargado todas las librerias
// solo entonces permite iniciar el código que tiene dentro...
FB_RequireFeatures(["Api"], function(){
  // Iniciamos la conexión con Facebook.
  FB.Facebook.init(api_key, channel_path);

  // Esta funcion se asegura que la conexión 
  // ha terminado de iniciarse. Solo entonces
  // ejecuta el codigo que tiene dentro...
  FB.ensureInit(function() { 
    // Ejemplo uno, pedimos al usaurio que nos de
    // permisos para enviarle mails mediante facebook
    FB.Connect.showPermissionDialog("email"); 

    // Ejemplo 2, rescatamos id de amigos de este
    // usuario y mostramos un alert con ellos...
    FB.Facebook.apiClient.requireLogin(function(exception){
    var userId = FB.Facebook.apiClient.get_session().uid
    FB.Facebook.apiClient.friends_get(new Array(), function(friendIds, exception){
      alert(friendIds);
    });
  });
});

Se puede consultar la api de funciones disponibles en este enlace

Parte técnica 2: ¿cómo trabajar en el servidor con esta API?

Lo primero para poder trabajar en el servidor con la API de facebook es bajar librerias de cliente de la api de facebook para el leguaje en el que programemos.

A partir de ahi podemos trabajar como cuando desarrollabamos aplicaciones para facebook con el añadido de que tenemos que controlar antes de cualquier accion que el usuario esté logado con facebook connect en nuestro site. Seguidamente un ejemplo para rescatar los datos básicos del usuario cuando este está logado.

get_loggedin_user()) 
{
  $user_id = $fb->require_login();
  $user_info=$fb->api_client->users_getInfo($user_id, 'uid, first_name, last_name, name, locale, affiliations, pic_square, profile_url');
  // sacamos a pantalla un dump de los datos de este usuario... 
  var_dump($user_info);
}
?>

Las funciones de las apis de servidor estan disponibles en el siguiente enlace aunque cada una de las librerias dispone de métodos bastante cómodos para realizar la mayor parte de las llamadas a la api.

Esto es todo lo que hay. Ahora solo queda investigar y desarrollar en nuestras webs un apartado social que saque provecho de todas estas nuevas posibilidades.


36 respuestas a “como usar facebook connect en nuestras webs”

  1. Hola disculpa mi ignorancia, soy nuevo con esto del facebook no se que problema tenga, e visto varios ejemplos de los que tienes y estan muy bien documentados pero no me sale -_- no se a que se deba….ejecuto los ejemplos JS y me sale el boton de facebook me da una ventana para que me logie me logeo y me manda a mi aplicacion -_- no se si este mal la configuracion de mi aplicacion para ejecutar este ejemplo. podrias poner un tutorial para configurarlo GRACIAS.

  2. Buenas,

    Si consigues que te salga el botón de Facebook y al darle te sale el login es que la parte de Connect seguramente estará bien.

    Ten en cuenta cuando lo hagas que si lo haces con Facebook Connect tienes que configurar tu aplicación en Facebook como de Facebook Connect no como una App. Facebook Connect está hecho para actuar dentro de tu propia web y no dentro de facebook (lo menciono por si acaso).

    Para asegurarte de que la configuración esta bien simplemente tienes que ir a tu aplicación y dentro editas la configuración y vas al apartado llamado «Connect». Ahi debe quedar indicada al menos la «Connect URL» (el primer dato de todos) donde debería estar escrito el dominio de tu web (que debe existir).

    A partir de ahí el resto por defecto ya funciona, no hace falta una configuración especial para que funcione. Prueba a crear una nueva App, no rellenes ningun dato que no se te obligue a rellenar (sobretodo los del apartado «Profiles» ya que esos están dedicados a cuando usas una app de facebook y no una web mediante facebook connect. En la parte de Canvas también asegurate de que no has tocado nada y que por ejemplo el modo está en IFrame y no en FBML…

    Si ni así te funciona seguramente se trata de un problema con el archivo «xd_receiver.htm», vigila que la llamada esté bien, que el javascript responda etc. Aunque como comentas que te cambia el botón en tu propia web (no dentro de la app) por el boton de connect esa parte seguramente estará bien.

    Si necesitas usar una App dentro de Facebook y Facebook connect a la vez ahi ya no te puedo ayudar puesto que es algo que no he necesitado nunca y por tanto no lo he probado.

    Para dudas más concretas quizás te puedan echar un cable en el propio foro de desarrolladores de Facebook, cada vez hay más gente metida y cada vez resulta más útil lanzar ahí tus preguntas.

  3. Hola, tengo mi aplicación facebook que funciona.
    Ahora sólo quiero publicar un mensaje en el perfil del usuario, pero me da error de permisos con el stream_publish, aunque el usuario me loggee bien que lo he comprobado. Mi «index.php» es asi, no me he comido partes:

    api_client->stream_publish($message);

    Peor me da error de permisos del stream publish. Tengo que añadirle algo al index.php? algun include más? alguna línea extra? algun permiso especial?

    Muchas gracias por tu tiempo

  4. Hola magallane,

    En este mismo blog hay un par de artículos que creo que te serán de ayuda con el tema que manejas:

    Crear acciones a los usuarios en Facebook

    Aqui se explican todas las opciones que hay para publicar en muros, subir fotos, etc.

    En este otro:

    Pedir permisos al usurio para publicar en su cuenta de Facebook

    Explica que hacer para que el usuario te de permiso para publicar en su feed o en su muro, etc… Si el usuario no te da permiso entonces facebook te dará un error diciendote que no tienes permiso para ese tipo de publicacion (que creo que es lo que te pasa).

    Mirateló!

  5. Ya me los habia mirado. Intento comprender lo de facebook connect, pero no acabo de entender donde poner ese código, pues no es php, ¿no? yo uso nomenclaturas de este tipo fb->stream_publish, que si se pueden colocar en secciones php

  6. El permiso no es algo que se controle desde PHP. Olvida la parte de FaceBook connect, eso es solo cuando estas haciendo cosas en una web normal, no en una aplicación interna de Facebook.

    Los permisos para publicar tienes que pedirselos al usuario de una de las formas que sale en el post. La mas facil dentro de una Aplicación y sin usar Facebook Connect es incluir una etiqueta en el formulario.

    Prueba a hacer cualquier formulario en tu app, incluye en la etiqueta «form» el atributo – promptpermission=»stream_publish» – (tal y como se explica en el post). Cuando le des a enviar a ese form verás como te pide los permisos con una ventana emergente… Si aceptas, ya podrás usar tu funcion $fb->stream_publish sin problemas.

    Bien pues, si no das ese paso, nunca vas a poder publicar en stream_publish ni por php ni por javascript. El usuario tiene derecho a decidir si quiere que le llenes su facebook de mensajes o no, por eso ese paso es obligatorio. Tu unico problema es que estas intentando publicarle cosas sin que el te haya dado permiso y claro, facebook provoca un error.

  7. hola devuelta 🙂 , ya logre avanzar en el problema jaja y ahora lo que me dice es :
    ==================================================================
    Error al cargar la página de Tolchat

    Tolchat está en construcción, por favor intenta mas tarde.
    Configuration errors:

    To fix this error, please set your Connect URL in the application settings editor. Once it has been set, users will be redirected to that URL instead of this page after logging in.
    ====================================================================
    ¿a qe se debe eso?

    y otra duda que tengo , arriba en el ultimo paso donde dice:
    Parte técnica 2: ¿cómo trabajar en el servidor con esta API?

    ¿donde coloco el codigo que aparece en el ejemplo? , porque es un php ,pero cuando lo copio en el body o head ,y cuando entro a mi pagina aparece como si fuera un texto comun desparramado por toda la web,como si el codigo no fuese leido que es php y lo toma como un texto comun.

  8. Hola Seba,

    La verdad es que no lo puse aquí porque se trata más de un problema de programacion que de Facebook, el error que comenta luciano tiene que ver con su servidor. Facebook no tiene nada que ver con si tu servidor interpreta o no PHP. Si no consigues hacer que interprete php y no eres muy bueno en javascript seguramente estás muy lejos de conseguir integrar bien la api de facebook connect.

    Una Api no es una técnica aislada del resto del mundo de la programación. Para estos casos es mejor referirse a sitios web que te enseñen php o javascript que a este blog en el que solo puedo hacer una reseña de lo que he ido viendo y probando pero siempre bajo el supuesto de que se tienen esas nociones. Lo siento pero no es un tema sobre el que creo que en este blog pueda aportar nada que no esté ya varias veces repetido en internet.

    Un saludo.

  9. Hola, genial el articulo, felicitaciones!! te cuento, tengo un cliente que usa mucho facebook y me ha encargado un sitio, mi idea era usar face como CMS. Lo que mas me interesa es saber si hay algun metodo para que me tome la «galeria de imagenes» del facebook y yo la pueda ver reflejada en el sitio via php o js, como sea, asi tambien una seccion de «novedades».

    Saludos!!

  10. Puedes rescatar imagenes de los usuarios (si te dan permiso). Pero mirate su api porque no es algo tan directo. De cara a aprovecharlo como CMS… la verdad es que creo que te complicas mas la vida de lo que te la solucionas. Si quieres soluciones ya hechas mirate WordPress, Drupal o Joomla. Creo que todos tienen plugins de galerias y todos tienen integración con facebook connect (ambas cosas a la vez, ya creo que no)

  11. La verdad es que no he entendido ni papa jaja te cuento mi casa a ver si me puedes ayudar:
    yo tengo una cuenta normal en el facebook no?y en ella tengo mi blog importado, sencillo (importar notas de un blog externo y listo). vale el caso es que decidi crear una pagina en el mismo facebook solo para mi blog y todo bien hasta que intento importar mi blog como lo hiciera anteriormente en mi pagina no? pues el caso es que me lo importa bien porque le das a notas y se ven todas las del blog pero el problema es que no soy capaz de que me las publique en el muro, y tengo la opcion de que lo haga y no hay manera!entonces me encontre con todo esto que leo arriba y buff menuda. Ahora intento cargar los archivos asi, me pone 3 pasos a seguir y llego al segundo y me dice: descargar archivo en tu blog y no hay manera de que me descargue nada y bueno leyendo arriba pues primero no tengo ni idea de donde pegar ese codigo que tu dices, ¿tengo que pegarlo en la plantilla html del blog?¿en que sitio?es que no quiero que se me vea en el blog y eso del boton es imprescindible ya que tampoco quiero que se me vea en el blog…gracias

  12. Buenas,

    creo que os confundis. Lo de connect es algo para programadores y el tema de incluir un feed del blog en facebook no tienen nada que ver. Se supone que hay herramientas de facebook para hacerlo automaticamente pero ni idea de los detalles de su configuracion. Esto es para lo contrario, incluir facebook dentro del blog. Sobre este mismo tema, en la ultima semana Facebook ha sacado un sistema mucho mas sencillo de hacer este tipo de cosas que espero poder comentar en este blog pronto.

    Saludos!

  13. muy buen aporte.
    queria saber como puedo hacer que facebook social plugin funcione en mi web joomla quiero insertar el plugin «coment» si me dieras una mayor luz en esto porfavor.
    te agradesco un monton por la respuesta.

    Saludos

  14. Hola tengo una gran colsuta de muchisimos dias de intento. ya logre intregrar mi login de facebook peor cuando le doy conect me indica. «Solicitud de Permiso: LA_WEB está solicitando permiso para hacer lo siguiente…» — Pero eh visto en muchos sitios que no dice eso cuando pongo en otros sistios aparece «Conectar con Facebook: Conecta peru.com en Facebook con Facebook para relacionarte con tus amigo».

    Este problema es que mis usuarios piensan que tambien sacaran su contraseña y no aceptan eso. encambio la otra forma solo dice conectar y listo.

    me gustaria saber como hacer ese tipo de login. gracias el tipo de login q kiero es:
    http://www.facebook.com/tos.php?return_session=1&nochrome=1&fbconnect=1&extern=2&display=popup&api_key=350ac2b19c5cb2bae38fae425c5a58ad&v=1.0&next=http%3A%2F%2Fwww.peru.com%2Ffacebook%2F%3Ffbc_channel%3D1%26fb_login%26fname%3D_opener%26guid%3D0.8041673742691915&cancel_url=http%3A%2F%2Fwww.peru.com%2Ffacebook%2F%3Ffbc_channel%3D1%23fname%3D_opener%26%257B%2522t%2522%253A3%252C%2522h%2522%253A%2522fbCancelLogin%2522%252C%2522sid%2522%253A%25220.799%2522%257D&channel_url=http%3A%2F%2Fwww.peru.com%2Ffacebook%2F%3Ffbc_channel%3D1&locale=es_ES

  15. wenas mira te comento me sale un error que dice about facebook friends request vale hasta hay bien le doy a conectar ye me manda a otra pagina
    Friend Requests Blocked

    I authorize Facebook to remove my unanswered friend requests to ensure that none were sent to strangers. le doy me sale esto…esta tb me la acepta el problema es aki…Next Steps

    I understand and agree to send future friend requests only to people I know.
    una vez que entro aki y le doy mev sale este error
    Sorry, an error has occurred.

    We’re working on getting this fixed as soon as we can.

    Go Back
    me puedes ayudar?o tng que hacerme uno nuevo?

  16. Buenas facebook Connect está ya desfasado y sinceramente os recomiendo que no perdais demasiado el tiempo ya con sus peculiaridades… en estos momentos estoy escribiendo una serie de artículos sobre como usar la nueva API. De momento podeís mirar:

    http://blog.ikhuerta.com/desarrollando-con-facebook-un-tutorial-de-inicio-en-facebook

    http://blog.ikhuerta.com/facebook-graph-api

    http://blog.ikhuerta.com/usando-facebook-graph-api-con-javascript-sdk-pero-aun-mas-sencillo

    http://blog.ikhuerta.com/crear-una-aplicacion-con-facebook-graph-api-en-modo-fbml

    … aun ninguno está directamente dedicado a la implementación total en webs de terceros pero todo llegará 😉

  17. ok muxas gracias pero yo no entiendo muxo de esto pero weno si tengo que hacer todo esto lo hago sin problema x eso no pasa nada pero lo que yo me pregunto es si tng que hacerlo para poder entrar ??esque es un engorro muy grande estar aki a lo mejor 2o 3 horas configurando….si no hago todo esto tng mi cuenta perdida???gracias x la ayuda de todas formas 😀

  18. Hola estoy integrando el facebook connect en mi foro en foroactivo, para integrarlo me pide insertar el ID de la aplicación, ya los tengo inserto todo bien, pero al momento de que quiero iniciar sesión a traves del facebook connect me sale este error:

    Argumento no válido

    La URL indicada no esta permitida por la configuración de la aplicación.

    Por favor como configuro la aplicación para que permita o que debo hacer, desde ya gracias!!

  19. Hola!!, disculpa sé que este tema no iría aqui pero es k stoy desesperado. Tengo un problema con Facebook, a traves de mi cuenta personal he creado una página FB, pero lo que quiero es que mis actualizaciones de mi muro personal tambien aparescan en el muro de la página, no se como configurarlo. Desde ya muchas gracias!!!

  20. Si vas a gestionar paginas y perfiles al mismo tiempo te recomiendo que mires algun tipo de aplicacion qu ete ayude a publicar al mimsmo tiempo en varios sitios. Por ejemplo Hootsuite.com deberia permitirte publicar en varias cuentas y paginas de facebook, twitter y linkedin a la vez

  21. Buenas noches…! Ante todo mis felicitaciones por este tema…! muy bueno..

    Mi pregunta es la siguiente: como hago para obtener la direcion de correo del usuario de facebook, la necesito para guardarla en mi base de datos y en el momento de registrarse con la cuenta de facebook usar la direccion de correo para ver si ya ya existe una usuario en mi base de datos que ya tenga esa direccion de correo y asignarle el id de facebook a ese registro..

    La api que descargue tiene algunos metodos para supuestamente leer el email pero no lo hace, me devuelte datos vacios…

  22. Buenas Nelson,

    Para empezar olvidate de la vieja api. cada vez falla mas. Mirate al principio de este posts los links a los posts que explican la nueva.

    Para continuar comentarte que para poder acceder al email tienes que tener una applicacion validada por facebook… creo que pagando… miratelo en la descripcion de la peticion de permisos de email veras que te indica como hacerlo.

  23. Hola !!! Alguien me puede explicar porque cuando en un mensaje privado quiero mandar un enlace me dice : «no se ha indicado id de aplicación». Ya no me deja enviar enlaces privados a mis amigos. Decirme que debo hacer. Gracias

  24. Que interesante el tutorial, sin embargo, aún me queda una duda: ¿No podría utilizar la API de facebook y este scrip propiamente tal, de manera local, creando una aplicación facebook http://localhost:8080/ de ninguna manera? la idea de mi mi aplicación es primeramente de forma local (no dispongo de hosting) hacer un login de usurios por medio de su cuenta facebook

  25. Hola con su permiso, no explica muy de muy bien, como utilizarlo, sino usted esta dando, muchas cuerencias en el… deberia de leero, usted, o lo que entiende, escribirlo, no copiarlo todo, por si mismo.
    Se nesecita ayuda, con esto, y es casi el unico, que puede ayudarme/ayudarnos, a entender sobre facebook, conect?. Pero con esta explicación, noc entiende, ni a – b -c -d …../z.
    Porfavor, si podrias acportarla, y solo poner lo esencial, y basico, paea ello…

  26. Para empezar el texto no esta copiado sino explicado.

    Por otro lado lo mismo da ya que al principio del post pone que está desfasado y que google connect ya no hay que usarlo.

    Por favor, mirad los links que indico en el bloque amarillo del principio.

    Un saludo.

  27. Que tenía que escribir una breve noticia en comprar a las gracias por todas las sugerencias fantásticas que está poniendo en este sitio web. Mi búsqueda de Internet ha prolongado en el final del día se reconoce con detalles fiables y técnicas para el comercio con mis compañeros de trabajo. Me gustaría afirmar que varios de nosotros los lectores son realmente en serio la suerte de vivir en un lugar importante en las personas muy diversas, con excelentes indicadores perspicaz.

  28. En relación con el artículo, que esta muy bien planteado y creo que es bastante útil, os recomiendo una aplicación para Facebook que se instala muy fácil y permite tener en tu pagina de FB un formulario hecho a medida que además si se quiere tiene la opción de recibir inmediatamente la información en tu correo electrónico. Considero que es útil sobre todo para las empresas. Lo bueno es que es gratuito, aunque también tiene otras versiones de pago. Os dejo el link:
    http://ufanbuilder.com/es/formulario-de-contacto

Responder a Matias Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *