Hola Mundo con PHP y el API de Facebook

Ultimamente me esta interesando bastante el tema las APIs de Facebook y Twitter. Asi que me decidi a buscar info y como siempre la comparto con todos ustedes.

El dia de hoy quiero mostrarles como hacer su primera aplicacion para facebook usando PHP. No es una aplicacion para nada util pues solo muestra un ‘Hola mundo’ seguido de tu nombre. Pero antes hay que entender algunas cosas.

Facebook logro su popularidad al permitir contener aplicaciones realizadas por terceros y realizar negocios con ello. Eso no quiere decir que facebook te de un espacio en disco ni bases de datos para que tu hagas tus aplicaciones. Todo lo que hagas lo tendras que hacer en tu servidor o hosting. Facebook lo unico que hara se brindarte la conexion entre tu aplicacion y los datos de los perfiles de los millones de usuarios de la su red.

Los recursos disponibles a los desarrolladores se agrupan en 3 categorías:

  • API: es una interfaz basada en REST que permite el acceso a los datos del perfil, amigos, fotos y eventos del usuario mediante la utilización de mensajes GET o POST.
  • Consultas (FQL, “Facebook Query Language”): es un lenguaje de consultas similar a SQL utilizado para acceder a los mismos datos que la API pero permitiendo consultas más complejas.
  • Maquetación (FBML, “Faceboook Markup Language”): es un lenguaje de markup similar a HTML que permite ser intercalado con el HTML a utilizar para integrar las aplicaciones a la experiencia de usuario Facebook. Utilizando FBML se pueden acceder distintos puntos de la red como ser el perfil, acciones del perfil, canvas y feeds. Este lenguaje también incluye soporte para AJAX y Javascript.

Una aplicación en Facebook posee una compleja estructura que permite brindar una experiencia de usuario completa:

  • Product Directory: cuando un usuario navega el directorio de aplicaciones de Facebook, por cada aplicación se muestra una pequeña sección con el nombre, una imagen y una pequeña descripción.
  • About: esta página muestra información general de la aplicación. Debe inducir al usuario a instalar la aplicación.
  • Left Nav: es el panel de navegación izquierdo. Las aplicaciones pueden tener su ícono y nombre en este panel.
  • Canvas Page: es la página principal de la aplicación. Home: esta página es accedida utilizando el panel de navegación de la izquierda, en general muestra información de los amigos del usuario. User Dashboard: es la página donde el usuario administra sus datos en una aplicación y determina de que forma las aplicaciones acceden a sus datos personales.
  • Profile: es la representación online de la identidad del usuario. La API provee múltiples puntos de integración con el perfil del usuario permitiendo actualizar datos del mismo.Profile Box: presenta información actualizada sobre las acciones recientes del usuario.Profile Actions Links: debajo de la foto del usuario en el perfil, se pueden agregar enlaces para invocar acciones en la aplicación.
  • Privacy Settings: se utiliza para definir los niveles de privacidad de los datos del perfil por aplicación.
  • News Feed: como su nombre lo indica es un “feed” de noticias, allí las aplicaciones pueden “publicar” información del usuario de la misma.
  • Alerts: las aplicaciones pueden enviar notificaciones a los usuarios a través del correo electrónico.
  • Message Attachments: las aplicaciones pueden incluir archivos adjuntos que aparecen en la ventana para componer mensajes.
  • Requests: las aplicaciones pueden crear peticiones que aparecen en la parte superior izquierda de la página principal. En general son iniciados por amigos que solicitan realizar alguna acción.

Todo eso de arriba lo copie de maestrosdelweb. La verdad para hacer nuestra primera aplicacion no nos interesa mucho todo eso.

Manos a la obra

Pongamos manos a la obra, he de aclarar que para hacer estos 10 pasos me base en otro blog que ya no existe mas

Paso 1: Debes ser usuario de la red social facebook para poder crear las aplicaciones.

Paso 2: Te vas a la pagina de developers y a la derecha veras un boton o enlace que dice ‘Configurar una nueva aplicacion’

Paso 3: En la pagina que aparecio poner un nombre para la aplicacion, Ej: ‘Saludador’ y acepten los terminos y condiciones.

Paso 4: En la siguiente ventana les apareceran como pestañas laterales a la izquierda.

En la que dice ‘Basico‘ llenamos los campos mas obvios: nombre de la aplicacion, icono, logotipo, descripcion, idioma. Aunque para nuestra pequeña primera aplicacion bastara con que coloquen solo el nombre. En esa misma pestaña tambien tienen el ID de aplicacion, el Api Key y secret key, copienlos en algun lado porque despues los vamos a usar.

En la pestaña Autenticacion marcamos la opcion Instalacion posible para usuarios.

Y en la pestaña Lienzo o Canvas si esta en ingles colocan en ‘Dirección web (URL) de la página de lienzo’ colocan lo que se convertira en su ‘direccion facebook’ Ej: http://apps.facebook.com/saludador y en ‘Canvas Callback URL’ colocan la direccion donde este almacenada su aplicacion, en este caso sera http://tudominio.com/saludador

Guarden todos los cambios.

Paso 5: Ahora hay que subir los archivos necesarios y la aplicacion a nuestro servidor. Antes que nada habra que bajar las librerias que nos permiten interactuar con el API de facebook.

