Hace algún tiempo escribí un tip en Cristalab de cómo crear una aplicación Hello World en Facebook utilizando PHP, pero ya hace mucho de ello, y como estamos en un área de constante evolución, el tip ya se encuentra obsoleto con los constantes cambios que le han realizado a la famosa red de amigos en Internet.
Los requisitos que necesitamos para crear una aplicación en Facebook son:
- Una cuenta en Facebook, la cual debe de estar en el grupo de desarrolladores de Facebook (http://www.facebook.com/developers/)
- Un servidor web con PHP y que tenga la librería cURL instalada.
Lo primero que hacemos es ir al área de Facebook Developer y aceptar que la aplicación de Developers pueda acceder a nuestros datos.

Depues veremos un botón en la parte superior derecha de la pantalla(que en mi caso dice “Set Up New Application”) que nos permitirá crear nuestras aplicaciones.

Luego de presionar el botón, lo primero que veremos será una pantalla que nos preguntara como se llamara nuestra aplicación super-hiper-mega-cool y que debemos aceptar los términos y condiciones de Facebook.

Al presionar el botón “Create App” registramos la aplicación y lo que nos queda es especificar cuál es el URL en donde se encuentran los archivos de nuestra aplicación.
Es importante mencionar que Facebook no aloja los archivos de nuestras aplicaciones, por eso mencione al principio de este artículo que necesitamos de un hosting en donde colocar los archivos de la aplicación.
¿Pero si Facebook no aloja nuestro archivos, como le decimos en donde están los archivos de mi aplicación super-hiper-mega-cool?
Sencillo, eso lo configuramos en sección “Facebook Integration” de nuestra aplicación.
Vayamos a la sección “Facebook Integration” de nuestra aplicación y en donde dice “CanvasPage” colocamos el nombre de nuestra aplicación, en mi caso psychoblogapp el cual va a ser el URL de mi aplicación en Facebook para que los usuarios puedan acceder a ella (http://apps.facebook.com/psychoblogapp/). Luego en “Canvas URL” colocamos la ruta mi servidor en donde se encuentran los archivos de la aplicación, en mi caso los archivos de la aplicación están en http://www.psycho.hielocreativo.com/ejemplos/01/

[nota]NOTA: En la sección de Facebook Integration obtenemos el “Application ID” y “Application Secret” que es necesario cuando trabajamos con la librería de Facebook./nota]
Estamos listos por la parte de la configuración en Facebook, ahora vamos a codificar un poco. Abrimos nuestro editor de código favorito, creamos un documento en blanco y lo guardamos con el nombre index.php y en el colocamos el siguiente código:
Código :
<?php echo 'Hola clabers, soy una aplicacion super-hiper-mega-cool';
Subimos el archivo a nuestro servidor a la capeta que especificamos en el “Canvas URL”, vamos al URL de nuestra aplicación en Facebook y gualá, allí esta la aplicación funcionando.
Ahora bien, para poder acceder al id del usuario lo hacemos de la siguiente manera, abrimos el archivo index.php y modificamos su contenido por:
Código :
<?php
// Aqui colocamos el ID de nuestra aplicación en Facebook que lo obtenemos en la sección de "Facebook Integration"
de nuestra aplicación
$app_id = "YOUR_APP_ID";
// Aqui colocamos el canvas(URL) de nuestras aplicación en Facebook
// en mi ejemplo seria http://apps.facebook.com/psychoblogapp/
$canvas_page = "YOUR_CANVAS_PAGE_URL";
// URL para que el usuario instale nuestra aplicacin en su perfil
$auth_url = 'http://www.facebook.com/dialog/oauth?client_id='
. $app_id . '&redirect_uri=' . urlencode( $canvas_page );
$signed_request = $_REQUEST['signed_request'];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
// Preguntar si obtenemos el id del usuario
if ( empty ( $data['user_id'] ) )
{
// Redireccion al dialogo de instalación
echo( '<script type="text/javascript"></script>"' );
}
else
{
echo ( 'Hola claber, tu ID en Facebook es: ' . $data['user_id'] );
}Si entramos de nuevo a la aplicación en Facebook deberíamos de ver algo como esto.

En el siguiente tip explicare como integrar la librería de Facebook con Codeigniter y hacer algunas búsquedas en las tablas de Facebook.
Para mas info pueden consultar la documentación oficial de Facebook en http://developers.facebook.com/.

Saludos, buen turorial.
Por Scherman el 20 de Junio de 2011
Por RIVERMILLOS el 21 de Junio de 2011
saludos
Por sk8erboi el 28 de Junio de 2011
Pero estos dias q me dio por querer hacer una nueva me encontre con que habian quitado el fbml y algunas cosas mas, busque y busque por internet, pero tengo un par d dudas quiza tu podrias resolvermelas.
1 Duda con maquetacion
Para hacer este tipo de cosas y que te quede con el estilo de facebook, ahora tienes que desarrollar tu un css o hay algo parecido que desconozco
<fb:tabs>
<fb:tab-item href='index.php?sc=nota' title='Nota' $op2/>
<fb:tab-item href='index.php?sc=invitar' title='Invitar a amigos' $op3/>
</fb:tabs>
2 Si quieres hacer un popup de este estilo con el aspecto de facebook tienes que elaborar tu el diseño por css o hay algo nuevo parecido
function checkIt(){
var title = 'Estabas tranquilamente en clase cuando de repente...';
var content = "";
var confirm = 'Aceptar';
var cancel = 'Cancelar!';
var doIt = new Dialog();
doIt.onconfirm = function() { document.setLocation('http://apps.facebook.com/xxx/index.php?sc=nota');}
doIt.showMessage(title, send_message, confirm, cancel);
}
3 En el tema de publicar antes habia esto, ahora tienes q hacer el popup tu y luego publicar por php dependiendo la respuesta que el usuario t de?
function checkIt(){
caption = 'Motivo del Feed';
description = '<?php echo("$nota"); ?>';
attachment = {
'name':'<?php echo("$_SESSION[nombre_profesor] ha escrito xxxxxxx:"); ?>','href':'http://apps.facebook.com/xxxxx/',
'description': description,
'media':
[{'type': 'image',
'src': '<?php echo("$host"); ?>imagenes/logo.gif',
'href': 'http://apps.facebook.com/xxxxx/'}] };
Facebook.streamPublish('', attachment);
}
4 Por ultimo. Estaba el tema este de mandar una invitacion a tu aplicacion con
// Retrieve array of friends who've already authorized the app.
$fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user.') AND is_app_user = 1'; $_friends = $facebook->api_client->fql_query($fql); // Extract the user ID's returned in the FQL request into a new array.
$friends = array(); if (is_array($_friends) && count($_friends)) { foreach ($_friends as $friend) { $friends[] = $friend['uid']; } }
// Convert the array of friends into a comma-delimeted string.
$friends = implode(',', $friends);
// Prepare the invitation text that all invited users will receive.
$content = "<fb:name uid=\"".$user."\" firstnameonly=\"true\" shownetwork=\"false\"/> Ha empezado a usar <a href=\"http://apps.facebook.com/".$app_url."/\">".$app_name."</a> y cree que tu tambien deberias probarla\n". "<fb:req-choice url=\"".$facebook->get_add_url()."\" label=\"Put ".$app_name." on your profile\"/>"; ?> <fb:request-form action="<?php echo ("$invite_href"); ?>" method="post" type="<?php echo ("$app_name"); ?>" content="<?php echo htmlentities($content,ENT_COMPAT,'UTF-8'); ?>"> <fb:multi-friend-selector actiontext="Estos son algunos de tus amigos que aun no usan <?php echo ("$app_name"); ?>. Invita a los que quieras." exclude_ids="<?php echo ("$friends"); ?>" /> </fb:request-form>
Sabes como resolver alguna de estas cuestiones, o si tienes alguna informacion para no buscar cosas q quiza ya no existan. Saludos
Por sk8erboi el 28 de Junio de 2011
Por Abel el 29 de Junio de 2011
sk8erboi-blog :
Pero estos dias q me dio por querer hacer una nueva me encontre con que habian quitado el fbml y algunas cosas mas, busque y busque por internet, pero tengo un par d dudas quiza tu podrias resolvermelas.
1 Duda con maquetacion
Para hacer este tipo de cosas y que te quede con el estilo de facebook, ahora tienes que desarrollar tu un css o hay algo parecido que desconozco
...
2 Si quieres hacer un popup de este estilo con el aspecto de facebook tienes que elaborar tu el diseño por css o hay algo nuevo parecido
...
3 En el tema de publicar antes habia esto, ahora tienes q hacer el popup tu y luego publicar por php dependiendo la respuesta que el usuario t de?
...
4 Por ultimo. Estaba el tema este de mandar una invitacion a tu aplicacion con
...
Sabes como resolver alguna de estas cuestiones, o si tienes alguna informacion para no buscar cosas q quiza ya no existan. Saludos
Hola sk8erboi, para realizar la mayoría de las cosas que se hacías con FBML, gran parte ya no se pueden, debido a que ahora nos obligan a realizar aplicaiones con iFrames.
Con tu duda sobre cómo usar los botones de FBML, hoy en día creo que no se puede. Tal vez utilizando la librería javascript de Facebook en tu aplicación te lo permita, pero no estoy seguro de ellos. Te recomiendo que la hagas mejor utilizando CSS, te puede quedar mejor y más original que utilizando los colores de Facebook, así aprendes mas.
Sobre el botón para publicar cosas desde tu aplicación solo puedes hacerlo a través de lo que Facebook te ofrece.
Revisa esta información en la documentación de Facebook para publicar información http://developers.facebook.com/docs/reference/dialogs/
Código :
<?php // Ejemplo tomado de http://developers.facebook.com/docs/guides/canvas/ $app_id = "YOUR_APP_ID"; $canvas_page = "YOUR_CANVAS_PAGE_URL"; $message = "Apps on Facebook.com are cool!"; $feed_url = "http://www.facebook.com/dialog/feed?app_id=" . $app_id . "&redirect_uri=" . urlencode($canvas_page) . "&message=" . $message; if (empty($_REQUEST["post_id"])) { echo("<script> top.location.href='" . $feed_url . "'</script>"); } else { echo ("Feed Post Id: " . $_REQUEST["post_id"]); } ?>Por aleramirezsj el 21 de Julio de 2011
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '211932515509997', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/es_LA/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:serverFbml style="width: 755px;">
<script type="text/fbml">
<fb:tabs>....
Así que el punto nro 1 en principio te aseguro que sigue funcionando porque como verás lo estoy usando y calculo que el resto también, saludos
Por Juan el 27 de Septiembre de 2011
Una pregunta, estoy intentando obtener algunos datos mas del usuario, como nombre, apellido, genero y fecha de nacimiento. No logro hacerlo, me esta faltando algo?
Muchas gracias
Juan
Juan-blog :
Una pregunta, estoy intentando obtener algunos datos mas del usuario, como nombre, apellido, genero y fecha de nacimiento. No logro hacerlo, me esta faltando algo?
Muchas gracias
Juan
Cuando obtengo esos datos utilizo FQL, por ejemplo:
Código :
Para mas info visita la documentación de Facebook http://developers.facebook.com/docs/reference/fql/user/ y este artículo que te dicen como utilizar el SDK en PHP de Facebook http://blog.rafaeldohms.com.br/2011/01/12/using-the-facebook-php-sdk-to-run-fql/
Por el 16 de Noviembre de 2011
Por Gabo el 29 de Noviembre de 2011
Gabo-blog :
Si, has la prueba. Creo que el único país en donde no se puede es en Corea del norte
Por Daniela el 21 de Diciembre de 2011
Muchas gracias por el tutorial, esta muy bueno.
El problema que tengo es que luego de haber creado la aplicacion en forma correcta, no puedo añadirla a mi fan page en una "pestaña". Ingreso a la aplicación que cree y no sale por ningun lado el boton de "añadir a mi pagina". Ya mire por todos lados y no logro resolver el problema.
Muchas gracias!
Daniela-blog :
Muchas gracias por el tutorial, esta muy bueno.
El problema que tengo es que luego de haber creado la aplicacion en forma correcta, no puedo añadirla a mi fan page en una "pestaña". Ingreso a la aplicación que cree y no sale por ningun lado el boton de "añadir a mi pagina". Ya mire por todos lados y no logro resolver el problema.
Muchas gracias!
Daniela esa opcion que dices ha sido eliminada en Facebook.
Para saber como se hace de ahora en adelante lee este articulo:
http://developers.facebook.com/blog/post/611/
Por rvp el 01 de Abril de 2012
rvp :
Has buscado en el sitio oficial de Facebook Developers https://developers.facebook.com/docs/appsonfacebook/tutorial/