Indice

Crea tu aplicación En Facebook

Antes que nada debes de crear tu aplicación en Facebook para eso debes ir a http://www.facebook.com/developers/ hacer click en "Crear Aplicación" y seguir los pasos*

Luego de haberla creado, debes configurar los detalles.
A continuación se detalla en forma breve cada pestaña disponible hasta el día de hoy. También cabe mencionar que el area de "Desarrolladores" de Facebook sólo está en Inglés

Habiendo explicado cada opción, es necesario mencionar ciertas cosas que siempre es bueno tener en mente.

  1. Facebook NUNCA guarda archivos de tu aplicación
  2. Facebook NUNCA comparte datos que el usuario no haya deseado compartir concientemente através de asignación de permisos
  3. Facebook SIEMPRE guarda caché de tu aplicación (Por si haces algún cambio y no logras verlo, se paciente)
  4. Facebook PUEDE borrar tu cuenta y todo lo relacionado a ella (aplicaciones, paginas, etc) si no está confirmada
  5. El foro de desarrolladores de Facebook no es tan bueno (tardan en contestar y no siempre lo hacen), asi que tendrás que hacer un sobre esfuerzo para encontrar ayuda de lo que necesitas
  6. FBML es lo mismo que HTML (en maquetación) pero FBML tiene TAGS especiales para Facebook - Lista
  7. Para hacer uso de la API, debes de utilizar siempre tu "Application ID", "API Key" y "Application Secret" que son generados automáticamente cuando creas la aplicación

A medida que vayas creando tus aplicaciones estas te serán mostradas en una lista, cuando ingreses a http://www.facebook.com/developers/

*Debes tener en cuenta que la cuenta con que crees la aplicación debe estar confirmada ya sea atraves de un mensaje de texto (SMS) o con una tarjeta de crédito

Crea tu aplicación Lado del servidor

Supongamos que tenemos que crear una aplicación que nos "salude" (v2.0 de "Hola mundo") y tenemos en nuestro "index.php" esto:

<?
    $quotes = array();
    $quotes[] = 'Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction';
    $quotes[] = 'Imagination is more important than knowledge';
    $quotes[] = 'Gravitation is not responsible for people falling in love';
    $quotes[] = 'I want to know God\'s thoughts; the rest are details';
    $quotes[] = 'The hardest thing in the world to understand is the income tax';

    echo $quotes[rand(0, count($quotes)-1)];
?>

Entonces subimos eso a nuestro servidor y lo podemos revisar en "http://mydomaion.com/hello/" recordemos que esta será nuestra URL que estará en la configuración de nuestra aplicación en Facebook.
Vamos a Facebook y entramos a "http://apps.facebook.com/hello" (suponiendo que esta es la URL que hemos escogido) y vamos a ver exactamente lo que hemos visto en "http://mydomaion.com/hello/" sólo que ahora dentro de Facebook

Desde aquí podemos empezar a hacer nuestro antojo, como por ejemplo guardar resultados en nuestra base de datos (siempre del lado de nuestro servidor), hacer asociaciones de amistades, etc. lo que quieras.

Solicitud de Permisos Acceso a la información

A continuación mostraré las 2 cosas más utilizadas en una aplicación: "Solicitud de Permisos, Publicación en el Wall/Feed"

Muchas veces no sólo basta mostrar algo de información sino que necesitamos accesar a cierta información básica del usuario (ID, email, Publicar, etc).
Retomando el ejemplo anterior, se desea que sólo usuarios que acepten el uso de la aplicación la utilicen (lo sé suena complicado) para eso tenemos a nuestro favor FBML Recuerda la Lista

<?
    $quotes = array();
    $quotes[] = 'Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction';
    $quotes[] = 'Imagination is more important than knowledge';
    $quotes[] = 'Gravitation is not responsible for people falling in love';
    $quotes[] = 'I want to know God\'s thoughts; the rest are details';
    $quotes[] = 'The hardest thing in the world to understand is the income tax';

?>

<fb:if-is-app-user>
    <h1><?=$quotes[rand(0, count($quotes)-1)];?></h1>
    <fb:else> <fb:redirect url="http://www.facebook.com/connect/uiserver.php?app_id=107029046020087&next=http://mydomain.com/hello/&display=page&locale=es_LA&perms&return_session=0&fbconnect=0&canvas=1&legacy_return=1&method=permissions.request"/> </fb:else>
</fb:if-is-app-user>

Si eres observador te darás cuenta se utilizan TAGS que no son "estándar", bueno eso es el FBML para poder conocer todos los TAGS disponibles, refierete a la lista.

