Desarrollando una aplicación facebookPaso a Paso

Bruno KámicheInventarte.netLima – Perú

bkamiche@inventarte.net

PASOS PREVIOSANTES DE CREAR UNA APLICACIÓN

Pasos Previos:

- Tener una idea clara y por escrito del objetivo de la aplicación

- Definir la secuencia de pantallas y operaciones que aparecerán en la aplicación

- Definir la estructura de datos que dará soporte a tu aplicación

¡ ESTABLECE TU ROADMAP !

DEFINE LA ARQUITECTURAQUE UTILIZARÁS

Para que el funcionamiento de la aplicación sea óptimo se deberán utilizar servidores especializados:

- Servidores de procesos (WebServer + PHP)- Servidor de Base de Datos- Servidor de contenido estático

Si tu aplicación estará basada en flash y lo servirás desde un servidor diferente al de PHP recuerda crear los archivos de políticas de seguridad ( crossdomain.xml )

Base de Datos

Servidor de Aplicación

Servidor de Contenido Estático

<?xml version="1.0"?><!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"><cross-domain-policy><allow-access-from domain="*" /></cross-domain-policy>

Ejemplo de archivo crossdomain.xml

CREAR LA APLICACIÓN EN FACEBOOK

DIFERENCIAS ENTRE UNA APLICACIÓN FBML y IFRAME

Aplicaciones FBML:- Puedes hacer una aplicación nueva mucho más rapido- Carga más rapido- Permite un acceso mas simple a los servicios de Facebook- Puedes utilizar URLs amigables en tu aplicación

Aplicaciones IFRAME:- Son más fáciles de integrar a facebook (en sitios previamente existentes)- La interacción con el browser es más rápida- Te permite el uso de Javascript, HTML y CSS sin restricciones- Funcionan mejor si requieres mucho uso de AJAX- Permite el empleo de herramientas de Debug de HTML y Javascript- Puedes utilizar librerias de Javascript existentes ( Jquery )

DESARROLLA TU APLICACIÓN

¡MANOS A LA OBRA!

Utiliza un archivo de configuración:

Ejm:

<?php$db_ip = '<ip o nombre de tu servidor>';$db_user = '<nombre de usuario>';$db_pass = '<password>';$db_name = '<nombre de la BD>';$api_key = '<api key>';$secret = '<secret key>';$memcachedserver = '<ip o nombre de tu servidor memcached>';

$static='http://static.mydomain.com';?>

Archivo de autorización:

<?php@ob_end_flush();@ob_start("ob_gzhandler");@ob_implicit_flush(0);@error_reporting(E_ALL & ~E_NOTICE);@mb_internal_encoding("UTF-8");@mb_http_output("UTF-8");@ini_set("default_charset","UTF-8");include_once 'config.php';include_once 'db/db.php';$db->sql_query("SET NAMES UTF8");@session_start();// the facebook client libraryrequire_once('client/facebook.php');require_once('mainfile.php');if(isset($_POST["fb_sig_user"])) $user=$_POST["fb_sig_user"]; else die();$facebook=new Facebook($api_key, $secret);$db->sql_query("INSERT INTO users(facebookid, datetime) VALUES($user,

UNIX_TIMESTAMP(NOW()))");@ob_end_flush();

?>

Archivo de eliminación de Usuario:

<?php@ob_end_flush();@ob_start("ob_gzhandler");@ob_implicit_flush(0);@error_reporting(E_ALL & ~E_NOTICE);@mb_internal_encoding("UTF-8");@mb_http_output("UTF-8");@ini_set("default_charset","UTF-8");// this defines some of your basic setupinclude_once 'config.php';include_once 'db/db.php';$db->sql_query("SET NAMES UTF8");if(isset($_POST["fb_sig_user"])) {

$user=$_POST["fb_sig_user"];$db->sql_query("DELETE FROM users WHERE facebookid=$user");

}@ob_end_flush();

?>

Puntos a tomar en cuenta:

- Asegúrate de utilizar UTF-8 tanto en la base de datos como en el programa.