Paso 6: Dentro del comprimido encontraran 2 carpetas (php y footprints) que deberan subir a su hosting.

Paso 7: Crear un archivo llamado facebook_config.php que contendra algunos datos:

<!--?php require_once 'php/facebook.php'; // codigo(KEY) que identifica a nuestra aplicación y es utilizadas en cada llamada a Facebook $appapikey = 'colocar aqui su API KEY'; // llave privada para autenticar la aplicación en el servidor de Facebook $appsecret = 'colocar aqui su SECRET'; // Crear una instancia del objeto Facebook $facebook = new Facebook($appapikey, $appsecret); // Obtener el id del usuario que este utilizando la aplicación $id_usuario = $facebook--->require_login();

$appcallbackurl = 'http://tudominio.com/saludador';

//catch the exception that gets thrown if the cookie has an invalid session_key in it
  if (!$facebook->api_client->users_isAppUser()) {
    $facebook->redirect($facebook->get_add_url());
  }
?>

Deberan completar el archivo con sus propios datos de aplicacion.

Paso 8: Subir facebook_config.php al mismo nivel que las carpetas anteriores.

Paso 9: Crear un archivo index.php que contendra la aplicacion propiamente dicha que mostrara un mensaje saludando y mostrando el nombre de la persona:

<!--?php // Llamar el archivo que contiene los parametros de configuración y obtine el id del usuario require_once 'facebook_config.php'; ?-->

Hola, Buen dia

Como veran aqui estamos haciendo uso de FMBL obtenemos el nombre de la persona que esta viendo la aplicacion. Y el parametro useyou=»false» se usa para que aunque habras tu mismo la aplicacion muestre tu nombre en vez de decirte ‘Tu’

Paso 10: Suban el archivo al mismo nivel que los otros archivos.

Eso seria todo, ahora si entran a la direccion que elijieron en el paso 4. Ej: http://apps.facebook.com/saludador  veran como su aplicacion los saluda con un pequeño mensaje

Fue todo muy sencillo y seguramente si llegaste a leer hasta aqui ya estas pensando en hacer alguna aplicacion A mi personalmente me parecio sencillo y ademas me parece genial que uno pueda almacenar sus propias aplicaciones porque eso significa que puedo usar mi querido KumbiaPHP framework para hacer alguna aplicacion.

Posibles errores que te pueden aparecer:

  • Si solo te muestra el mensaje del saludo pero no tu nombre es porque cuando estas configurando tu aplicacion en la pestaña Lienzo debes elegir FBML en metodo de renderizacion.
  • Si te da algun error de ‘cant open’ o algun error de PHP parecido seguramente sera por los permisos de los archivo o carpetas. Coloca permisos 755 a los archivos y carpetas involucrados.
  • Y si te dice algo como: FBML Error (line 7): illegal tag «noscript» under «fb:canvas» seguramente es porque tienes tu aplicacion en algun hosting gratuito que esta metiendo al codigo algo que indeseado.

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

16
Comenta!

avatar
AngelBotto

gracias muy util!! y facil :up:

trackback

[…] caso lo usaremos para permitir que los visitantes puedan comentar logueandose con su cuenta en facebook. Les aseguro que son muchos los que prefieren hacer un par de click que llenar los campos […]

trackback

[…] hace poco como hacer nuestra primera aplicacion para facebook, un “Hola [tu nombre]“. Era lo basico y vamos a seguir avanzando de a poco, a medida […]

trackback

[…] Hola mundo con PHP y API de facebook. […]

uriel
uriel

como puedo modificar la profile-pic o imagen de perfil del usuario por cualquier otra que yo quiera, claro que el usuario lo autorice.

saludos…

Carlos García Herrero

hola necesito agregar una aplicacion a una página en facebook por código alguien puede ayudarme gracias

Anonymous
Anonymous

Agregar una aplicacion por codigo? que es eso?

Carlos García Herrero

Gracias ya está solucionado http://www.facebook.com/add.php?api_key=$app_key&pages=1&page=$paginafb
para al que le pueda servir

POlok88
POlok88

No me funciona el codigo me tira error en
$id_usuario = $facebook->require_login();

Alejandro Santiago

Aun no le e metido mano a la API de Facebook, pero gracias a este post, me estan entrando unas ganas terribles =)

Anonymous
Anonymous

Pero creo que la forma de usar la API cambio desde la fecha en que hice este tuto

Daniela
Daniela

Hola!.
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!

Anonymous
Anonymous

Debes entrar a developers.facebook.com, alli eliges tu aplicacion, le das click a editar aplicacion y al costado izquiero vas a encontrar Ver perfil de de la aplicacion. Y en esa pagina esta el enlace de «agregar a mi pagina»

Fernandoq_123
Fernandoq_123

una pregunta yo instale una aplicacion en facebook de registro de usuario  con varios campos.. como hago para que cuando un usuario se registre se publique en el muro automaticamente la informacion del usuario que se registro

Gaston Aguilera
Gaston Aguilera

Una consulta: ¿puedo obtener información de algun API (en mi caso, un juego) de facebook existente? Quisiera hacer una pagina de seguimiento del juego y vi esta posibilidad. ¿es posible?

sefsinalas

No creo. Pero igual no te fies de mi porque hace rato que no programo nada con facebook.