Blog de Tecnología e Internet

Guía: Crear una pestaña IFrame para páginas de fans en Facebook

Aprovechando que es domingo y que, como casi todos los fines de semana, las noticias de interés en el mundo de la tecnología brillan por su ausencia, vamos a realizar una pequeña guía para programadores que se estén introduciendo en el mundo de desarrollar aplicaciones en el entorno de la red social Facebook. En concreto, lo que vamos a explicar hoy es bastante sencillo, y simplemente trataremos de crear una pestaña iframe para páginas de fans en facebook.

Si os estáis preguntando qué es eso de una pestaña iframe, no os preocupéis, porque vamos a tratar de explicarlo. Como muchos sabréis, Facebook ha comenzado a abandonar las antiguas pestañas FBML para dar paso a las nuevas iframe; lo que conseguiremos, para entenderlo de una forma sencilla, es incluir en una pestaña de una página de fans, una completa aplicación desarrollada bajo el entorno de la red social. Es decir, lograremos enlazar desde una pestaña de una página en facebook, una aplicación web que debemos tener alojada en un servidor propio.

Una vez hechos los prolegómenos, vamos a comenzar. En primer lugar, y como es lógico, necesitamos configurar una nueva aplicación en Facebook; para ello, nos dirigimos a http://www.facebook.com/developers y hacemos click sobre el botón “Set up new app“. Una vez nos encontremos en este paso comenzamos a cubrir los datos de nuestra aplicación (Aclaración: Es importante salientar el detalle de que para poder desarrollar aplicaciones en Facebook, nuestra cuenta debe estar verificada; hay dos métodos de verificación, o teléfono móvil o tarjeta de crédito; de todas formas, si como yo os encontráis en España, actualmente la única forma de verificarla es vía tarjeta de crédito):En primer lugar, debemos indicar un nombre para nuestra aplicación y aceptar los términos y condiciones de uso de Facebook; El nombre puede ser el que nosotros queramos, para ilustrar este ejemplo, utilizaremos el mismo nombre que el de nuestro blog: SegelSoft.

Bien, una vez hayamos completado el paso anterior, hacemos click en “Crear Aplicación“. Esto nos llevará a una nueva ventana en la que tendremos que indicar un código de seguridad CAPTCHA, y tras esta, seremos redirigidos a las opciones de la aplicación que acabamos de crear; en este paso deberemos realizar unos cuantos cambios.

En primer lugar tenemos opción de indicar información básica de nuestra app, como puede ser descripción, icono, logotipo, idioma, etc. En esta pestaña podéis indicar los datos que deseéis:

Ahora vamos a comenzar lo interesante; En primer lugar nos dirigimos a la pestaña “Web Site”, dónde tendremos que cubrir el parámetro Site URL indicando justamente eso, es decir, la URL de nuestra aplicación web. Imaginemos que en nuestro caso la aplicación web que queremos mostrar en nuestra pestaña iframe se encuentre en http://www.segelsoft.com/appfacebook/, en ese caso, eso será lo que tendremos que introducir en Site URL (OJO: fijaros que la URL termina con una barra alta, es importante que sea así, en caso contrario no funcionará):

Bien, ahora vamos a la siguiente pestaña: “Facebook Integration“. Probablemente sea la ventana en la que más datos debemos cubrir, a la par que la más importante. Los campos debemos cubrir son los siguientes:

  • Canvas Page: Debemos indicar una dirección para nuestra aplicación; podemos indicar lo que queramos, y lógicamente será válido dependiendo de si está siendo usado por otra aplicación de facebook o no.
  • Canvas URL: Debemos indicar la misma URL que indicamos en Site URL en la pestaña anterior.
  • Tamaño de IFrame: Aqui podemos especificar si deseamos que se muestren scrollbars en nuestra pestaña, o si preferimos que facebook adapte automáticamente el tamaño de la página.
  • Nombre de la Pestaña: En este campo indicaremos el título que llevará la pestaña de nuestra aplicación en la página de fans (tiene un límite de 16 caracteres).
  • Pestaña URL: Aqui debemos indicar la ruta del fichero PHP, HTML,… que deberá cargar la pestaña IFrame. Por poner un ejemplo, imaginemos que nosotros queremos mostrar un index.php; en ese caso lo que deberíamos escribir en este campo sería: http://www.segelsoft.com/appfacebook/index.php .

A continuación podéis ver una captura de pantalla de cómo quedaría la cosa:

Finalmente hacemos click en Guardar Cambios, y con esto ya tendríamos configurada nuestra nueva aplicación; ahora sólo nos resta agregarla a una página de fans como pestaña. Para conseguir esto, en la propia ventana dónde nos encontramos tras haber guardado los cambios, hacemos click sobre “Página de Perfil de la Aplicación“. Esto nos lleva a una nueva ventana, dónde en el lateral izquierdo podemos ver un enlace de nombre “Agregar a mi página“; pulsamos sobre  el mismo, y se nos mostrará un diálogo en el que veremos todas las páginas de las que somos administradores; añadimos la aplicación a la página que deseemos, y de este modo, nuestra aplicación será visible a modo de pestaña desde la misma.

Espero que os haya resultado útil la guía, y no descarto realizar más entregas, ya que la API de Facebook se las trae, y es interesante ir creando un conjunto de guías en español para desarrolladores de aplicaciones en Facebook.

1 Comentario

  1. Anónimo 0
    16 agosto, 2011 at 6:50 #

    Hola me parece genial estas herramientas, yo estoy creando una aplicación donde aparecen fotos de personas extraviadas la url es http://apps.facebook.com/ayudame/
    Agradeceré cualquier aporte y/o sugerencia al respecto, mi idea es poder ayudar con un pequeño grano de arena a quienes lo necesiten

Deja un comentario

Soy mayor de edad, He leído y acepto totalmente el Aviso Legal y la Política de Privacidad así como que el contenido de mi comentario sea público.

Información

Aviso legal y Política de Privacidad

Contenido publicado bajo licencia Creative Commons

Licencia de Creative Commons