- Utiliza memcached para mantener datos en memoria y evitar consultas a la base de datos (http://www.danga.com/memcached/)

- Si tu aplicación es de tipo IFRAME habilita el uso de sesiones para poder enviar datos.

- Cuando sea la primera vez que el usuario utiliza tu aplicación debes generar un “profile box” con un contenido default o en blanco.

Activar el uso de UTF-8 en PHP:

@mb_internal_encoding("UTF-8");@mb_http_output("UTF-8");@ini_set("default_charset","UTF-8");

Activar el uso de UTF-8 en MySQL (Lo primero que debes hacer apenas una vez establecida la conexión)

$db->sql_query("SET NAMES UTF8");

Activar el uso de Sesiones (para poder pasar información entre llamadas de un link a otro)

@ini_set("session.use_trans_sid","0");@session_start();

Como parsear URLs amigables :

function ProcessParameters() {global $PATHS;

$_SERVER["PATH_INFO"]=$URL=$_SERVER["REQUEST_URI"];$PARAMSTR="";$p=strpos($URL,"?");if($p!==false) {

$_SERVER["QUERY_STRING"]=$PARAMSTR=substr($URL,$p+1);$_SERVER["PATH_INFO"]=$URL=substr($URL,0,$p);

}if(substr($URL,0,1)=="/") $URL=substr($URL,1);if(substr($URL,-1)=="/") $URL=substr($URL,0,strlen($URL)-1);$NPATHS=sizeof($PATHS=split("/", $URL));$NPARAMS=sizeof($PARAMS=split("&",$PARAMSTR));for($nx=0;$nx<$NPARAMS;$nx++) {

$param=split("=",$PARAMS[$nx]);$param[0]=str_replace(".","_",$param[0]);if(isset($param[1])) $_GET[$param[0]]=htmlspecialchars_decode(urldecode($param[1])); else $_GET[$param[0]]="";

}return($PATHS[0]);

}

$PATHS=array();$opt=ProcessParameters();switch($opt) {

case "urlamigable1":app_funcion1();break;

case "urlamigable2":app_funcion2();break;

case "":app_main();break;

default:echo "<fb:redirect url=\"{$appurl}\" />";die();

}

Como crear un “Profile BOX”:

<?phpfunction app_setinfobox($user, $htmlw="", $htmln="") {

// narrow : 184 * 250// wide : 380 * Xtry {

$result=$facebook->api_client->profile_setFBML(NULL, $user,

"<fb:wide>".$htmlw."</fb:wide>"."<fb:narrow>".$htmln."</fb:narrow>", NULL, "", "<fb:narrow>".$htmln."</fb:narrow>");

} catch (Exception $e) {}

}?>

Como publicar contenido en el News Feed del usuario y sus amigos utilizando Javascript:

<script type='text/javascript'>var attachment = {"name":"<Nombre de tu Aplicación>","href":"{$appurl}",

"caption":"{*actor*} <mensaje>.", "description":"<texto que quieres publicar>", "media":[{"type":"image",

"src":"<url de la imagen>","href":"{$appurl}"}] };

var actionLinks = [{ "text": "Texto de Action Link", "href": "{$appurl}"}];Facebook.streamPublish("",attachment,actionLinks,null,"<titulo para escribir

contenido>");</script>

Como publicar en el News Feed utilizando FBML:

En la aplicación se deberá mostrar el siguiente contenido:

<form fbtype="feedStory" id="publishformdata" action="<url del form>"><input type="hidden" name="<variable>" value="<valor>"/><input type="submit" label="Presiona aquí para continuar" /> </form>

Programa para Procesar el Feed Form:

<?phpinclude(“config.php”);// Recibir y validar los parametros en $_POST

$template=<id del template definido>; // *titulo* *mensaje*

$title="<titulo del mensaje>";$mensaje="<cuerpo del mensaje>";$images=array(

array("src"=>"<url de la imagen>","href"=>"{$appurl}"));

$tokens=array( "images"=>$images,

"titulo"=>$title, "mensaje"=>$mensaje

);$feed = array('template_data' => $tokens, 'template_id' => $template ); $publish = array('method'=> 'feedStory', 'content' => array( 'feed' => $feed, 'next' =>

"{$appurl}")); echo json_encode($publish);

?>

Como utilizar el Editor de Templates

¡Gracias!

Bruno KámicheInventarte.netLima – Perú

bkamiche@inventarte.net