¿De modo que te han pedido que hagas una aplicación para Facebook y no sabes por dónde empezar? ¿Has llegado a la documentación oficial y te pierdes entre tanto Open Graph, SDK, plugins, dialogs y Graph API? Don’t panic! En este artículo vamos a ver paso a paso cómo empezar a programar en el nuevo sistema de Facebook. ¡Al lío!
Tipos de aplicaciones
En el apartado Getting Started de la documentación oficial vemos que nos dan tres opciones:
- Páginas web. Para crear una aplicación que se ejecute en tu página web fuera de Facebook.
- Aplicaciones móviles. Para crear apps para las principales infraestructuras móviles.
- Aplicaciones en Facebook. Este decir, para crear una aplicación que se insertará dentro de la web de Facebook, en un canvas.
En cualquiera de los tres casos, las tecnologías que utilizaremos serían básicamente las mismas.
Más adelante revisaremos algunas de las tecnologías que nos ofrece Facebook para integrar nuestra aplicación con su infraestructura.
Aplicaciones de Escritorio
Existe un cuarto tipo de aplicaciones, que no se mencionan, y que pueden comunicarse con Facebook: Aplicaciones de escritorio. En esta guía no lo abordaremos.
Además, en la página de inicio ofrecen un apartado de ejemplos donde podrás probar y descargar distintas demos, como el de una aplicación en página web, o una aplicación dentro de un canvas en Facebook. También puedes acceder a vídeos con charlas y guías.
Dando de alta una aplicación
Para entender mejor todos los apartados, y para poder realizar algunos ejemplos, vamos a crearnos una nueva aplicación. Para ello, vamos a seguir los siguientes pasos:
Accedemos a la página de desarrolladores de Facebook: https://developers.facebook.com/
Una vez ahí, seleccionamos “Aplicaciones” en el menú.
En tercer lugar, pulsamos sobre el botón .
Ahora indicamos un nombre y la local de la aplicación y pulsamos Continuar:
Completamos el captcha y pulsamos sobre Enviar:
Y con esto ya estaría dada de alta nuestra aplicación:
Fíjate en la caja superior. Verás dos campos: App ID y App Secret. Estos código los necesitarás para hacer funcionar tu aplicación. El primero es el código que identifica la app, y el segundo es un código de seguridad que utilizarás para la autenticación en el lado del servidor.
Por lo pronto, podemos cambiar los siguientes campos:
- Logo. Corresponde al logo de 75×75 px de la aplicación.
- Icono. Icono de 16×16 px de la aplicación
- App Secret. Este código no debemos compartirlo con nadie. Desde este apartado podremos reiniciarlo si lo deseáramos.
- App Display Name. Nombre con el que se mostrará la aplicación.
- App Namespace. Nombre del espacio de nombres de la aplicación, formado únicamente por caracteres en minúsculas, guiones medios y guiones bajos.
- Contact Email. Dirección de correo electrónico de contacto.
- App Domain. Dominio sobre el que se alojará la aplicación (por ejemplo www.example.com).
- Category y Sub-category. Categorías en las que catalogamos la aplicación.
Además, vemos que podemos definir 4 formas distintas de integrar la aplicación con Facebook:
- Website. Para cuando queramos que en nuestra página puedan los usuarios hacer login con su cuenta de Facebook.
- App on Facebook. Aplicación para incorporar en un canvas dentro de Facebook.
- Mobile Native. Para crear una aplicación para móviles.
- Page Tab. Permite crear una aplicación que se mostrará como una pestaña dentro de una Facebook Page.
Y estas son todas las opciones básicas que tenemos disponibles para configurar una aplicación de Facebook. Sin embargo, podemos acceder a la configuración avanzada desde el menú de la izquierda, pulsando sobre Configuration > Advanced:
En este apartado avanzado por ahora podremos establecer la descripción de nuestra aplicación, y el Sandbox Mode (habilitado indica que sólo los desarrolladores pueden acceder a la aplicación).
Rápido e indoloro, ya tenemos nuestra aplicación creada . Cada vez que queramos volver a la configuración de nuestra aplicación, tan solo tendremos que acceder a la página de desarrolladores de Facebook, apartado Aplicaciones, y seleccionamos la opción deseada.
Página dentro de Facebook
Si quisiéramos acceder a la página de la aplicación (su página dentro de Facebook, no su perfil de configuración), desde su pantalla de configuración, en el menú izquierda, pulsamos sobre View App Profile Page. Veremos una página en blanco esperando a ser completada:
Podremos completar la página de perfil de la aplicación en cualquier momento.
Tecnologías disponibles
Bien, y ¿qué tecnologías nos ofrece Facebook para implementar una aplicación? Éstas son las principales:
1. Social plugins
Corresponde a pequeños plugins o widgets que se pueden incorporar muy fácilmente en cualquier página web ajena a Facebook. Accediendo a la página de cada uno de ellos verás un pequeño formulario que te genera el código necesario para que lo incorpores en tu página. Seguro que estás muy familiarizado con casi todos ellos:
Como ves, a base de insertar este tipo de plugins, puedes crear una página web muy rica en funcionalidades en un tiempo récord. A modo de demostración, puedes consultar esta página, que forma parte del apartado de ejemplos de Facebook. Esta demo hace uso del botón “me gusta”, del feed de actividades, de las recomendaciones y de los comentarios.
2. Diálogos
Podemos definir los diálogos como ventanas emergentes que solicitan al usuario permiso para realizar alguna acción.
Más adelante veremos que si, por ejemplo, quisiéramos que nuestra aplicación publicara una entrada en el muro de un usuario, necesitaríamos que éste nos hubiera concedido previamente permisos para realizar esta acción. Con los diálogos esto no es necesario, ya que por definición un diálogo necesita que el usuario lo autorice para realizar cualquier acción.
Podemos invocar los diálogos a mano, sin embargo en general suele ser mucho más cómo realizarlo mediante alguno de los SDK que Facebook nos ofrece. En concreto, para páginas web, utilizaremos el SDK JavaScript mediante el método FB.ui. En el apartado del SDK de JavaScript veremos cómo invocar estos diálogos.
Por lo pronto, vamos a ver cuáles son los distintos diálogos que nos ofrece Facebook:
Diálogo de Feed
Permite al usuario añadir a su muro, desde nuestra aplicación, una publicación.
Muestra un diálogo para añadir a un amigo.
Diálogo OAuth
Solicita al usuario unas determinadas autorizaciones, y concede permisos a la aplicación.
Diálogo de Pago
Permite al usuario adquirir nuevos créditos de Facebook.
Diálogo que permite al usuario enviar una petición a uno o más amigos.
Diálogo de envío
Diálogo para que el usuario envíe un mensaje a algún amigo, a un grupo de amigos, o a una dirección de correo.
3. Autenticación y Permisos
A menudo necesitaremos que los usuarios nos autoricen a acceder a su información. Por ejemplo, cuando queramos que puedan iniciar sesión en nuestra web utilizando su cuenta de Facebook, o cuando desde nuestra aplicación queramos acceder a determinados campos de su perfil de usuario. Para solicitar esta autorización utilizaremos el Diálogo OAuth.
Cada vez que se utiliza el diálogo OAuth, podremos pasarle información al diálogo acerca de la los permisos de acceso que autorizará el usuario. Te recomiendo que revises la lista de todos los posibles permisos. Además, ten en cuenta que cuantos más permisos solicites a un usuario, menor será el número de personas que decidan autorizar a tu aplicación.
Existen dos métodos posibles de autenticación: Desde el servidor, o desde el cliente. Pero, para simplificar, podemos decir que son equivalentes el uno al otro.
4. Graph API
El nucleo de Facebook es un grafo social, donde cada persona, foto, evento o página tiene su ID único, y donde existen conexiones entre todos ellos (por ejemplo, amistades, etiquetas en fotos, contenidos compartidos, etc.).
Para acceder a las propiedades de cualquiera de estos objetos accederemos a la URL: https://graph.facebook.com/ID cambiando ID por el identificador del objeto que queramos consultar. Como resultado, nos devolverá un objeto JSON.
Por ejemplo, al comienzo de este artículo creamos una aplicación. Puedes coger el App ID de tu aplicación y acceder a su información. Te saldrá algo similar a esto:
{ "id": "256797284360192", "name": "chusete demo", "description": "Aplicaciu00f3n de pruebas de Chusete", "category": "Utilities", "subcategory": "News", "link": "http://www.facebook.com/apps/application.php?id=256797284360192" }
En el caso de los usuarios y de las páginas, cuando tengan un alias, se podrá usar como alternativa al ID.
Por supuesto, todas estas peticiones devuelven por defecto tan solo la información pública de ese objeto/persona. Para acceder a información privada, debemos contar con su autorización. Esta autorización se proporciona mediante el parámetro GET access_token.
Graph API Explorer
Lo mejor para aprender más sobre Graph API es utilizar la herramienta Graph API Explorer, un sencillo explorador para comprobar el resultado de todas las posibles consultas que podemos realizar: http://developers.facebook.com/tools/explorer. Vamos a ver cómo se usa:
En primer lugar, debemos establecer los permisos que le otorgamos a la herramienta. Para ello pulsamos sobre el botón Get Access Token, donde se desplegarán casillas con todos los posibles permisos (tal como vimos en el apartado anterior, sobre Autenticación). Una vez establecidos, podemos realizar las consulta que queramos desde la columna derecha Conexiones:
En resumen, en esta utilidad veremos lo siguiente:
- Access Token – Es el parámetro access_token que se proporciona en cada petición al Graph API.
- Tipo de petición – Es un campo desplegable. Por defecto tendrá el valor GET.
- URL de petición – Corresponde a la URL sobre la que se realiza la petición.
- Resultado – Es el bloque gris sobre el que se muestra el resultado JSON.
- Conexiones – Son enlaces a distintas conexiones sobre el objeto actual.
- Fields – Campos que muestra el objeto JSON para la petición actual. No tienen por qué mostrarse todos.
5. Open Graph Protocol
Esto no es una tecnología del core de Facebook propiamente dicha, pero sí es algo sobre lo que se apoya. ¿De qué se trata? Voy a explicarlo mediante un ejemplo. Supón que creas una página web de restaurantes, donde cada uno tiene su propia URL. Un día un usuario comparte esta URL en Facebook. ¿Qué ocurrirá? Que Facebook elegirá la información y las imágenes que él considere relevante. Pero, ¿y si quisiéramos nosotros decirle a Facebook (y otras redes sociales) la información que debe mostrar? Para dar respuesta a eso surge el protocolo Open Graph.
En otras palabras: Hace que nuestras páginas web se conviertan en objetos “del mundo real” con el que pueden interactuar las redes sociales. Películas, restaurantes, celebridades, etc.
En el caso concreto de Facebook, además, cuando un usuario haga clic en el plugin del botón “Me gusta” de una de tus páginas, será equivalente a que hiciera clic en “Me gusta” de alguna de las Facebook Pages, por lo que podrás enviarle actualizaciones a su Feed. Mola, ¿no?
Su funcionamiento no podría ser más sencillo. Open Graph Protocol está basado en RDFa, por lo que mediante etiquetas meta puedes añadir semántica a tus páginas. Además, para una correcta integración con Facebook, debes añadir el plugin del botón “Me gusta”.
Para más información, revisa la página oficial de Open Graph Protocol: http://ogp.me/
6. Otras tecnologías
Además de todas las tecnologías que hemos visto, existen otras de tipo avanzado que, por lo general, no será necesario usarlas. En concreto estaríamos hablando de:
- FQL. Facebook Query Language, o Lenguaje de consultas de Facebook. Similar a SQL, sirve para consultar los datos que ofrece Graph API.
- API de internacionalización. Mediante esta API puedes aprovechar la infraestructura de internacionalización de Facebook para tu aplicación.
- API de créditos. Para que los usuarios puedan realizar pagos de créditos de Facebook para utilizar en tu aplicación.
- API de publicidad. Permite crear y gestionar mediante código tus campañas publicitarias.
- API de Chat. Para aquellos desarrolladores que quieran integrar el chat de Facebook en sus aplicaciones, mediante el protocolo estándar Jabber/XMPP.
APIs obsoletas. Además, existen determinadas APIs que han quedado obsoletas y a las que pronto Facebook dejará de dar soporte, como la API REST, el lenguaje de marcado FBML, o la API JavaScript.
SDKs
Por último, vamos a repasar los distintos kits de desarrollo que nos regala Facebook. Cabe destacar que no es imprescindible utilizarlos, ya que podremos realizar la autenticación, invocación de diálogos, o las llamadas a la API a mano. Pero, como podrás imaginar, resulta mucho más sencillo utilizar una herramienta ya probada que lo haga por nosotros.
Existen cuatro SDKs:
Aquí vamos a hablar de los dos primeros.
1. JavaScript SDK
Permite realizar llamadas a la Graph API, crear diálogos, renderizar los Social Plugins, además de otras muchas cosas. Para usar el SDK, debemos intrducir el siguiente código a nuestra aplicación:
<div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : 'ID DE TU APP', status : true, // comprobar estado de login cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión xfbml : true, // ejecutar código XFBML channelURL : 'http://WWW.MIDOMINIO.COM/channel.html', // fichero channel.html oauth : true // habilita OAuth 2.0 }); </script>
Y en el fichero channel.html añades el siguiente contenido:
<script src="http://connect.facebook.net/en_US/all.js"></script>
Y ya lo tienes. Tu página está preparada para ejecutar código del SDK JavaScript de Facebook.
JavaScript Test Console
Del mismo modo que teníamos una herramienta para poder probar la Graph API, también tenemos una consola de desarrollo para el SDK de JavaSript. Para ello, accedemos a http://developers.facebook.com/tools/console/ pulsamos sobre Login para concederle permisos a la aplicación de la consola de desarrollo, introducimos el código JavaScript que queremos probar, y pulsamos sobre “Run Code”.
Para hacer las cosas más fáciles, podemos pulsar sobre el botón “Examples” al pie del textarea, y seleccionamos el ejemplo que deseamos probar.
2. PHP SDK
El SDK oficial para PHP de Facebook es un proyecto open source que se encuentra alojado en GitHub: https://github.com/facebook/php-sdk/.
Si bien existe un ejemplo básico, pero completo, sobre su uso, vamos a resumir aquí las principales operaciones:
Código de inicialización:
require 'php-sdk/src/facebook.php'; $facebook = new Facebook(array( 'appId' => 'TU_APP_ID', 'secret' => 'TU_APP_SECRET', )); // Obtener ID de usuario $user = $facebook->getUser();
Llamada a la API (Graph API):
if ($user) { try { // Procedemos sabiendo que tenemos un usuario que ha iniciado sesión y concedido permisos. $user_profile = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); $user = null; } }
Obtener URLs de inicio de sesión y de salida:
if ($user) { $logoutUrl = $facebook->getLogoutUrl(); } else { $loginUrl = $facebook->getLoginUrl(); }
Resumen
Este ha sido un post bastante extenso, al que le seguirán otros con distintos casos de uso. Por lo pronto, hemos visto que es posible implementar distintos tipos de aplicaciones para Facebook: para el móvil, para una página web, y empotradas en Facebook. Hemos revisado paso a paso el proceso de alta de una nueva aplicación, donde establecemos los parámetros básicos, el nombre, logo, descripción, etc. También hemos revisado todas las tecnologías que nos ofrece Facebook para desarrollar aplicaciones en su ecosistema: Social Plugins, Diálogos, Autenticación y permisos, Graph API y Open Graph. Por último, hemos repasado las distintas bibliotecas que nos da Facebook para facilitar el desarrollo de aplicaciones en JavaScript, PHP, iOS y Android, centrándonos en las dos primeras.
Ahora que conocemos bien todo marco de trabajo sobre el que se apoyan las aplicaciones en Facebook, estamos listos para comenzar. En el siguiente post realizaremos una pequeña aplicación que sirva como demo de todos estos conceptos.
¿así o más desmenuzado el tema? muy buena guía.
Muy buena intro, me a despejado varias dudas y aclarado muchas cosas… muchas gracias
Sahch, me alegra mucho que te haya sido de utilidad
Gracias por comentar!
Hola, estoy intentando hacer mi primera aplicacion, para ello he escrito el siguiente codigo
FB.init({
appId : ‘MIID’,
status : true, // comprobar estado de login
cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
xfbml : true, // ejecutar código XFBML
channelURL : ‘http://WWW.MISITE.COM/channel.html’, // fichero channel.html
oauth : true // habilita OAuth 2.0
});
ESTAMOS EN EL INTENTO 3
‘MI_ID’,
‘secret’ => ‘MI CODE’,
));
// Obtener ID de usuario
$user = $facebook->getUser();
echo (“El usuario es $user”);
?>
Pero me aparece el siguiente error.
Warning: curl_exec() has been disabled for security reasons in /home/MISITE/public_html/Test1000/php-sdk/src/base_facebook.php on line 803
Alguien sabe a que se debe?
JuanZ, el SDK de PHP utiliza las funciones cURL para hacer peticiones al servidor de Facebook. Parece que tu alojamiento lo tiene deshabilitado por motivos de seguridad, y por eso te lanza esa alerta. Ponte en contacto con tu compañía de hosting para ver si pueden habilitar la función curl_exec().
Suerte!
Gracias! por fin algo de verdad útil para los que estabamos perdidos en el ancho mundo.
gracias excelente articulo, muy bien explicado a pesar de ser un rompedero de cabeza usar esta api
podrias explicar como introducir en mi web
el Diálogo de petición o donde puedo encontrar el como hacerlo. Gracias.
Hola Alfonso
¿Qué es lo que quieres hacer exactamente? Existen muchos plugins (Social Plugins) que permiten añadir fácilmente funciones sociales a una web. Si lo que realmente quieres es un diálogo, en la tercera parte de esta guía expliqué cómo insertarlos.
Intento poner el
Diálogo de petición
Diálogo que permite al usuario enviar una petición a uno o más amigos.
que bien señalas arriba, aun me pierdo un poco con la configuración basica en
La aplicación del dominio: (www.miurl.es)
me sale error
debe derivarse de la URL del sitio o de su URL de Web Móvil.
Muy bueno el post, me aclaro un par de dudas. Felicidades, y en espera del próximo post
Hola Gabo
Gracias por el comentario, y me alegra mucho que te sea de utilidad.
Tienes los otros 4 post disponibles: Parte2, Parte3, Parte4 y Parte5.
¡Un saludo!
muy buena introducion a la Graph Api de facebook
Gracias.
Muchas gracias chusete, sigue posteando mas ejemplos que son de gran utilidad. Y por favor cualquier post que lo subas ya tienes mi correo.
Saludos.
¡Eres un monstruo!… Muchas gracias por esta fenomenal guía de introducción a la programación Facebook. Un saludo
Hola Gracias, una pregunta como comentario de faceboock en mi web la nueva versión da facebock me bota los códigos en html5 y xfbml, así mismo me pide que Incluya el SDK de JavaScript en la página web colo lo hago.
Gracias
Muy bueno, muchimas gracias.
Hace una semana que me presentaron un proyecto a desarrollar en facebook y no encontraba ningún sitio donde explicaran claro como iniciarte en este nuevo ambito de programación.
Gracias a esta página ahora si entiendo como empezar.
En cuanto haga unas pruebas, me pongo con los siguientes manuales.
¿tengo tu permiso para enlazar esto en mi nuevo blog? Si es así, en cuanto lo tenga, te aviso.
un saludo y siguen así.
Hola, estoy desarrollando una aplicación que se trata de integrar un WordPress dentro una FanPage. Mi problema surge cuando el usuario está logueado que no se visualiza dicha aplicación, en cambio, cuando el usuario no está logueado se ve correctamente. Dónde puede estar el error? Muchas gracias