Do not speak Spanish? Read this post in English.

Sábado, 31 d julio d 2010.

Desarrollando con Facebook, un tutorial de inicio en Facebook

La verdad es que desde la aparición de Facebook Graph Api me he quedado un poco atrasado en cuanto a lo que te ofrece y deja de ofrecer Facebook a día de hoy. Por eso he querido dar un repaso de nuevo desde 0 al desarrollo de aplicaciones y elementos de Facebook. Este post es por un lado una forma de obligarme a entender todos los detalles y por otro una pequeña guía para empezar desde 0 a entrar en este mundillo.

Paso 1, dar de alta una pagina o una aplicación

En Facebook básicamente podemos crear páginas de Facebook (de tiendas, negocios, lugares, personalidades, conceptos, etc.) o programar nuestras propias aplicaciones de Facebook que puedan usar los ususuarios.

Páginas: Para dar de alta una página en facebook tiene que estar siempre asociada a un usuario de Facebook "real". La forma más sencilla de hacerlo es salir de tu sesión y en vez de logarte en Facebook entrar para crear una página.

Las páginas en cuanto a desarrollo nos ofrecen simplemente la creación de varias pestañas en FBML, que son html corriente pero en las que podemos usar el código FBML de Facebook.

Aplicaciones: Para dar de alta una aplicación debes hacer que tu usuario de Facebook añada la aplicación Facebook Developers y a partir de ahí ya podemos crear distintas aplicaciones.

En cuanto a desarrollo cada aplicación nos ofrece 3 modos distintos en los que funcionar y luego -aparte- la creación de pestañas de la aplicación. Algunos son complementarios (pueden usarse a la vez).

1- Aplicación en "Canvas": Son la mayor parte de las aplicaciones que conocemos. Estas aplicaciones quedan totalmente integradas en Facebook de forma que es el propio Facebook el que muestra la página.

2- Aplicaciones en "Iframe": Este es un pequeño truco para aquellos que necesitan que su aplicación se vea en Facebook pero no necesitan interactuar directamente con su sistema. Creando una aplicación de este tipo lo que creamos es un IFrame hacia nuestra página de destino y a partir de ahí nos olvidamos de Facebook.

3- Aplicaciones mediante la Facebook Graph Api SDK Javascript: Este es el sistema javascript que ha venido a sustituir a Facebook Connect y que nos permite disponer de la integración con Facebook y el tipo de funciones que nos dan en Canvas pero en cualquier web que deseemos.

2+3 - Muchos desarrolladores deciden usar la opción 2 y la 3 a la vez mostrando una pagina que nada tiene que ver con Facebook con un Iframe y luego añadiendo las funcionalidades de Facebook con el SDK de javascript.

- Además, ya sea por iframe o por canvas, para cada aplicación disponemos de la posibilidad de crear una pestaña de Facebook que añadir a cualquier página y que tiene parte de ambas cosas: por un lado la carga de nuestro servidor por lo que no es simplemente FBML (podemos programarla por detrás con nuestro lenguaje de servidor), por otro no dispone de datos de usuario con lo que la integración es menor que con cualquier aplicación (aunque similar a cualquier pestaña).

¿Página + Aplicación? Depende de lo que vayamos a hacer es bastante probable que necesitemos usar ambas cosas a la vez. Veamos un escenario típico: debo llevar una página de Facebook de una marca y creo también una aplicación relacionada con su temática. Lo suyo es que acabe dando de alta una pestaña de la aplicación y en la página y desde ella los usuarios de la página puedan acceder a la aplicación. Lo bueno de hacerlo de esta forma es que las pestañas de tu página de facebook pasan a otro nivel, donde puedes controlarlas desde tu servidor mucho más que simplemente con FBML.

Paso 2, Configuraciones de todo esto

Configurar una página de facebook no tiene mucho misterio. Quizás quieras echar un ojo a la Guia para community managers en Facebook para ver como orientarla.

Un vez creada una página podemos acceder a la misma y a "Editar Página". Ahí podremos añadir pestañas FBML añadiendo la aplicación "FBML Estático" a tu página y configurandola.

