Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Diseñar y codificar una aplicación de Facebook integrada

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Bienvenido a la tercera parte de "Diseñar y codificar una aplicación de Facebook integrada". En este punto, asumo que ha creado el HTML y CSS para su aplicación. Si no, refiérase a la primera entrada en esta serie. En esta parte, vamos a llevar nuestra aplicación al siguiente nivel.


Ponte al día


Visión general

En esta lección, nos ocuparemos de:

  • agregando algunos efectos geniales usando la impresionante biblioteca jQuery
  • configurando nuestra aplicación en el nuevo panel de configuración de la aplicación de Facebook, así como configurando el SDK de PHP de Facebook.
  • Trayendo nuestros datos desde Feedburner usando la api de Yahoos YQL
  • Obtención de datos desde la api del gráfico de Facebook.

Así que quédate conmigo, hazte una taza de té y ¡feliz codificación!


Paso 1 - jQuery

Antes de comenzar con la conversión de nuestro HTML a PHP, necesitamos hacer que algunos de nuestros objetos HTML sean funcionales. Podemos hacer esto fácilmente usando la biblioteca jQuery. Si aún no ha comenzado a usar la biblioteca jQuery, entonces este es definitivamente un excelente momento para comenzar. Es una excelente introducción a Javascript y, en verdad, no es demasiado difícil de usar. De hecho, puede crear algunos efectos geniales con solo unas pocas líneas de código. En nuestra aplicación de blog, usaremos jQuery para dos cosas. En primer lugar, lo utilizaremos para nuestra búsqueda de filtro en vivo y, en segundo lugar, para las pestañas de nuestra página para que nuestros usuarios tengan una experiencia fluida a medida que pasan de una página a otra.

Si recuerda el tutorial anterior, incluimos un archivo JavaScript en el encabezado de su documento HTML. Ahora es el momento de crear ese archivo. Salta a tu editor de código favorito y llama al archivo 'myjava.js'. Comenzamos creando el documento listo. Esto le indica a jQuery que cargue todo lo que hay dentro una vez que el DOM esté listo para ser manipulado.

Las pestañas

Facebook app tabs

Cuando el DOM está listo, ocultamos todas las pestañas. Luego, cada página se difumina cuando se hace clic en la pestaña correspondiente o se hace "activa". También eliminamos la clase active de las pestañas y ocultamos todo el contenido de las demás páginas.

Búsqueda de filtros

El siguiente elemento para el que utilizaremos jQuery es nuestra búsqueda de filtros. Esto permitirá a nuestros usuarios filtrar sus resultados de búsqueda en tiempo real a medida que escriben. Esto se hace al tomar el valor en vivo del campo de formulario y filtrarlo con cualquier cosa que coincida con nuestros divs de 'publicaciones'. El filtro mostrará el div 'posts' que contiene el valor y ocultará cualquiera que no lo haga.


Paso 2 - PHP

Ahora es el momento de dar vida a este archivo estático y comenzar a extraer datos de Facebook y Feedburner. Ahora es probablemente un buen momento para cambiar el nombre de su archivo de index.html a index.php y descargar el SDK de PHP. Puede descargar la última copia del PHP SDK de Facebook desde:

Facebook PHP SDK


Paso 3 - Configuración de nuestra aplicación dentro de Facebook

Setting up application in Facebook

Ahora necesitamos configurar tu página de lienzo de la aplicación de Facebook. Aunque esto se ha cubierto anteriormente, Facebook ha actualizado recientemente su página de configuración de la aplicación; por lo que es importante pasar por la nueva configuración. En primer lugar, cargue el archivo index.php en su propia cuenta de alojamiento web. He subido el mío a una subcarpeta, por ejemplo. www.yourdomain.com/tut Cuando haya terminado, puede configurar su aplicación visitando https://developers.facebook.com/apps.

En este punto, haga clic en el botón 'crear nueva aplicación' en la esquina superior derecha. Ingrese el nombre de su aplicación y luego será llevado a la página de configuración. Facebook te permite crear muchas variaciones de aplicaciones, desde el escritorio hasta el móvil. En nuestro caso, tenemos que elegir la 'Aplicación en Facebook'. Hay cinco campos esenciales que debe completar para que su aplicación funcione. Están resaltados en la imagen de arriba. Una vez hecho esto, si va a apps.facebook.com, siga con lo que haya ingresado en el 'espacio de nombres de la aplicación'. En mi caso, esto fue 'webdesigntuts', por lo que mi dominio de aplicación es: http://apps.facebook.com/webdesigntuts/

Cuando vaya a su url, debería ver su archivo de índice dentro del espacio del lienzo en Facebook.