<fb:if-is-app-user>: Es un tag de condición que muestra lo que contiene si la cuenta es usuario de la aplicación
<fb:else>: "de otro modo" el "else" que todos conocemos, es apicable a cualquier TAG de condición
<fb:redirect>: Con el parametro "url" se especifica a que URL se redireccionará al usuario


Fijate que en la URL a que redirecciona pertenece a Facebook y se setean valores de la aplicación app_id y next, en el caso de "next" es la URL que colocaste en Facebook, debe ser exactamente la misma, sino Facebook pensará que quieres obtener los datos de los usuarios y te dará error

Si todo sale bien, este será tu resultado:

Excelente, ahora ya tenemos acceso a la información personal del usuario, además de otros permisos, ahora vamos a postear en su Wall ]=)

Para postear en el Wall sólo es necesario saber exactamente qué queremos postear, recordemos que somos una aplicación, continuando con nuestro ejemplo, se desea que cuando el usuario entra a la aplicación se postee en su Wall la frase que le apareció

<script>
    attachment = {
    'caption': 'Albert Einstein\'s Quotes',
    'description': '<?=$quote;?>',
    'media': 
    [{'type': 'image', 
        'src': 'http://mydomain.com/hello/img/ae.jpg',
        'href': 'http://apps.facebook.com/hello/'}] 
    }; 
    Facebook.streamPublish('', attachment);
</script>

Eso es practicamente el código que se necesita para postear en el Wall del usuario, al final el archivo "index.php" nos quedará mas o menos así:

<?
    $quotes = array();
    $quotes[] = 'Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction';
    $quotes[] = 'Imagination is more important than knowledge';
    $quotes[] = 'Gravitation is not responsible for people falling in love';
    $quotes[] = 'I want to know God\'s thoughts; the rest are details';
    $quotes[] = 'The hardest thing in the world to understand is the income tax';
    $quote = $quotes[rand(0, count($quotes)-1)];
?>

<fb:if-is-app-user>
    <script>
        attachment = {
        'caption': 'Albert Einstein\'s Quotes:',
        'description': '<?=$quote;?>',
        'media':
        [{'type': 'image',
            'src': 'http://mydomain.com/hello/img/ae.jpg',
            'href': 'http://apps.facebook.com/hello/'}]
        };
        Facebook.streamPublish('', attachment);
    </script>
    <h1><?=$quote;?></h1>
    <fb:else> <fb:redirect url="http://www.facebook.com/connect/uiserver.php?app_id=107029046020087&next=http://mydomain.com/hello/&display=page&locale=es_LA&perms&return_session=0&fbconnect=0&canvas=1&legacy_return=1&method=permissions.request"/> </fb:else>
</fb:if-is-app-user>

Existen varias opciones para publicar en el Wall de alguien, Facebook te permite modificar a tu antojo casi todo practicamente, para ver una lista detallada de las opciones que tienes puedes ir acá

Dando esto un resultado de la siguiente manera:

Información Librerías

Como ya había mencionado la documentación acerca de todo esto se encuentra bastante concurrida, pensando en eso pues les dejo las librerías que a mi me han servido bastante bien y que no son tan dificiles y hoy por hoy no me han dado problema alguno.

¿Qué hacen? o ¿Para qué sirven? pues simplemente te dan las funciones solo para usarlas de una vez y obtener la info que necesitas. Para conectar tu aplicación con tu base de datos en tu servidor, etc.

Información General

Existen diferentes formas para tratar la conexión con Facebook y utilizar aplicaciones, por otro lado en este pequeño tutorial no se logra abarcar el total de opciones que se tienen ni mucho menos la magnitud de las herramientas disponibles para lograr dicho objetivo.

Por ejemplo existe el lenguaje FQL (Así es, que viene de SQL) que son consultas tipo SQL para la base de datos de Facebook através de su API, por ejemplo tu pides permisos "generales" a la hora de que usan tu aplicación, pero podrías ir mas a fondo, haciendo consultas a la base de Facebook y poder obtener mayor interactividad con el usuario, pienso yo que esto ya sirve mas cuando es un proyecto grande y necesites un poco mas de integración.

Te invitio a que si necesitas ayuda sobre algo, puedas "rebuscarte" en Google la mayoria de cosas no la encontrarás en la primera página, asi que sigue. Además te invito a que le eches un vistazo a mis bookmarks de seguro encuentras algo interesante y que te pueda servir.

Para finalizar no me queda más que decir que, en esto se utiliza lo que es mucho "Prueba y Error" asi que no te preocupes si no funciona a la primera, revisa tu código y vuelve a intentarlo. Como he dicho antes este es un tutorial que toca la creación de una aplicación en Facebook muy por encima, pero te invito a que uses tu imaginación y puedas probar por tu cuenta las posibilidades que tienes.