Tutorial – Cómo crear aplicaciones para Facebook

Crear aplicaciones para Facebook

Despues de los mini-tutoriales que he subido a la web, en los que se explica cómo conectar tu aplicación con facebook, logearte o publicar en el muro, vamos a poner todo esto en práctica para conseguir montar una mini-aplicación.

En este artículo voy a describir los pasos necesarios para montar una aplicación como esta “https://apps.facebook.com/super_horoscopo“, prácticamente estos pasos son validos para la mayoría de las mini-aplicaciones.

Primer paso | incluir facebook.php

En el primer paso vamos a incluir la librería facebook.php, para esto, te la puedes bajar de github que es donde están alojadas todas las versiones y donde encontrarás la última versión, después la subes a tu servidor y la llamas al principio de tu página.

require 'github/facebook.php';

Segundo paso | Instancia Facebook

Segundo paso, creas una instancia de tu Aplicacion ($facebook) con tu id y tu clave secreta, que después utilizaremos para, por ejemplo, saber si tenemos o no permisos para acceder a los datos del cliente o para publicar en el muro del usuario.

1
2
3
4

$facebook = new Facebook(array(
  'appId'  => 'tu_id',
  'secret' => 'tu_secret',  
));

Tercer paso | Solicitar Login y permisos

Tercer paso, en este paso vamos a hacer varias cosas primero vamos a obtener el usuario que hay logeado y si no hubiese ninguno cargaríamos una página en la que Facebook nos permitiese hacer login, al finalizar este proceso ya tendremos un usuario logeado.

Después de esto, una vez que obtenemos el usuario comprobamos que nuestra aplicación tiene los permisos suficientes para publicar, conocer su cumpleaños, y si no fuera así Facebook mostrará una página en la que se detallan los permisos que le solicitamos al usuario, que serán los necesarios para utilizar nuestra aplicación.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$user = $facebook->getUser();
 
if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}
if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl(            array(
                'scope'         => 'email,publish_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown'
            ));
}
 
    if (!$user) {
        echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
        exit;
    }

Cuarto paso | Publicar en el muro

Cuarto paso, llegamos al paso más importante que es igual de fácil que los anteriores, en este paso es donde vamos a publicar en el muro del usuario desde nuestra aplicación. Para esto he creado una función (function publica) en el que le paso los valores a través de las variables $mensajemuro o $imagen (si no necesitáis que sean variables podéis poner los literales que queráis), estas variables sirven para poner el mensaje que voy a escribir en su muro o la imagen que quiero poner.

Aquí encontraréis más información sobre cómo crear el post:

http://developers.facebook.com/docs/reference/api/post

1
2
3
4
5
6
7
8
9
10

 function publica($newPostId,$facebook,$mensajemuro,$imagen){
 
    $newPostId = $facebook->api( '/me/feed', 'POST', array ( 
  'picture' => $imagen,
    'message' => $mensajemuro,
    'link' => 'http://apps.facebook.com/super_horoscopo/', 
  'name' => 'Horóscopo diario'
  ));
 
 }

Quinto paso | Mostrar la aplicación

Quinto paso, ya en el body de tu página tienes que incluir lo que tienes que mostrar cuando el usuario no está logeado, lo puedes hacer de muchas maneras, en este caso le digo con un “if – else” que si no hay ningun usuario con login que muestre la página de dialogo de facebook con la etiqueta “Login with Facebook” para que el usuario haga click y se logee, por otro lado, si el usuario está logeado (entrará por el else) y será cuando siga cargando el resto de la página.

1
2
3
4
5
6
7
8
9
10

 <div id="fb-root"></div>  
 
 <?php if (!$user){  
     echo("<script> top.location.href='" . $dialog_url . "'</script>");       
 ?> 
     <a href="<?php echo $loginUrl; ?>">Login with Facebook</a>
 
    <?php }else{ ?>          
 
 <p><font face="Arial" size="3">

Después, cuando la página se ha cargado totalmente y el usuario ha realizado la navegación que requiera la aplicación, y ya estén cargadas las variables de mi función publica con los valores que quiero, solo tengo que hacer llamar a la función y pintar el contenido de las variables en el muro del usuario (en el evento onClick, onLoad o cuando lo requiera el programa).

publica($newPostId,$facebook,$mensajemuro,$imagen);

Sexto paso | Botón Me gusta!

Sexto paso, por último, con este iframe puedes incluir el botón me gusta y ver los usuarios que han hecho click en tu “me gusta”, puedes cambiar el ancho y alto que quieres además de el idioma, quedaría algo así:

1
2
3
4
5
6
7
8

<script src="http://connect.facebook.net/es_ES/all.js"></script>
 
<iframe src="http://www.facebook.com/plugins/like.php?
app_id=265016056860441&amp;href=http%3A%2F%2Fapps.facebook.com%2Fsuper_horoscopo%2Findex.
php&amp;send=false&amp;layout=standard&amp;width=360&amp;show_faces=true&amp;action=like&
amp;colorscheme=light&amp;font&amp;height=30" scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; width:360px; height:30px;" allowtransparency="true">
</iframe>

Ahora os quedaría montar el contenido de vuestra aplicación, que va a hacer, los mensajes que va a escribir, la interactividad con el usuario y un largo etc.
Si queréis ver la aplicación funcionando es esta:

https://apps.facebook.com/super_horoscopo

En la web hay más mini tutoriales acerca de aplicaciones Facebook, si queréis podéis utilizar el buscador del blog.