Paso 4 - Configuración y configuración de Facebook PHP SDK

Después de llevar la aplicación a Facebook, ahora es el momento de extraer datos de la API gráfica de Facebook y permitir que las personas inicien y salgan de nuestra aplicación.

En el directorio de nuestra aplicación, agregue una nueva carpeta y llámela 'fb' Abra la carpeta SDK que descargó de GitHub. En él, deberías encontrar un par de ejemplos: el src y algunas pruebas. Tome el contenido de la carpeta src y arrástrelo a su carpeta fb. Este es el bit que necesitamos para conectarnos a Facebook. En nuestro archivo index.php, agregue el siguiente código comenzando con la inclusión del SDK de Facebook desde nuestra carpeta 'fb', y agregue su ID de aplicación única y clave secreta. En el código a continuación, puede ver cómo debe configurarse esto. Básicamente nos estamos conectando a Facebook y recuperando la id de usuario de la persona que está usando nuestra aplicación. Si el usuario ha sido autenticado, entonces estamos generando una variable para la url de cierre de sesión o, si no lo han hecho, estamos generando una para la url de inicio de sesión.


Paso 5 - Iniciar y cerrar sesión

Entre la declaración if y else, queremos cerrar e iniciar las etiquetas de PHP para poder insertar nuestro html que creamos anteriormente en la página de PHP. Ahora, si carga su página en su espacio web y actualiza el lienzo de la aplicación de Facebook, ahora debería poder ver la aplicación. Si has iniciado sesión lo verás; De lo contrario, verá una url de inicio de sesión como en la imagen de abajo.

Design and Code an Integrated Facebook App

Hemos configurado nuestra aplicación en Facebook y hemos creado un inicio de sesión para nuestros usuarios. Todo lo que queda es reemplazar nuestros datos ficticios con datos reales en vivo.


Paso 6 - Extraer datos de YQL usando JSON

Aprende más sobre YQL.

El primer bit de datos que vamos a ingresar a nuestra aplicación son las publicaciones del blog. Esto se obtiene de nuestro feed RSS Feedburner. Lo recolectamos utilizando YQL. Si no has usado YQL antes, entonces definitivamente deberías probarlo. Es super simple de usar y la flexibilidad que ofrece es impresionante. Si no está familiarizado con él, puede aprender más sobre él aquí y aquí.

Básicamente, lo que estamos haciendo es enviar una solicitud a YQL usando una sintaxis similar que podría usarse en MYSQL. Luego decodificamos los datos que se devuelven en un formato legible JSON, y los almacenamos en una variable para que podamos recuperar partes específicas del array dentro de las publicaciones de nuestro blog.

Necesitamos hacer tres peticiones a YQL. Son los siguientes:

  • webdesigntuts-summary feed: contiene la mayoría de los datos que necesitamos para las publicaciones de nuestro blog. Contiene el título, url, autor, fecha de publicación y resumen del artículo.
  • Webdesigntutsplus feed: la única información que necesitamos de esto es el número de comentarios. Necesitamos llamar a este ya que estos datos no están contenidos en la fuente de resumen webdesigntuts.
  • webdesigntuts-summary feed (de nuevo): esta vez, en lugar de recopilar todos los datos, solo recopilamos las categorías para su uso en la barra lateral.

Esto debe insertarse antes de que cierre la etiqueta PHP antes de que comience su HTML. Puedes ver esto demostrado en el siguiente código:


Paso 7 - Obtener el número de Me gusta de una página de Facebook

En esta etapa, haremos una llamada a la API gráfica de Facebook.  Es similar a cómo hicimos las llamadas a YQL, sin embargo, hay algunas variaciones leves entre los dos.  Esto es realmente simple de hacer y definitivamente debería ser una sección de código que guardas en tu carpeta de fragmentos, ya que estoy seguro de que será útil.  Establecemos una variable de me gusta en = '0', hacemos la llamada y luego decimos; si el array que se devuelve contiene 'me gusta', entonces establezca nuestra variable me gusta al número de me gusta que se devolvió.


Paso 8 - Visualización de los datos dinámicos

Design and Code an Integrated Facebook App

Ahora que tenemos todos nuestros datos almacenados en variables de PHP, debemos tomar esos datos y mostrarlos en nuestra página. Para la publicación de nuestro blog, lo hacemos creando un valor simple con un bucle for each y usando $ feed. Luego podemos hacer echo de los valores individuales de nuestra array JSON utilizando el nombre de la parte que deseamos hacer echo. La consola YQL debería ayudarlo a encontrar estas secciones usando el modo de árbol.

