oct
13
2011

Tutorial – Cómo crear aplicaciones para Facebook

Descarga el contenido del Artículo en PDF Download PDF

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.

facebook login user


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;
    }

aplicacion facebook login permisos



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.

Click on any of these buttons to help us to maintain this website.      
CJO

Artículos relacionados

Related Posts

Acerca del Autor:

1 Comment + Add Comment

  • Información Bitacoras.com…

    Valora en Bitacoras.com: 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 ponerlo todo en práctica para c……

Leave a comment


− 7 = cero

ndslite

Ayudas!

Recientes

  • Lord Belial: Me fue muy útil, muchas gracias.
  • Sizet Experience: Una herramienta muy útil sobre todo cuando usamos muchos plugins. El tema que mencionas del hosting...
  • Anika La Rubia: Estos son básicos y lo más utilizados, pero la lista es realmente extensa como he visto en bloogie.es...
  • robert: Hola, sera que podrías poner el código html, Saludos
  • luis: como seria el codigo,si cuando yo ingrese las coordenadas me muestre un punto en el mapa