En cuanto a las aplicaciones tienen un poco más de miga. Al visualizar el panel de nuestra aplicación vemos un menú a la derecha en el que encontramos el elemento "Editar configuración". Ahí es donde escogemos el comportamiento base de nuestra aplicación. Veamos los elementos a configurar más importantes (aunque es mejor intentar entenderlos todos):

Básico > Nombre de la aplicación: Aquí escogemos nuestro nombre de aplicación, para el que disponemos de 20 carácteres.

Básico > Descripción: Esta parte nos puede ayudar en el SEO de Facebook; las búsquedas de aplicaciones que hagan los usuarios mostrarán y se basarán en esta parte.

Básico > Icono y Logotipo: Importantes, ya que Facebook los usa para varias cosas y tu aplicación no estará completa sin ellos.

Básico > Agregar página a Favoritos: Si deseas que cuando un usuario use su link hacia tu página no entre directamente en su home, sino en otra parte, indícala aquí.

Autenticación > Instalación posible para : Seleccionando Usuarios, estos podrán usar tu aplicación añadiéndola como pestaña o solo como link, seleccionando páginas, permites a las páginas que añadan también tu aplicación como pestaña (importante si vamos a usar una combinación de página + pestaña).

Autenticación > URLs de redireccionamiento tras autenticación: Estas urls, que deben estar en tu servidor, le sirven a Facebook para avisarte cada vez que alguien se da de alta o baja en tu aplicación. Facebook te hace un ping con distintos parametros por post a esta url para avisarte. Usando al menos la primera de ellas -Post-Authorize- nos ahorramos problemas de validación de nuestra página (por lo que es mejor usarla).

Perfiles > Nombre de la pestaña: Si queremos que nuestra aplicación pueda ser una pestaña de Facebook indiquemos aqui el nombre.

Perfiles > URL de pestaña: Si queremos que nuestra aplicación sea una pestaña de Facebook tenemos que rellenar este dato indicando la url de nuestro servidor de la que sacar la página.

Perfiles > Editor de perfil: Si queremos que nuestra aplicación se le ofrezca a los usuarios como un tipo de publicación nueva a realizar debemos indicar esta información.

Lienzo > Dirección web (URL) de la página de lienzo: Aquí indicamos el directorio Facebook de nuestra aplicación. Esta funcionará ligada a nuestra url real del servidor, de forma que al cargar directorios o archivos dentro de esta url, en realidad se solitarán a la misma ruta pero en nuestro servidor.

Lienzo > Canvas Callback URL: Aquí indicamos la url de nuestro servidor a la que debe solicitarnos las páginas.

El uso de estos dos parámetros es esencial para dar cuerto a nuestra aplicación. Si por ejemplo yo indico en dirección web "mi-aplicacion" y en Canvas Callback "http://midominio.com/appFacebook/" al cargar la aplicación facebook irá a buscar el contenido a "http://midominio.com/appFacebook/" y al cargar una pagina interna como podría ser "/mi-aplicacion/undirectorio/unproceso.php" facebook irá a buscarla a "http://midominio.com/appFacebook/mi-aplicacion/undirectorio/unproceso.php".

Esto también afecta a la pestaña, definida en "Perfiles > URL de pestaña" que también debe definirse partiendo de lo definido en "Canvas Callback".

Lienzo > Redirección de URL post-autorizada: Cuando un usuario acaba de aceptar tu aplicación se redirigirá a esta url (que también parte de "Canvas Callback").

Lienzo > Método de renderización: Aquí es donde escogemos si nuesta aplicación y pestaña debe trabajar como canvas o como iframe. Siempre es más recomendado (y por lo general más sencillo) usar canvas.

Connect : Nos sirve para indicar como interaccionar con Facebook cuando creamos una aplicación de Facebook desde nuestra página (o mediante iFrame) con el SDK Javascript.

Paso 3, integrando nuestro sistema

Este paso no tiene sentido en páginas de Facebook solo en aplicaciones.