En el bloque de código anterior, tenga en cuenta que hemos hecho echo el número de comentarios de '$ yqlfeed2'. La sección de comentarios tiene dos partes: URL de comentario y número de comentario. La URL del comentario es la primera part (0), y el número de comentarios es la segunda part [1]. Solo requerimos el número de comentarios. También incrementamos automáticamente el elemento configurando '$ i = 0', y luego usamos el 'item[$ i ++]' Al hacer esto, el número del elemento se incrementará cada vez que la publicación se repite y devolverá el número de comentarios para cada publicación individual

Otro punto a tener en cuenta es que hemos utilizado una función PHP incorporada, subtr - substr ($ item-> pubDate, 0, -9). La razón por la que hemos hecho esto se debe a algunos personajes de aspecto extraño al final de nuestra fecha y hora. Esto simplemente elimina los últimos nueve caracteres (-9) y deja que nuestra fecha y hora aparezcan como se esperaba.


Paso 9 - Visualización del nombre de usuario, la imagen y el número de Me gusta

Design and Code an Integrated Facebook App

Hacer echo de la cantidad de "me gusta" es simple; creamos la variable, '$ likes' anteriormente, así que simplemente necesitamos hacer echo. Facebook PHP SDK también crea automáticamente algunas variables para nosotros; De nuevo es un caso simple de hacer echo. Todo lo que necesitamos hacer es reemplazar nuestros datos ficticios con los datos dinámicos.


Paso 9 - Mostrando las categorías

En el código anterior, simplemente hacemos un bucle a través de nuestra consulta YQL contenida en '$ yqlfeed3'. También usamos otra función PHP incorporada, str_replace. Usamos esto para reemplazar cualquier espacio en nuestras categorías con un signo '+'. Esto es para que no tengamos enlaces rotos cuando intentemos redirigir al usuario a las categorías en Webdesigntuts +.


Paso 10 - Consejos y trucos finales para aplicaciones de Facebook

Cambiar automáticamente el tamaño de la aplicación de Facebook Canvas Space

El primer truco que me gustaría mostrarte nos ayuda a solucionar un error en el iframe del canvas de Facebook. En la configuración de la aplicación de Facebook, puede configurarlo para que el iframe cambie de tamaño automáticamente para adaptarse a su contenido; sin embargo, también coloca una barra de desplazamiento horrible junto a tu aplicación a la derecha de la barra lateral de Facebook. Esto no parece demasiado bueno, por lo que podemos resolverlo con un simple bit de JavaScript que se puede colocar justo después de nuestra etiqueta body de apertura. Esto cambiará el tamaño de nuestro lienzo para que se ajuste al contenido, y la barra lateral estará en el extremo derecho de Facebook en lugar de nuestra aplicación.

Popup de inicio de sesión de aplicación de Facebook

Facebook app login popup

El siguiente truco que me gustaría mostrarle es que cuando un usuario visita su aplicación por primera vez, se le pedirá que inicie sesión / autorice. En lugar de simplemente mostrar un enlace, podemos tener una autorización emergente de Facebook. Sabes de los que estoy hablando, estoy seguro de que los has visto un millón de veces. Esto se puede lograr agregando otro bit de JavaScript después de nuestra declaración de cierre de PHP else.


Conclusión

Así que eso es todo amigos! Esto cierra nuestra serie de 'Diseño y código de una aplicación de Facebook integrada'. Espero que te hayas divertido tanto al crearlo como lo he escrito al respecto.

En septiembre, en la Conferencia anual de F8, Facebook anunció que acababan de superar los 800 millones de usuarios anuales. ¡Así se hace Facebook! Como puedes ver, esta es una gran plataforma para promocionarte a ti mismo, tu marca o tu producto. Qué mejor manera de utilizar esto que creando tu propia aplicación nativa de Facebook. Facebook también anunció, el mismo día, la reinvención de los perfiles de usuario, llamada Timeline. Con Timeline viene una nueva forma adicional para que las aplicaciones se integren en un perfil de usuario / timeline.

"Las películas que citas. Las canciones que tienes en repetición. Las actividades que amas. Ahora hay una nueva clase de aplicaciones sociales que te permiten expresar quién eres a través de todas las cosas que haces ".

Design and Code an Integrated Facebook App

¡Este es un momento emocionante para nosotros los desarrolladores de aplicaciones! Si todavía no te has unido, ¿qué estás esperando? No se limite a pensar en crear la siguiente aplicación, levántese y cámbielo. Espero ver lo que se te ocurre y cómo puedes tomar lo que has aprendido y darle tu propio toque. Siéntase libre de dejar enlaces a sus aplicaciones y creaciones en los comentarios a continuación.

¡Hasta la próxima, feliz diseño y codificación!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.