En aplicaciones existen dos formas de integrar facebook en nuestro sistema. Si nuestra aplicación está derrollada en Canvas querremos usar la Facebook Graph Api en nuestro servidor con el SDK apropiado:
Javascript SDK, PHP SDK, Python SDK, iphone SDK o Android SDK.

El uso de estos SDK, con la nueva Facebook Graph Api, se ha vuelto muy simple, de forma que la única referencia que vamos a necesitar es como se conforman los nodos de la Graph Api. Sí, tendremos que aprender a autenticarnos y a llamar a la función Api, pero se ha vuelto mucho más sencillo que antes.

Paso 4, visualización

La visualización de nuestras aplicaciones en un principio es por HTML, por lo que no vamos a tener demasiadas complicaciones. Si trabajamos con pestañas o con aplicaciones dentro de facebook tenemos que tener en cuenta el ancho de páginas antes de ponernos a diseñar nada pero por lo demás todo es suele ser en el desarrollo web, con una excepción: el FBML.

El FBML es una ayuda que nos da Facebook en la visualización y uso de nuestras pestañas y aplicaciones. Son etiquetas XML parecidas al XSL pero con la particula "fb:" delante de cada una. Facebook interpreta estas etiquetas, ya sea al cargar nuestra web mediante canvas o con la javascript SDK -pero no simplemente por cargar una página por iframe- y las transforma en lo que deberían ser.

Las etiquetas FBML se encuentran bien documentadas aquí. En otro artículo espero poder dar un repaso a las más vistosas y útiles, pero este artículo ya empieza a ser muy largo para tratarlas como se merecen.

---

Con estos pasos ya podremos disfrutar de toda la integración con Facebook que deseemos. Una vez entendido el sistema es bastante simple ponerse a trabajar y con la nueva api todo se vuelve más rápido, lógico y sencillo.

Temas Relacionados: General programacion tutoriales

Autor:

15 Comentarios para “Desarrollando con Facebook, un tutorial de inicio en Facebook”

  1. horacio paniagua dice:

    Bueno, deseo saber si me puedes apoyar en algunas dudas acerca de facebook. si esto es posible te lo agradezco de antemano. mi nombre es Horacio Paniagua, vivo en México y hasta hace poco incursiono en facebook. Quiero crear un facebook tipo 'BLAKE LEWIS MÚSICO BAND' donde hay una pestaña de 'Información' con un formato diferente al genérico. y que contiene una pestaña de wikipedia. Probablemente mi ignorancia en el tema sea mucha o no he sabido investigar bien, porque lo he intentado sin encontrar información adecuada. Podrías ofrecerme una guía para resolver estas dudas?. Sin embargo deseo también agregar otras pestañas,como video, eventos, etc. ¿es posible hacer todo esto, o no?

    como lo dije anteriormente, de antemano gracias por la ayuda.

  2. candelaria dice:

    megustariasaber que pasa que no me deja entraren la pagina darme de baja para poder habrir una nueva gracias

  3. Norberto dice:

    Hola,

    He estado buscando como integrar el muro de facebook dentro de mi página web, ví tus tutoriales que estan muy buenos, pero ojalá pudieras hacer un "paso a paso" para novatos.

    Ye he visto el muro de otros usuarios en sus páginas y se que se puede hacer pero no entiendo como hacerlo, conozco un poco de programación, pero facebook se me ha hecho particularmente complicado.

    Gracias por tu ayuda.

  4. clauidio baeza dice:

    HOLA

    me presento soy claudio baeza soy chileno estudiante en instituto profesional, estudio informática biomédica, mi pregunta es la siguiente, estoy desarrollando un sistema de gestión para una farmacia y dentro de este sistema cree una receta dijital, lo cual al emitir la receta el medico este mendaje aparesca automaticamente en el computador del encargado de la farmacia, mi idea es usar el mismo medio que usa facebook para notificar los mensajes o si te han publicado en tu muro, mi idea es usar ese misma función me gustaria si usedes me podrian ayudar con el codigo php que se utiliza, gracias
    saludos!!!

  5. ikhuerta dice:

    Buenas Clauidio,

    Esto es un blog personal no una empresa de programacióp 😉

    En canto a tu solicitud si lo que quieres es disponer de algo parecido a facebook pero propio mirate http://www.oxwall.org/ es un cms en php que te permite hacer cosas bastante similares a Facebook para soluciones privadas. Entiendo que modificandolo podrías hacer algo parecido a lo que quieres.

    Aunque sin duda creo que para algo tan especializado y critico como son receras lo mejor sería programarlo de 0 para adaptarlo justamente a tus necesiadades y darle la seguridad que el sistema requiere.

  6. Fanny Palacios dice:

    Hola, gracias por estos tutoriales, son muy buenos. Quiero preguntar cómo hago para exportar los seguidores que tengo en un perfil a una página, la empresa tenía un perfil y ahora tenemos la página cómo podría exportar o migrar esos seguidores, hay alguna forma?

    Gracias,

  7. angelo dice:

    hola.

    tengo un duda . en la caja de comentario . ps si te das cuenta ahi no se puede poner link y aparecer como el perfil . ejmplo yo pongo el link de souncloud en mi perfil y me sale con la imagen y todo eso pero en la caja de comentario no sale nada . o quiero saber si hay otra opcion para que se pueda ver el link mas la imagen .
    gracias

  8. Daniela dice:

    Hola,
    Muchas gracias por el tutorial. Estoy teniendo el problema que tiene mucha gente de no poder poner la aplicacion en el muro de mi fan page.
    Alguna idea?.
    Gracias.

  9. ikhuerta dice:

    Lo de la aplicación en la FanPage es que sencillamente no puede hacerse.

    Lo suyo es hacer en tu aplicación lo que se llama un TAB, Se indica en la configuración de tu aplicación que URL tiene que hacer de TAB. Esta url debe ser una url sencilla, sin FBML ni Google Graph, solo una pasarela para entrar realmente en la aplicación.

    Una vez indicado, solo tenemos que ir a la pagina de facebook de la aplicación (no a la aplicación directamente, sino a la página con muro y todo que facebook crea sobre la aplicación). En esta página veremos un enlace para poder añadir el tab a nuestra página...

  10. Daniela dice:

    Muchas gracias por responder tan rapido!.
    Disculpame que te moleste de nuevo, lo que quise decir es en una pestaña como me indicas vos (en un TAB).
    Tengo configurada la aplicacion asi: http://img864.imageshack.us/img864/8263/facebooky.jpg y la página de la misma es http://www.facebook.com/pages/Carrito-de-prueba-Community/211095485638228 .Esta bien?. Ya no se por donde mas buscar!.

    Gracias!!

  11. jose dice:

    hola Daniela, yo tmb tengo el mismo problema q tu, encontraste alguna información sobre como arreglar tu prolema?? t agradeceria bastante!!!gracias!!!

  12. Pepe dice:

    Se Puede usar el SDK y API de Facebook para trabajar con Static HTML Iframe Tab? https://apps.facebook.com/static_html_plus/?fb_source=search&ref=ts&fref=ts

  13. Diego dice:

    una pregunta que no logro encontrar y veo que aqui lo nombran, IKhuerta tienes idea de como hace .....facebook.com/static_html_plus/... para saver que debe mostrar,
    En mi caso estoy haciendo un app para una web de ofertas, lo que me pide el cliente es que sus anunciantes puedan añadir el facebook tab pero que en vez de dirigir al app home de ofertas, se muestre solo ese anunciante que añadido su tap. No pretendo que me soluciones, pero si tienes algún dato que me sirva para hacer eso realmente ya me estoy dando por vencido de buscar en google y no doy como puedo hacer dinámico el contenido dependiendo desde que facebook page se lo esta viendo.

    • ikhuerta dice:

      Yo probaria con una app normal y con links dinamicos segun el id de cliente dentro de esta. Al final como la app es una web tuya y conoces el id de cliente puedes hacer la personalizacion que quieras

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title