Disclaimer: Lo que a continuación voy a contar se corresponde con cómo me explicaron a mí las cosas en el colegio y en el instituto. Seguramente tu experiencia haya sido diferente.

Ya desde pequeños, una de las primeras cosas que aprendemos es a diferenciar colores. Después, cuando empezamos a colorear, descubrimos que mezclando el lapicero azul con el lapicero amarillo obtenemos verde. ¿Qué clase de brujería es esa?

Fuente: cuantocabron.com

Acabábamos de aprender que mezclando unos colores obtenemos otros. ¡Aquello era todo un mundo de posibilidades! Estabas deseando que se te acabara el verde para tener la oportunidad de sentirte todo un artista creando tu propio verde a partir del amarillo y el azul.

Unos años después aprendíamos que existen unos colores primarios, el rojo, el amarillo y el azul, a partir de los cuales podíamos crear todos los demás. «¿Y el blanco?», se preguntaba el alumno listillo; «El blanco es la mezcla de todos», nos contestó el profesor, más listillo todavía. ¡Por las barbas de Papá Noël! ¡Mezclando esos tres colores yo siempre obtenía un marrón oscuro con reminiscencias escatológicas! En fin, si lo decía el profesor sería porque es verdad. Lamentablemente, con el tiempo descubrí que el modelo de colores Rojo-Amarillo-Azul es erróneo, y que la mezcla de todos da el blanco solamente en la síntesis aditiva de colores (como veremos más adelante).

Fuente: Wikipedia

Un ejercicio típico en plástica consistía en crear el círculo cromático, que trataba de dibujar un círculo que iba recorriendo todos los colores de manera escalonada. Todo encajaba a la perfección.

Fuente: Wikipedia

Ya con unos 12 años, en clases de biología, nos enseñaron que percibimos las imágenes gracias a que en la retina de los ojos tenemos unas células fotoreceptoras, llamadas conos, cuya función es cuantificar el tipo de luz (color) que le llegaba. Además, existían otras células, llamadas bastones, que recibían imágenes en blanco y negro en condiciones de poca iluminación.

Finalmente, en el instituto, aquellos que éramos de ciencias, aprendimos que la luz es una onda electromagnética formada de unas partículas llamadas fotones. Y que, como todas las ondas, tiene “picos”; «imaginad ondas en el agua» nos decían. Cuanto más cerca estuvieran entre sí los picos de cada ola, menor era la longitud de onda. Y nuestros ojos solo perciben un tramo de todas las longitudes de ondas posibles: el espectro de luz visible. Cada uno de esos puntos de luz visible correspondía a un color. Y fuera del tramo de la luz visible se encontraban las ondas de radio, las ondas Gamma, los rayos X, la luz ultravioleta, los infrarrojos, etc. ¡Guau! ¡Existen muchos más colores que nosotros no podemos ver!

Fuente: Wikipedia

Y aquí termina lo que, al menos a mí, me enseñaron sobre los colores. Pero pensando acerca de ellos, me surgían muchas dudas (que con el tiempo he ido despejando):

• ¿Qué era eso de que la mezcla de los colores primarios daba como resultado el blanco?
• ¿Dónde quedan el blanco y el negro en todo el espectro de colores? ¿Y los grises?
• ¿Por qué hay tres colores primarios? ¿Y por qué no cuatro?
• Si no vemos nada por encima del rojo, ni por debajo del violeta, ¿por qué vemos colores intermedios entre estos en el círculo cromático?

Realmente, me habían enseñado todas las variables de la ecuación. El problema es que desconocía la propia ecuación, por lo que no sabía cómo encajar todos los datos con los que ya contaba.

Empecemos por lo básico: por un lado tenemos objetos que emiten luz, y por otro objetos que reflejan luz. Por ejemplo, el sol, una bombilla, o la pantalla de un ordenador, emiten luz. Por el contrario, una manzana, la hierba, o una pared, reflejan luz. De ahí surgen dos tipos de síntesis de color:

1. Síntesis aditiva de color: corresponde a aquellos colores que tienen su origen directamente en una fuente de iluminación.
2. Síntesis sustractiva de color: corresponde a aquellos colores que son reflejados por materiales no luminosos.

Según la síntesis aditiva, tenemos tres colores primarios: Rojo, verde y azul. Absolutamente todos los colores que conocemos surgen de la suma de distintas proporciones de estos tres.

Fuente: Wikipedia

Los que nos dedicamos a las páginas web lo sabemos muy bien: asignando un valor entre 0% y 100% a cada uno de estos tres colores, obtenemos todos los demás (este es el famoso sistema RGB que se utiliza en diseño gráfico). Por ejemplo:

• Negro = 0% de rojo + 0% de verde + 0% de azul.
• Amarillo = 100% de rojo + 100% de verde + 0% de azul.
• Blanco = 100% de rojo + 100% de verde + 100% de azul.
• Gris = 50% de rojo + 50% de verde + 50% de azul.

Es decir, combinándolos en proporciones iguales obtenemos colores de la escala de grises. La ausencia de todos ellos nos da negro. Y la suma de todos ellos, blanco. ¿Pero esto es realmente así? ¿O se trata de un artificio teórico creado por algún científico? Con colores que surgen de fuentes de iluminación sí es así. Por ejemplo, la pantalla de tu ordenador está formada por una rejilla de píxels que, todos juntos, crean una imagen. Cada píxel está formado por tres señales distintas: una roja, otra verde y otra azul:

Fuente: Wikipedia

Lo creas o no, cuando ves un blanco en la pantalla de tu ordenador es porque los tres colores están totalmente iluminados. El resto de colores posibles se crean modificando la proporción de cada color primario de cada píxel.

En resumen: el blanco no existe, no es un color como tal del espectro: es la suma de todos los colores del espectro visible. Por esa razón existen infinitas combinaciones de ondas de luz que producen este color, que se corresponde con la luz que emite nuestra estrella: el Sol. Con eso respondemos la pregunta pregunta: ¿Por qué dicen que la suma de todos los colores da blanco?

Pero de ahí surge otra: ¿Por qué entonces al mezclar los colores de los lápices obtenemos un color que no es blanco? Para contestar a eso tenemos que volver a síntesis sustractiva.

Fuente: Wikipedia

Según la teoría sustractiva, tenemos otros tres colores primarios: Cian, Magenta y Amarillo. Corresponde a colores “tintes” (filtros), colores que reflejan luz. Realmente cuando a un objeto (material) le aplicas luz solar (luz blanca) absorve parte de la radiación, y otra parte la repele; la parte reflejada es la que vemos, como si se tratara de un filtro que solo dejara pasar una parte de la luz. Es decir, sustraen parte del color, de ahí su nombre. Por esa razón, si mezclamos cian y amarillo, obtenemos verde (la radiación que ninguno de esos dos colores-tinte absorve).

A partir de estos tres otros colores primarios obtenemos el modelo CMY, muy utilizado en artes gráficas. Identifican los colores-tinta, a diferencia del modelo RGB que identifica los colores de un emisor de luz (como la pantalla de una televisión). CMY corresponde a Cian, Magenta y Yellow.

Al igual que en RGB, la mezcla de los colores primarios CMY nos dan nuevos colores:

• Negro = 100% de cian + 100% de magenta + 100% de amarillo.
• Blanco = 0% de cian + 0% de magenta + 0% de amarillo.
• Gris = 50% de cian + 50% de magenta + 50% de amarillo.
• Verde = 100% de cian + 0% de magenta + 100% de amarillo.

Y con esto ya hemos resuelto otra duda: ¿Qué son el blanco, el negro y los grises? Son colores no espectrales; es decir, colores formados a partir de la combinación de otros.

Como curiosidad: en lugar de CMY se suele utilizar CMYK, donde la K corresponde al color negro. Esto es así porque al imprimir es muy complicado obtener un negro puro a partir de la mezcla de cian, magenta y amarillo. Por esa razón (entre otras) se utiliza un cuarto tinte negro.

Pero seguimos teniendo dudas: ¿Por qué tres y no dos o cuatro colores primarios? Es decir, los seres humanos distinguimos todos los colores del espectro de luz visible, que son aquellos que se encuentran entre longitudes de onda de 380 a 780 nanómetros. Cada uno de esos colores corresponde a una longitud de onda diferente. ¿Por qué esa arbitraria división en tres colores primarios? Pues bien, los colores primarios no son una propiedad de la luz. Su origen es biológico. Si volvemos a nuestras clases de ciencias, recordaremos que tenemos los conos: células fotoreceptoras ubicadas en la retina del ojo. En la especie humana existen tres tipos de conos, en función de un tipo determinado de sustancias:

1. Si contienen eritropsina, detectarán luz de en torno a 650 nanómetros: luz roja.
2. Si contienen cloropsina, detectarán luz de en torno a 530 nanómetros: luz verde.
3. Si contienen cianopsina, detectarán luz de en torno a 430 nanómetros: luz azul.

Cuando, desde lo que aparentemente es un mismo punto, nos llegan ondas de luz de estos tres colores, nuestro cerebro lo interpreta como blanco. Fascinante, ¿verdad?

Existen algunas especies animales que, en lugar de tres canales de color, perciben cuatro. A este estado se le llama tetracromatismo. Y -no es broma- hay estudios que indican que entre el 3% y el 50% de las mujeres tienen este tipo de visión. Al final su mayor sensibilidad para con los colores va a tener una explicación biológica

Ahora que ya hemos revisado los conceptos de síntesis sustractiva de color y del espectro de luz visible, voy a recordar algo que a muchos de nosotros nos enseñó el mayor divulgador científico del siglo XX. Por supuesto estoy hablando de Carl Sagan, y de su serie documental Cosmos. A propósito de la composición de Venus, nos cuenta lo siguiente (puedes saltarte el texto y ver el vídeo más abajo):

La siguiente pista procedía de un trabajo realizado con un prisma de cristal. Se hace pasar un intenso rayo de luz ordinario a través de una estrecha abertura y luego a través del prisma. El resultado es que la luz se extiende formando los colores del arco iris. Este diseño de arco iris se llama spectrum. Piensen en ello: la luz entra en el prisma y lo que sale del prisma es luz coloreada, con muchos colores. ¿De dónde proceden? Debían estar ocultos en la luz ordinaria. La luz ordinaria debe ser una mezcla de muchos colores.

Aquí vemos como el espectro va del violeta, pasando por el azul, el verde, el amarillo y el naranja  hasta el rojo. Al ver estos colores los llamamos el espectro de la luz visible. El Sol emite mucha cantidad de luz visible. El aire es transparente. Así que nuestros ojos evolucionaron para ver con luz visible. Sin embargo hay muchas otras frecuencias de luz que nuestros ojos no pueden detectar. Más allá del violeta, está el ultravioleta. Es igual de real, pero se necesitan instrumentos para detectarlo. Más allá del ultravioleta, están los rayos X, y luego los rayos gamma. Al otro lado de la luz visible, más allá del rojo, está el infrarrojo, que también es real y también es invisible. Más allá del infrarrojo están las ondas de radio.

Bien, toda esa escala de rayos que van desde los gamma hasta las ondas de radio y llegan hasta aquí son simplemente diferentes clases de luz. Solamente difieren en su frecuencia. Todas son útiles en astronomía. Sin embargo, dada la limitación de nuestros ojos, tenemos cierto prejuicio o preferencia o chovinismo hacia esa pequeña banda de arco iris de luz visible. Se puede utilizar un espectro, de una forma simple y elegante, para determinar la composición química de algún planeta o estrella lejanos. Diferentes átomos y moléculas absorben diferentes frecuencias, o colores, de luz. Las frecuencias absorvidas aparecen en forma de líneas negras en el espectro de la luz que recibimos del planeta o de la estrella. Cada sustancia tiene una huella dactilar característica; una forma espectral que la permite ser detectada a una gran distancia. En consecuencia, se han podido determinar los gases de la atmósfera de Venus a una distancia de 60 millones de kilómetros: se ha podido averiguar su composición desde la Tierra. Sigue sorprendiéndome que podamos saber de qué está compuesta una cosa a una distancia tan enorme sin poder tocarla jamás.

Carl Sagan.

A continuación tienes el didáctico vídeo de Carl Sagan. Recomiendo verlo a partir del minuto 1:12.

Es asombroso. A partir de colores que nuestros ojos no pueden ver, somos capaces averiguar la composición de planetas a millones de kilómetros de nosotros.

Pero volvamos a poner los pies en la tierra. Queda todavía una duda que no ha sido resuelta: si el espectro visible va desde el rojo hasta el violeta, ¿cómo es posible que el círculo cromático sea continuo entre estos dos colores? En teoría no deberíamos poder verlos:

Fuente: Wikipedia

Los tonos púrpuras no se corresponden con ninguna longitud de onda determinada; estos colores, al igual que el blanco, “no existen”, sino que son combinaciones de otros. En concreto los púrpuras son la suma de un color rojo y de un color violeta. Y es así como cerramos el círculo, con la conocida como línea de púrpuras.

Los púrpuras son conocidos como colores no espectrales. Naturalmente, a este grupo pertenecen también el blanco, el negro, los grises, y todos aquellos colores que contienen algún tono de uno de estos colores no espectrales, como por ejemplo los colores pastel (que no son más que colores espectrales con alta luminosidad, es decir, con blanco).

¿No es maravilloso? El cómo nuestro cuerpo es capaz de detectar ondas de luz, interpretarlas, crear combinaciones de estas de forma continua… todo ello a partir de tres distintos tipos de fotoreceptores en nuestros ojos.

Espero que hayas disfrutado leyendo este artículo tanto como yo redactándolo. Si tienes alguna duda, me encantará leerla y tratar de darle respuesta. Por supuesto, si conoces más curiosidades sobre el color, o conoces la respuesta a otras cuestiones curiosas o poco conocidas, será un placer leerlas.

Sombras

En CSS todo son cajas; a cada elemento del árbol DOM (salvo a los inline, pero esto no viene a cuento) se le asigna una caja, y mediante CSS definimos su ubicación. Algunos de estos elementos se encuentran sobre otros: imagina un párrafo <p> sobre el elemento <body>. Con CSS3 podríamos hacer que el <p> arroje una sombre sobre <body>. Vamos a ver la sintaxis de esta propiedad en su notación EBNF:

none | <shadow> [ , <shadow> ]*

Donde:

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Traducido viene a dar estas dos opciones:

1. none – En cuyo caso, no se muestra ninguna sombra.
2. <shadow> [ , <shadow> ]* – Significa que podemos tener una o más sombras separadas por comas. Cada sombra contiene:
1. inset – Es un valor opcional. Si se omite, la sombra se arrojará hacia fuera del elemento. En caso de que se especifique ‘inset’, la sombra será arrojada dentro del elemento.
2. <length>{2,4} – Introduciremos 2, 3 o 4 longitudes:
1. La primera longitud (obligatoria) establece el desplazamiento horizontal de la sombra. Los valores positivos hacen que la sombra se arroje hacia la derecha, y los negativos hacia la izquierda.
2. La segunda longitud (obligatoria) establece el desplazamiento vertical de la sombra. Los valores positivos hacen que la sombra se arroje hacia abajo, y los negativos hacia arriba.
3. La tercera longitud (opcional) especifica el radio blur. Si se introduce cero, la sombra será “afilada”, en caso contrario, contendrá más blur a mayor radio.
4. La tercera longitud (opcional) establece la difusión de la sombra. Los valores positivos hacen que se expanda, y los negativos que se contraiga.
3. color – Es el color de la sombra. Este valor es opcional. Si no se ha introducido, se usará el valor de la propiedad ‘color’. Nota: No lo soportan todos los navegadores.

Vamos a ver algunos ejemplos de valores válidos según la notación estándar:

box-shadow: none;
box-shadow: 2px 2px;
box-shadow: inset 2px -2px;
box-shadow: 2px 2px black;
box-shadow: 1em -1em 0.5em #CCCCCC;
box-shadow: 1em -1em 0.5em 1em rgba(118, 118, 118, 0.5);
box-shadow: inset 1em 0 0.5em -1em rgb(0,0,0);
box-shadow: 2px 2px #000, inset -3px 3px gray;

Y ahora, vamos a revisar ejemplos que puedes probar hoy en los navegadores:

Ejemplo 1

box-shadow: 5px 5px #000;

Arroja una sombra negra desplazada 5px a la derecha y 5px hacia abajo. No hemos especificado un blur, por lo que la sombra está afilada

Ejemplo 2

box-shadow: 5px 5px 3px black;

Arroja una sombra negra desplazada 3px a la derecha y 3px hacia abajo, con un desenfoque blur de 3px de radio.

Ejemplo 3

box-shadow: inset 2px -2px 5px #000;

Arroja una sombra interna negra desplazada 2px a la derecha y 2px hacia arriba, con un desenfoque blur de 5px de radio.

Ejemplo 4

box-shadow: 0 0 0.5em 1em rgba(118, 0, 200, 0.5);

Arroja una sombra lila, sin desplazamiento, con 0.5em de radio de blur, y expandida 1em.

Ejemplo 5

box-shadow: 2em 0 0.5em -1em rgb(0,0,0);

Arroja una sombra negra desplazada 2em a la derecha, con un desenfoque blur de 0.5em de radio, y contraída 1em.

Ejemplo 6

box-shadow: 2px 2px 5px #000, -3px -3px 5px red;

Arroja una sombra negra desplazada 2px a la derecha y 2px hacia abajo con un desenfoque blur de 5px. Además, arroja otra sombra roja desplazada 3px a la izquierda, 3px hacia arriba, y un desenfoque blur de 5px.

Ejemplo 7

box-shadow: 5px 5px 5px gold;
border-radius: 15px;

Arroja una sombra dorada desplazada 5px a la derecha, 5px hacia abajo y con 5px de radio blur. Además, vemos que la sombra se comporta sigue correctamente el recorrido del borde redondeado.

Ejemplo 8

box-shadow: 0 8px 5px -5px red;
border-radius: 15px;

Arroja una sombra roja desplazada 8px hacia abajo, con 5px de radio blur, y contraída 5px.

Degradados

Ya hemos visto las sombras, y como has podido comprobar son muy sencillas. Me gustaría decirte que los degradados son igual o más fáciles, pero lamentablemente no es así: se trata de una herramienta muy potente y versátil, por lo que nos ofrece muchas opciones.

Tenemos dos tipos de degradados: lineares y radiales. Los lineales, como su nombre indican, siguen una trayectoria lineal. Por contra, los radiales siguen una trayectoria circular o elíptica.

Degradados lineales

Su uso todavía está sujeto a modificaciones, y cada navegador lo implementa precedido de su propio prefijo y sin cumplir necesariamente la notación estándar:

• -moz-linear-gradient() para Firefox.
• -webkit-linear-gradient() para Safari y Google Chrome.
• -o-linear-gradient() para Opera
• -ms-linear-gradient() para Internet Explorer 10.

Esta es su notación estándar:

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]?
    <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

Que significa esto:

1. Contiene un ángulo opcional especificado en ‘deg’. Por ejemplo, 90deg. Nota: No está todavía soportado por todos los navegadores.
2. Un punto de origen opcional precedido por “to”, que podría ser left, right, top, bottom, left top, left bottom, right top o right-bottom. Por defecto la trayectoria se traza hacia el lado o vértice opuesto al especificado. Nota: los navegadores que implementan esta propiedad solo funcionan si no se precede por “to”.
3. Dos o más colores, donde cada uno de ellos indica:
1. El código del color, por ejemplo #FF00FF.
2. La posición del color. Por ejemplo, 0%, 30px, 100%. Si no se indica posición, se distribuyen a lo largo del recorrido uniformemente.

Al igual que con las sombras, vamos a ver algunos valores válidos de acuerdo a la notación estándar:

background-image: linear-gradient(90deg, yellow, blue);
background-image: linear-gradient(to bottom, red, white);
background-image: linear-gradient(to bottom left, red, black);
background-image: linear-gradient(0deg, #FF0000 10%, #000);
background-image: linear-gradient(to top, red 0%, rgb(129, 5, 205) 50%, #CCC 100%);

Y ahora, algunos ejemplos reales:

Ejemplo 1

background-image: -webkit-linear-gradient(top, black, white);
background-image: -moz-linear-gradient(top, black, white);
background-image: -ms-linear-gradient(top, black, white);
background-image: -o-linear-gradient(top, black, white);

Degradado, de arriba a abajo, comenzando en negro y finalizando en blanco.

Ejemplo 2

background-image: -webkit-linear-gradient(top left, black, white);
background-image: -moz-linear-gradient(top left, black, white);
background-image: -ms-linear-gradient(top left, black, white);
background-image: -o-linear-gradient(top left, black, white);

Desgradado, de la esquina superior izquierda a la esquina inferior derecha, comenzando en negro y finalizando en blanco.

Ejemplo 3

background-image: -webkit-linear-gradient(bottom, red, white, black);
background-image: -moz-linear-gradient(bottom, red, white, black);
background-image: -ms-linear-gradient(bottom, red, white, black);
background-image: -o-linear-gradient(bottom, red, white, black);

Degradado de abajo hacia arriba, comenzando en rojo, después en blanco, y finalmente en negro.

Ejemplo 4

background-image: -webkit-linear-gradient(top, red 70%, black);
background-image: -moz-linear-gradient(top, red 70%, black);
background-image: -ms-linear-gradient(top, red 70%, black);
background-image: -o-linear-gradient(top, red 70%, black);

Degradado de arriba hacia abajo, de rojo hasta el 70% del recorrido y, desde ahí, hacia negro.

Ejemplo 5

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);

Degradado de arriba hacia abajo, de rojo hasta el 50%, negro en el 80% del recorrido, y finalmente a amarillo.

Ejemplo 6

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-size: 100% 50px;

Igual que el ejemplo 5, pero estableciendo un tamaño de imagen de fondo de 50px de alto, con lo que el degradado se repite.

Ejemplo 7

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);
border-radius: 15px;

Igual que el ejemplo 5, pero con bordes redondeados.

Degradados radiales

Al igual que con los degradados lineales, su uso todavía está sujeto a modificaciones, y cada navegador lo implementa precedido de su propio prefijo y sin cumplir necesariamente la notación estándar:

• -moz-radial-gradient() para Firefox.
• -webkit-radial-gradient() para Safari y Google Chrome.
• -o-radial-gradient() para Opera
• -ms-radial-gradient() para Internet Explorer 10.

Esta es su notación estándar:

<radial-gradient> = radial-gradient(
    [ [ <shape> || <size> ] [ at <position> ]? , |
        at <position>,
    ]?
    <color-stop> [ , <color-stop> ]+
)

Que significa esto:

• shape – Opcional. Forma del degradado, que puede ser o bien ‘circle’ o bien ‘ellipse’.
• size – Opcional. Tamaño. Puede ser:
• Un único valor absoluto, indicando un círculo. Nota: No soportado por los principales navegadores.
• Dos valores absolutos o relativos, indicando una elipse. Nota: No soportado por los principales navegadores.
• closest-side – El degradado se expande hasta que el último color alcanza el lado más cercano del punto de origen. Nota: No soportado por los principales navegadores.
• farthest-side – El degradado se expande hasta que el último color alcanza el lado más lejano del punto de origen.
• closest-corner – El degradado se expande hasta que el último color alcanza la esquina más cerca al punto de origen. Nota: No soportado por los principales navegadores.
• farthest-corner – El degradado se expande hasta que el último color alcanza la esquina más lejana al punto de origen.
• position – Opcional. Posición de origen, precedida por “at”. Por omisión, ‘center’. Se especifica la posición horizontal (left, center, right, valor absoluto, o relativo) y vertical (top, center, bottom, valor absoluto, o relativo). Nota: Los navegadores que implementan esta propiedad solamente funcionan si no se precede por “at”.
• Dos o más colores, separados por comas, y opcionalmente acompañados de una posición (por ejemplo, 50% o 3em). Si no se introduce una posición, se distribuyen uniformemente.

Algunos ejemplos válidos según la notación estándar:

background-image: radial-gradient(circle, black, white);
background-image: radial-gradient(circle, black 50%, white 100%);
background-image: radial-gradient(ellipse, black, white);
background-image: radial-gradient(circle at top left, black, white);
background-image: radial-gradient(circle at 50px 100px, black, white);
background-image: radial-gradient(50px at bottom left, black, white);
background-image: radial-gradient(closest-side at top, black, white);
background-image: radial-gradient(farthest-corner, black, white);
background-image: radial-gradient(circle, black, white, red);

Sin embargo estos ejemplos no funcionan en los navegadores, pues como hemos visto su notación es ligeramente diferente. Vamos a ver algunos ejemplos que podemos usar hoy:

Ejemplo 1

background-image: -webkit-radial-gradient(red, black);
background-image: -moz-radial-gradient(red, black);
background-image: -ms-radial-gradient(red, black);
background-image: -o-radial-gradient(red, black);

Degradado radial por defecto, de rojo a negro. Como vemos, comienza ubicado en el centro, se distribuye de forma circular, y se expande hasta que el negro alcanza las esquinas.

Ejemplo 2

background-image: -webkit-radial-gradient(top center, red, black);
background-image: -moz-radial-gradient(top center, red, black);
background-image: -ms-radial-gradient(top center, red, black);
background-image: -o-radial-gradient(top center, red, black);

Degradado radial comenzando en el centro superior (top center), de rojo a negro. De nuevo, se expande hasta que el color final (negro) alcanza alguna de las esquinas, adquiriendo por tanto una distribución elíptica.

Ejemplo 3

background-image: -webkit-radial-gradient(top center, circle, red, black);
background-image: -moz-radial-gradient(top center, circle, red, black);
background-image: -ms-radial-gradient(top center, circle, red, black);
background-image: -o-radial-gradient(top center, circle, red, black);

Degradado radial, de rojo a negro, comenzando en el centro superior (top center). En este caso hemos especificado que su distribución sea circular.

Ejemplo 4

background-image: -webkit-radial-gradient(top left, red, black);
background-image: -moz-radial-gradient(top left, red, black);
background-image: -ms-radial-gradient(top left, red, black);
background-image: -o-radial-gradient(top left, red, black);

Degradado de rojo a negro comenzando en la esquina superior izquierda. Desde esa posición todos los extremos quedan a la misma distancia, por lo que la distribución se hace de forma circular.

Ejemplo 5

background-image: -webkit-radial-gradient(top left, red, black, white);
background-image: -moz-radial-gradient(top left, red, black, white);
background-image: -ms-radial-gradient(top left, red, black, white);
background-image: -o-radial-gradient(top left, red, black, white);

Degradado radial, de rojo a blanco, pasando por el negro, desde la esquina superior izquierda.

Ejemplo 6

background-image: -webkit-radial-gradient(top left, red 10%, black 30%, white);
background-image: -moz-radial-gradient(top left, red 10%, black 30%, white);
background-image: -ms-radial-gradient(top left, red 10%, black 30%, white);
background-image: -o-radial-gradient(top left, red 10%, black 30%, white);

Degradado radial, de rojo a blanco, pasando por el negro, desde la esquina superior izquierda. El color rojo se prolonga hasta el 10% del recorrido, el negro se alcanza al 30% del recorrido, y el blanco al final (100%, por ser el último). El degradado se expande hasta la esquina más lejana (farthest-corner).

Ejemplo 7

background-image: -webkit-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -moz-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -ms-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -o-radial-gradient(top left, farthest-side, red 10%, black 30%, white);

Ejemplo igual que el anterior, pero en lugar de expandirse hasta la esquina más lejana (farthest-corner) se expande hasta el lateral más lejano (farthest-side).

Ejemplo 8

background-image: -webkit-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-side, black, white);

Degradado radial, de blanco a negro, comenzando en el centro superior (top center), con distribución elíptica expandiéndose hasta el lateral más lejano (farthest-side).

Ejemplo 9

background-image: -webkit-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-corner, black, white);

Degradado radial, de blanco a negro, comenzando en el centro superior (top center), con distribución elíptica expandiéndose hasta la esquina más lejana (farthest-corner).

Ejemplo 10

background-image: -webkit-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-side, black, white);

Igual que el ejemplo anterior, pero en un contenedor de 15px de altura. Vemos que se produce un efecto de “destello sombra” que no podíamos obtener mediante box-shadow.

Ejemplo 11

background-image:
    -webkit-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -webkit-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -moz-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -moz-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -ms-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -ms-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -o-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -o-radial-gradient(top center, ellipse farthest-side, gray, white);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;

En este caso tenemos un degradado radial elíptico, de blanco (rgba(255,255,255,1)) a blanco transparente (rgba(255,255,255,0)) , comenzando en el centro superior, y alcanzando el lateral más lejano. Además, hemos añadido un segundo degradado igual, pero de gris a blanco. A cada fondo le asignamos un tamaño: El primero ocupará todo el ancho y el 40% de la altura. El segundo, todo el ancho y todo el alto disponible. Para evitar que el primer degradado se repita, añadimos “background-repeat: no-repeat”. Con este ejemplo, logramos un efecto sombreado muy llamativo. Hemos añadido sobre él un contenedor para que se aprecie el efecto.

¡Y esto es todo por hoy! Espero que te haya sido de utilidad. Por mi parte, me ha venido de maravilla volcar todo esto en el blog como guía para futuras consultas.

Puedes ver todos los ejemplos en vivo aquí.

¿Pero sabías que se pueden crear tipos de posts personalizados en los que alojar cualquier tipo de dato que se te ocurra?

Me explico: Por defecto WordPress trae cuatro tipos de posts distintos:

1. Entradas – Es el tipo predeterminado, para alojar nuevas entradas tipo blog.
2. Páginas – Las páginas permanentes, fuera de la estructura cronológica de los posts.
3. Adjuntos- Corresponde a la página que hay disponible para cada fichero adjunto.
4. Revisiones – Una revisión es una versión antigua de otro documento, o un borrador.
5. Menús – Son los menús de navegación creados desde el panel de control de WordPress. Sí, también es un tipo de post. ¿Sorprendido?

Todos ellos los crea WordPress automáticamente. Pero además de esos, nos permite crear otros nuevos que se adapten mejor a nuestras necesidades. La magia la lleva a cabo la función register_post_type().

Vamos a realizar un ejemplo en el que crearemos un catálogo de discos duros. Cada disco duro tendrá una serie de campos:

• Nombre
• Descripción
• Fabricante
• Precio
• Capacidad
• Velocidad de rotación
• Imagen

Paso 1 – Dar de alta el nuevo tipo de post

Lo primero será crear el nuevo tipo de post. Podremos hacerlo de dos formas: o bien mediante código PHP, o bien desde el panel de control de WordPress.

Método 1 – Con código

Añadimos este código al fichero functions.php de nuestra plantilla:

    // Registramos un nuevo tipo de post discos duros
    add_action('init', 'register_dd', 1);
    function register_dd() {
        $labels = array(
            'name' => _x('Discos duros', 'post type general name'),
            'singular_name' => _x('Disco duro', 'post type singular name'),
            'add_new' => _x('Añadir nuevo', 'Disco duro'),
            'add_new_item' => __('Añadir nuevo disco duro'),
            'edit_item' => __('Editar disco duro'),
            'new_item' => __('Nuevo disco duro'),
            'view_item' => __('Ver disco duro'),
            'search_items' => __('Buscar discos duros'),
            'not_found' =>  __('No se ha encontrado nada'),
            'not_found_in_trash' => __('No se ha encontrado nada en la papelera'),
        );
        $args = array(
            'labels' => $labels,
            'public' => true,
            'hierarchical' => false,
            'menu_position' => 5,
            'has_archive' => true,
            'query_var' => true
            'supports' => array('title','editor','thumbnail'),
            'rewrite' => array('slug' => 'disco-duro'),
        );

        register_post_type( 'disco-duro', $args );
    }

Paso a paso, esto es lo que hacemos:

1. Enganchamos la función “register_dd()” al evento “init”, dándole alta prioridad (cuanto más bajo, más prioritario).
2. Definimos la función register_dd():
1. Creamos un array $labels con todas las etiquetas que acompañarán al panel de control de este nuevo tipo de post.
2. Creamos otro array con todas las opciones:
1. labels – Por un lado, asignamos las etiquetas.
2. public – Le damos visibilidad pública.
3. hierarchical – No es un tipo de post jerárquico, donde pueda tener un post padre.
4. menu_position – Introduciendo 5 hacemos que se muestre bajo el menú de entradas.
5. has_archive – Permitimos acceder al archivo (listado) de discos duros.
6. query_var – Indicamos que se podrán hacer consultas atacando a este tipo de post.
7. supports – Lista de las funcionalidades que hemos decidido que tenga soporte este tipo de post. En concreto, permitos que tenga un título, una descripción con su editor WYSIWYG, y una imagen de miniatura.
8. rewrite – Indicamos el nombre base que tendrán las URLs amigables.
3. Finalmente, damos de alta el tipo de post, al que llamamos ‘discoduro’.

Si ahora accedemos al panel de control, esto es lo que veremos:

¡Ya tenemos nuestro tipo de post creado! Ha sido fácil, ¿verdad?

Método 2 – Sin código

¿Dije que la comunidad de desarrolladores de WordPress es genial? Existe un plugin que permite hacer todo eso, pero a golpe de ratón. Os presento a More Types. Mediante formularios web podremos crear y ajustar tanto como queramos nuestros tipos de posts personalizados. Instálatelo y ve a Ajustes > More Types:

Como ves, aparecen tanto los tipos por defecto, como los definidos por el usuario. Vamos a crear un nuevo tipo definido por el usuario pulsando sobre “Add new Post Type”. Completamos los siguientes campos:

• Post type name singular: Disco duro.
• Post type name plural: Discos duros.
• Features: Marcamos ‘Título’, ‘Editor’ y ‘Miniatura’.

• Has archive: Yes.
• Menu position: 5.
• Menu name: Discos duros.
• ‘Add new’ text: Añadir nuevo.
• ‘Add new item’ text: Añadir nuevo disco duro.
• ‘Edit item’ text: Editar disco duro.
• ‘New item’ text: Nuevo disco duro.
• ‘View item’ text: Ver disco duro.
• ‘Search item’ text: Buscar disco duro.
• ‘Not found’ text: No se ha encontrado nada.
• ‘Not found in Trash’ text: No se ha encontrado nada en la papelera.

Pulsamos sobre ‘Save’ y ya lo tenemos. El resultado es el mismo que en el método 1:

Paso 2 – Taxonomías

La Wikipedia define a la taxonomía como la ciencia de la clasificación; es decir, una forma de agrupar cosas. Lo has usado ya mucho: cada vez que creas una categoría en tus artículos o cuando introduces las etiquetas. Tal como ocurría con los tipos de posts, WordPress trae tres taxonomías creadas de forma predeterminada:

1. Categorías – Las categorías que ya has usado para clasificar tus artículos.
2. Etiquetas – Etiquetas (palabras clave) que añades a cada artículo.
3. Categoría de enlace – Las categorías con las que clasificas los enlaces en WordPress.

¿Qué taxonomías podemos crear para clasificar los discos duros? Pues unas cuantas Pero en este ejemplo vamos a crear sólo una: fabricante. Y de nuevo, tal como sucedía al crear los tipos de posts, podemos crearlo o bien con código, o bien utilizando plugins de terceros sin código.

Método 1 – Con código

Podemos crearla mediante código utilizando la función register_taxonomy():

    // Y creamos un nueva taxonomía para el nuevo tipo de post
    add_action('init', 'register_df', 1);
    function register_df() {
        $labels = array(
            'name' => _x( 'Fabricantes', 'taxonomy general name' ),
            'singular_name' => _x( 'fabricante', 'taxonomy singular name' ),
            'search_items' =>  __( 'Buscar fabricantes' ),
            'popular_items' => __( 'Fabricantes' ),
            'all_items' => __( 'Todos' ),
            'edit_item' => __( 'Editar fabricante' ),
            'update_item' => __( 'Actualizar fabricante' ),
            'add_new_item' => __( 'Añadir nuevo fabricante' ),
            'new_item_name' => __( 'Nuevo nombre de fabricante' ),
            'separate_items_with_commas' => __( 'Separar fabricantes con comas' ),
            'add_or_remove_items' => __( 'Añadir o borrar fabricantes' ),
            'choose_from_most_used' => __( 'Elegir de entre los fabricantes más populares' )
        );
        $args = array(
            'hierarchical' => true,
            'public' => true,
            'labels' => $labels,
            'show_ui' => true,
            'rewrite' => array( 'slug' => 'fabricantes' ),
            'query_var' => true,
		);

        register_taxonomy('fabricantes', 'discosduros', $args);
    }

Viéndolo paso a paso:

1. Atamos la función ‘register_df’()’ al evento ‘init’, de nuevo con alta prioridad.
2. Definimos la función register_df():
1. Creamos un array $labels con todas las etiquetas que acompañarán al panel de control de este nuevo tipo de taxonomía.
2. Creamos otro array con todas las opciones:
1. hierarchical – Es un tipo de taxonomía jerárquica. Por ejemplo, las categorías son jerárquicas, mientras que las etiquetas no lo son.
2. public – Le damos visibilidad pública.
3. labels – Por un lado, asignamos las etiquetas.
4. show_ui – Indicamos que se mostrará la interfaz de usuario en el panel de control para gestionarlas.
5. rewrite – Nos permite redefinir la estructura de las URLs dinámicas con las que se accede a cada fabricante.
6. query_var – Permite realizar consultas SQL atacando a esta taxonomía.
3. Finalmente, damos de alta el tipo de taxonomía, a la que llamamos ‘fabricantes’, y la vinculamos al tipo de post ‘discosduros’.

¿Qué cambio ha supuesto esto? En resumen, tenemos dos. Por un lado, nos aparecerá una nueva cajita en la página de añadir/editar disco duro, donde podremos establecer el fabricante:

Y por otro, tenemos un nuevo apartado en la columna izquierda desde donde podremos gestionar los fabricantes:

Espera, ¿dije que la comunidad de desarrolladores de WordPress es genial? También existe un plugin que nos permita crear taxonomías desde el panel de control. En esta ocasión os presento a More Taxonomies (ojo, está en estado beta). Mediante formularios web podremos crear y ajustar tanto como queramos nuestros tipos de taxonomías personalizadas. Instálatelo y ve a Ajustes > More Taxonomies:

Como ves, al pie aparecen tanto las taxonomías por defecto, como las definidos por el usuario. Vamos a crear una nueva taxonomía definida por el usuario pulsando sobre “Add new Taxonomie”. Completamos los siguientes campos:

• Taxonomy name singular: Disco duro.
• Taxonomy name plural: Discos duros.
• Hierarchical: Yes
• Allow permalinks: Yes
• Taxonomy slug: fabricante
• Show tag cloud: No
• Available to: Discos duro

Paso 3 – Añadir nuevos campos

function change_columns( $cols ) {
  $cols = array(
    'cb'            => '<input type="checkbox" />',
    'title'         => __( 'Nombre', 'trans'),
    'manufacturer'  => __( 'Fabricante',      'trans' ),
    'size'          => __( 'Capacidad', 'trans' ),
    'price'         => __( 'Precio', 'trans' ),
  );
  return $cols;
}
add_filter( "manage_disco-duro_posts_columns", "change_columns" );

// Definir contenido de las columnas no estándar
function custom_columns( $column, $post_id ) {
  switch ( $column ) {
    case "manufacturer":
      $manufacturers = get_the_terms($post_id, 'fabricante');
      foreach($manufacturers as $item) {
        echo '<a href="/'.$item->taxonomy."/".$item->slug.'">'.$item->name."</a>";
        break;
      }
      break;
    case "size":
      echo get_post_meta( $post_id, 'size', true)." GB";
      break;
    case "price":
      echo get_post_meta( $post_id, 'price', true)." €";
      break;
  }
}
add_action( "manage_disco-duro_posts_custom_column", "custom_columns", 10, 2 );

function sortable_columns() {
  return array(
    'title' => 'title',
    'manufacturer'      => 'manufacturer',
    'size' => 'size',
    'price'     => 'price'
  );
}
add_filter( "manage_edit-disco-duro_sortable_columns", "sortable_columns" );

function taxonomy_filter_restrict_manage_posts() {
    global $typenow;

    if ( $typenow == 'disco-duro' ) {
    	$filters = get_object_taxonomies( $typenow );

        foreach ( $filters as $tax_slug ) {
            $tax_obj = get_taxonomy( $tax_slug );
            wp_dropdown_categories( array(
                'show_option_all' => __('Mostrar todos los '.$tax_obj->label ),
                'taxonomy' 	  => $tax_slug,
                'name' 		  => $tax_obj->name,
                'orderby' 	  => 'name',
                'selected' 	  => $_GET[$tax_slug],
                'hierarchical' 	  => $tax_obj->hierarchical,
                'show_count' 	  => false,
                'hide_empty' 	  => true
            ) );
        }
    }
}
add_action( 'restrict_manage_posts', 'taxonomy_filter_restrict_manage_posts' );

function taxonomy_filter_post_type_request( $query ) {
  global $pagenow, $typenow;

  if ( 'edit.php' == $pagenow ) {
    $filters = get_object_taxonomies( $typenow );
    foreach ( $filters as $tax_slug ) {
      $var = &$query->query_vars[$tax_slug];
      if ( isset( $var ) ) {
        $term = get_term_by( 'id', $var, $tax_slug );
        $var = $term->slug;
      }
    }
  }
}
add_filter( 'parse_query', 'taxonomy_filter_post_type_request' );

<?php get_header(); ?>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <?php $manufacturers = get_the_terms(get_the_ID(), 'fabricante');?>
	<?php $custom = get_post_custom(); ?>
	<h1 class="entry-title"><?php the_title(); ?></h1>
    <?php
    if ( has_post_thumbnail() ) {
      the_post_thumbnail();
    }
    ?>
	<h2>Fabricante: <?php foreach($manufacturers as $item) { echo $item->name; break; } ?></h2>
    <?php the_content(); ?>
    <p>
        Precio: <?php echo $custom['price'][0]; ?>€<br />
        Capacidad: <?php echo $custom['size'][0]; ?>GB<br />
        Velocidad: <?php echo $custom['speed'][0]; ?> rpm<br />
    </p>
<?php endwhile; // end of the loop. ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Sin embargo, esta técnica tiene más utilidades, que es la que a mí personalmente más práctica me resulta. Supón que te dan acceso a un servicio remoto que sólo autoriza para conectar a una determinada IP. Si quisieras conectar a ese servicio desde una conexión de banda ancha convencional o desde la red 3G, tendrías un problema, ya que, salvo que lo hayas contratado explícitamente, estarán asignando a tu conexión una IP dinámica. Si cada vez utilizas una IP, ¿cómo puedes entonces conectar al servicio? Utilizando un tercer servidor.

Muy posiblemente ya tengas acceso a un servidor remoto con una IP estática y al que tienes acceso SSH (por ejemplo, porque en él tienes alojada una página web). Podremos autorizar a este tercer servidor a ser el único al que se le permita acceder al servicio deseado. De esta forma, tendríamos tres equipos:

1. Por un lado, el equipo #1, que es el cliente, el ordenador desde el que inicias la conexión a través de tu línea ADSL o 3G.
2. Por otro lado, tenemos el equipo #2, que es el servidor web al que tienes acceso SSH. Host: example1.com.
3. Y por último, el equipo #3, que es el que tiene el servicio que sólo autoriza a unas determinadas direcciones IPs. Host: example2.com. El puerto del servicio es, por ejemplo, el 1234.

$ ssh usuario@example1.com -L 2222:example2.com:1234 -N

Es decir, primero conectamos mediante SSH al equipo #2 (example1.com). Por otra parte, el parámetro L indica que todo el tráfico que conecte al puerto 2222 del cliente (equipo #1) se redirigirá, mediante la conexión SSH del equipo #2 (example1.com), hasta el puerto 1234 del equipo #3 (example2.com). Por último, el parámetro -N es un modificador que se utiliza en túneles SSH para evitar que se ejecuten comandos en el equipo remoto (equipo #2).

Pulsamos INTRO, introducimos la constraseña de nuestro usuario de example1.com, y ya está. ¿Ahora qué? Si quisiéramos conectar al famoso servicio remoto del equipo #3, tan sólo deberíamos realizar la conexión a localhost:2222, y ya estaríamos dentro.

Espero que este truquito os sea de tanta utilidad como lo es para mí

Quinta y última parte de esta guía introductoria al desarrollo de aplicaciones web sobre la Facebook Platform. Ya conoces el ecosistema de tecnologías de Facebook, sabes cómo crear distintos tipos de aplicaciones, y conoces el SDK JavaScript por completo. Hoy vamos a ver el PHP SDK.

Antes de seguir leyendo, puedes echar un vistazo a la página GitHub donde está alojado el proyecto PHP SDK, y desde donde te lo podrás descargar. Nosotros vamos a hablar sobre la última versión estable, la 3.1.0.

1 Instalación

Ya has dado de alta tus aplicaciones, y ahora quieres saber cómo incorporar el PHP SDK a alguna de ellas. Lo primero, deberás descargarte el SDK de su página en GitHub y descomprimirlo. Verás tres carpetas:

Se incluye:

• changelog.md – Fichero que registra todos los cambios entre las distintas versiones del SDK.
• examples – Un ejemplo de uso.
• readme.md – Fichero ‘léame’ con documentación básica.
• src – Bibliotecas del SDK. Esta carpeta es la que usaremos en nuestro proyecto.
• tests -Batería de tests unitarios para comprobar el correcto funcionamiento del SDK.

<?php
    require_once("src/facebook.php");

    $config = array(
        'appId' => 'TU_APP_ID',
        'secret' => 'TU_APP_SECRET',
        'fileUpload' => false, // opcional
    );

    $facebook = new Facebook($config);

Es decir, cargamos el SDK, creamos un nuevo array con la configuración del objeto Facebook, y finalmente lo creamos. ¡Ya está! Ya puedes usar el PHP SDK.

2 Métodos básicos

Vamos a ver 6 métodos getter y setter básicos:

Facebook::getAccessToken

Mediante este método podremos obtener el accessToken en uso. Los access token son objetos que definen los permisos que tenemos para interactuar con un determinado usuario. Puedes ver más sobre el objeto access_token en la documentación de los permisos.

Facebook::setAccessToken

Del mismo modo, podremos establecer el accessToken con el que funcionará nuestra aplicación. Se sobreentiende que este AccessToken ha sido obtenido por algún medio ajeno al SDK de PHP (por ejemplo, mediante cURL).

Facebook::getApiSecret

Nos devuelve el APP_SECRET de la aplicación.

Facebook::setApiSecret

Permite establecer a mano el APP_SECRET para nuestra aplicación

Facebook::getAppId

Devuelve el APP_ID de nuestra aplicación

Facebook::setAppId

Nos permite establecer a mano el APP_ID de la aplicación

3 Métodos de autenticación

Lo primero es lo primero. Vamos a ver cómo podremos autenticar a un usuario, y cómo solicitarle permisos. Para ello, vamos a revisar antes cuatro métodos más:

Facebook::getLoginStatusUrl

Este método nos permite especificar URLs según el estado de login del usuario, de manera que en función de este estado, nos redirigirá a un URL u otra. Hay tres estados posibles:

1. ok_session – El usuario ha iniciado sesión en Facebook.
2. no_user – El usuario no ha iniciado sesión en Facebook.
3. no_session – El usuario no está conectado a nuestra aplicación.

El valor devuelto por esta URL es una dirección de Facebook que se encarga de llevar a cabo por nosotros la redirección. Puedes probar aquí para ver en funcionamiento este ejemplo:

    if (isset($_GET['status']) && !empty($_GET['status'])) {
        switch($_GET['status']) {
            case 1: echo 'Te conozco  '; break;
            case 2: echo 'No estás conectado a Facebook.'; break;
            case 3: echo 'Estás conectado, pero no te conozco.'; break;
        }
        echo "<br /><a href='http://www.chusete.es/facebook/phpdemo/getLoginStatusUrl.php'>Volver a intentar</a>";
    } else {
        $params = array(
            'ok_session' => 'http://www.chusete.es/facebook/phpdemo/getLoginStatusUrl.php?status=1',
            'no_user' => 'http://www.chusete.es/facebook/phpdemo/getLoginStatusUrl.php?status=2',
            'no_session' => 'http://www.chusete.es/facebook/phpdemo/getLoginStatusUrl.php?status=3',
        );

        header("Location: ".$facebook->getLoginStatusUrl($params));
    }

Facebook::getLoginUrl

Construye por nosotros la URL desde la que accedemos a la página que nos muestra el diálogo OAuth. Acepta dos parámetros:

1. scope – Como ya sabes, la lista de permisos que queremos solicitar al usuario.
2. redirect_uri – Dirección a la que se redirigirá tras el diálogo OAuth.

    $params = array(
        'scope' => 'read_stream, friends_interests',
        'redirect_uri' => 'http://chusete.es/post_login_page',
    );

    $loginUrl = $facebook->getLoginUrl($params);

Facebook::getLogoutUrl

Del mismo modo que podemos generar la URL de inicio de sesión en nuestra aplicación, podemos crear otra para salir. Sólo debemos indicar un parámetro (opcional):

• next – URL a la que se le redirigirá al usuario tras hacer logout.

Facebook::getUser

Este método tan sólo nos devuelve el ID del usuario activo en nuestra aplicación.

4 Autenticación

Ya tienes la aplicación creada, ya has descargado el SDK, ya has instanciado un objeto de la clase Facebook, y ya conoces los métodos necesarios. Es el momento de ver cómo hacer un inicio de sesión en nuestra aplicación

Esto es lo que va a realizar nuestro ejemplo: Cuando el usuario acceda a la aplicación, si ha conectado con ella previamente, se le mostrará un mensaje de bienvenida. En caso contrario, le reenviaremos al diálogo OAuth para solicitarle permisos. Si los acepta, volverá a la aplicación, donde le daremos la bienvenida y le daremos la opción de cerrar sesión. En caso contrario, le mostraremos un mensaje lamentando que no haya conectado con nuestra súper app. Puedes ver aquí la demo.

Éste es el código:

    $params = array(
        'scope' => 'read_stream, friends_interests',
        'redirect_uri' => 'http://chusete.es/facebook/phpdemo/',
    );
    $loginUrl = $facebook->getLoginUrl( $params );

    if ( $_GET['error'] ) {
        echo "Parece que no quieres usar la aplicaci&oacute;n  <br />";
        echo "Si cambias de opini&oacute;n, haz clic <a href='".$loginUrl."'>aqu&iacute;</a>";
    } elseif( $facebook->getUser() ) {
        $logoutUrl = $facebook->getLogoutUrl(array('next' => 'http://www.facebook.com/'));
        echo "Bienvenido!  <br />";
        echo "Puedes <a href='".$logoutUrl."'>cerrar sesi&oacute;n</a> si lo deseas.";
    } else {
        header( "Location: ".$loginUrl );
    }

Como de costumbre, vamos a revisarlo:

1. En primer lugar construímos la URL en la que se muestra el diálogo OAuth, generado a partir de unos determinados parámetros:
1. Solicitamos algunos permisos extra: read_stream y friends_interets.
2. Definimos la URL actual como la dirección a la que debe retornar el diálogo OAuth tras la autorización (o no) del usuario.
2. Ahora seguimos la ejecución. Recuerda que, como hemos definido esta misma URL como dirección de retorno, cuando el usuario autorice (o no) nuestra aplicación, volveremos aquí:
1. Si está presente el parámetro GET ‘error‘, significa que el usuario no autorizó la aplicación. En ese caso mostramos un mensaje con una carita triste, y le damos de nuevo la opción de conectar con la aplicación.
2. En caso contrario, comprobamos si hay algún usuario reconocido. Si así fuera, mostramos un mensaje de bienvenida y un link de logout.
3. Y si no hubiera ningún usuario reconocido, redirigiríamos automáticamente mediante la función header() a la URL del diálogo OAuth desde la que podrá conectar con la aplicación.

5 Resto de métodos

Lo creas o no, hemos visto prácticamente todos los métodos del PHP SDK. Vamos a revisar los cuatro que nos quedan:

Facebook::api

Método polimórfico que nos permite realizar llamadas al Graph API (incluso con FQL, el Facebook Query Language). Puede lanzar excepciones de tipo FacebookApiException. Para poder realizar consultas que no sean públicas, debemos asegurarnos previamente de que tenemos permisos suficientes de ese usuario. Puedes probar esta demo, de la que tienes a continuación el código:

<?php
    require_once("src/facebook.php");

    $config = array(
        'appId' => '256797284360192',
        'secret' => '1e4791731181402f02399fbe174cdb0d',
        'fileUpload' => false, // opcional
    );

    $facebook = new Facebook($config);

    $loginUrl = $facebook->getLoginUrl();

    $user = $facebook->getUser();
?>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
    <?php
        if($user) {
            try {
                $_SESSION['user_id'] = $user;
                $user_profile = $facebook->api('/me','GET');
                echo "Nombre: " . $user_profile['name'];
            } catch(FacebookApiException $e) {
                echo "Error. Posiblemente ha expirado la sesión. ";
                echo "<a href='".$loginUrl."'>Volver a iniciar sesión</a><br />";
                $result = $e->getResult();
                var_dump($result);
            }
        } else {
            echo "Haz clic <a href='".$loginUrl."'>aqu&iacute;</a> para iniciar sesi&oacute;n";
        }

    ?>
    </body>
</html>

FacebookApiException

Cuando realizamos una consulta al API de Facebook mediante Facebook::api, podrán lanzarse excepciones, por lo que cada llamada a Facebook::api deberá ir dentro de su bloque try-catch correspondiente. Las excepciones tendrán estos dos métodos:

1. getResult – Devuelve un objeto array con el mensaje de error que devuelve el servidor.
2. getType – Devuelve el tipo de excepción, como por ejemplo OAuthExcepcion.

Facebook::getSignedRequest

En la cuarta parte de esta guía vimos qué es el objeto signedRequest. Como dijimos, se trata de un objeto que sirve para compartir información entre Facebook y nuestra aplicación. Desde JavaScript no era seguro su uso, ya que, al no deber hacer público el APP_SECRET de una aplicación, no podríamos tener la certeza de que el contenido del objeto signedRequest estuviera realmente firmado por Facebook.

Sin embargo, desde PHP sí podremos, y este método realiza todo el trabajo sucio por nosotros: decodifica, comprueba la firma, y devuelve el objeto en forma de array PHP. De esta forma, con el objeto devuelto por este método podríamos comprobar en una aplicación de tipo Page Tab si el usuario es o no fan (sin necesidad de solicitar ningún permiso).

Consulta la documentación de signedRequest para más información.

Facebook::setFileUploadSupport

Habilita o deshabilita el soporte para subida de ficheros. Éstas se realizarán mediante llamadas al Graph API con el método Facebook::api utilizando el método de envío POST. Podemos ver el ejemplo de la documentación de Facebook:

$facebook->setFileUploadSupport(true);

$img = '/tmp/mifoto.png';

$photo = $facebook->api(
    '/me/photos',
    'POST',
    array(
        'source' => '@' . $img,
        'message' => 'Foto subida mediante el SDK de PHP!'
    )
);

Facebook::useFileUploadSupport

Indica si está o no habilitado el soporte para subir ficheros.

6 Y ahora qué

Si te has quedado con ganas de más, estás de enhorabuena, porque han quedado muchos conceptos en el tintero.

Otros SDK. Si tienes pensado desarrollar para Android, puedes echar un vistazo al Android SDK. Puedes hacer también lo propio con el iOS SDK si tu intención es crear una aplicación para iPhone o iPad.

Consultas más eficaces. Otro asunto interesante por explorar es el lenguaje FQL para realizar consultas a-la-SQL a Facebook. Mediante este método puedes llevar a cabo comportamientos que con el Graph API no podrías, como ejecutar consultas por lotes.

¡Internacionalizate! Es otra de las opciones que proporciona Facebook: habilita tu aplicación para que sea traducida, preparándola según las directrices de internacionalización de Facebook.

Todavía más APIs… Tienes a tu alcance Ads API, que te permitirá crear y monitorizar mediante código ambiciosas campañas publicitarias. O Credits API, con la que podrás permitir a tus usuarios comprar créditos de Facebook con los que adquirir nuevas funcionalidades o ítems en tu aplicación. Y Chat API, con la que podrás incorporar a tu página web, o aplicación nativa, un chat compatible XMPP compatible con Facebook.

Más sobre Graph API. Si te interesa conocer más acerca de las consultas por lotes, tienes un apartado íntegro dedicado a ellas. Tienes también una API de actualizaciones en tiempo real.

Juegos. Lo mencionamos de pasada, pero existe toda una API para que los desarrolladores de videojuegos puedan añadir logros y puntuaciones.

Social Design, es como llaman en Facebook a la forma de pensar cómo crear productos sociales, utilizando tres conceptos clave, comunidad, conversación e identidad. Ver más sobre Social Design.

Opciones, muchas más opciones de configuración:

• Configuración avanzada:
• Deauthorize Callback – Definir una URL a la que se hará un ping cada vez que un usuario se desvincule de tu aplicación (con información en el signedRequest).
• Migraciones – Facebook está en constante cambio. Puedes elegir qué tecnologías usar: las que están en uso o las obsoletas.
• Seguridad – Autorizar determinadas IPs para realizar peticiones en nombre de tu aplicación o para cambiar su configuración. Alertas por email.
• Publicidad – Puedes indicar las direcciones de correo de las cuentas de usuario utilizadas para la publicidad de la página.
• Datos de contacto – Enlaces a las URLs de privacidad, condiciones de uso, de soporte, etc.
• Roles – Desde donde podrás añadir otros usuarios a diferentes perfiles: Desarrollador, tester, usuarios de pruebas (usuarios falsos creados al vuelo), etc.
• Credits – Donde personalizas los parámetros de configuración necesarios para poder operar con créditos Facebook.

Nueva versión de Open Graph: Hasta ahora podía establecerse un vínculo entre un usuario y otro objeto con el verbo “me gusta”. Por ejemplo, “A Pedro le gusta Coca-Cola“. Tenemos un sujeto (Pedro), una acción (gustar), y un objeto (Coca-Cola). Hasta ahora el verbo era siempre “gustar”. Sin embargo, con esta nueva versión, podrá ser cualquier cualquier cosa: “María ha tomado un Big Mac“. Puedes seguir este tutorial paso a paso.

7 Resumen

Con suerte, habrás llegado hasta aquí. Eso significa que ya ha finalizado tu toma de contacto con el desarrollo de aplicaciones en Facebook. Dominas tecnologías básicas como los social plugins, open graph, o los diálogos. Sabes crear distintos tipos de aplicaciones, ya sea en una web externa, en un Canvas, o en un Page Tab. Conoces a fondo el JavaScript SDK y el PHP SDK. Has tenido una toma de contacto con el Graph API. Sabes autenticar y solicitar permisos a tus usuarios en cualquier escenario. Eres consciente del resto de tecnologías de Facebook que tienes a tu alcance. Sabes qué son los Social Channels, y cómo aprovecharlos para dar mayor visibilidad a tus aplicaciones. No está nada mal, ¿no?

Espero que hayas disfrutado de estos artículos tanto como yo, y ojalá puedan serte de utilidad.

¡Muchas gracias por haber seguido esta guía!.

En la primera parte vimos una introducción a las tecnologías usadas para programar en Facebook. En la segunda, creamos una aplicación, y le añadimos algún Social Plugin y etiquetas Open Graph. En el tercero, nos zambullimos en el SDK JavaScript, y autenticamos al usuario en nuestra aplicación, le solicitamos permisos extra, publicamos en su muro, y mostramos algún diálogo.

Hasta ahora hemos trabajado sobre una aplicación que funcione sobre nuestra página web. Sin embargo, como ya sabes, Facebook nos da más opciones: aplicaciones en móviles, y aplicaciones dentro de Facebook. Hoy vamos a ver cómo crear una aplicación dentro de Facebook. Esto se hace mediante un canvas (iframe) en Facebook en el que se mostrará la página web que deseemos. Por supuesto, en esa página web podremos gestionar JavaScript, CSS y HTML como queramos.

Dar de alta la aplicación Canvas

Vamos a configurar nuestra aplicación. Simplemente accedemos a Aplicaciones, seleccionamos la que deseemos, pulsamos sobre Edit Settings, desplegamos App on Facebook en la parte inferior, y establecemos la URL en la que colgaremos nuestra aplicación canvas (¡Recuerda que a partir del 1 de octubre de 2011 será obligatorio que tus aplicaciones canvas estén disponibles mediante HTTPS!):

¿Te has fijado que bajo las dos URLs hay un tercer campo donde pone Canvas Page? Es la dirección de Facebook desde donde se podrá acceder a tu aplicación canvas. Como ves, para construir la URL han usado el App Namespace que estableciste cuando diste de alta la aplicación en la segunda parte de esta guía.

En las aplicaciones Canvas tenemos disponibles nuevos métodos del SDK JavaScript. Algunos de ellos son:

FB.Canvas.getPageInfo

Un iframe, por seguridad, no puede acceder a los parámetros del documento raíz (window), por lo que, a priori, no hay forma de conocer algunos parámetros como son el tamaño del canvas o las coordenadas del scroll. Este método se salta esa restricción (solicitándoselo por HTTP a Facebook), y nos devuelve toda esa información:

• clientHeight – Altura en píxels de la zona visible del navegador.
• clientWidth – Ancho en píxels de la zona visible del navegador.
• offsetLeft – Distancia entre el borde izquierdo del canvas y el borde izquierdo de la página de Facebook.
• offsetTop – Distancia entre el borde superior del canvas y el borde superior de la página de Facebook.
• scrollLeft – Desplazamiento del scroll izquierdo.
• scrollTop – Desplazamiento del scroll derecho.

Echa un vistazo a este ejemplo para entender mejor cada valor.

FB.Canvas.setDoneLoading

Esta función indica el tiempo de carga de la aplicación (debes colocarlo en un punto en el cual consideres que la aplicación está lista para funcionar). Al invocarla, se enviará el resultado a Facebook Insights (las métricas de las aplicaciones y Facebook Pages) para que puedas hacerte una idea de cuánto tiempo lleva a tus usuarios cargar tu aplicación.

FB.Canvas.startTimer

Para usar junto con FB.Canvas.setDoneLoading. Indica el comienzo de un rango de tiempo que no se incluirá dentro del tiempo total de carga de la página.

FB.Canvas.stopTimer

Junto con FB.Canvas.startTimer, indica el final del rango de tiempo que no se debe tener en cuenta para el cálculo total de tiempo.

FB.Canvas.setUrlHandler

Alrededor de una aplicación hay diversos enlaces (a teletipos, marcadores, peticiones en el desplegable de marcadores, peticiones en el panel de notificaciones). Este método permite que, cuando un usuario haga clic en uno de esos enlaces, una función callback capture esa petición y realice alguna otra operación. Por ejemplo, si en un juego el usuario hace clic en un teletipo sobre un logro de un jugador, se podría capturar la petición y en lugar de redireccionar, mostrar el logro dentro de la aplicación.

Tamaño de la aplicación

Nuestra aplicación, lógicamente, tendrá un ancho y un alto. ¿Y si excede el ancho máximo que Facebook nos permite? ¿Y si su alto crece dinámicamente? Para lidiar con esto, vamos a ir a la configuración avanzada de nuestra aplicación, donde veremos esto:

Nos dan la opción de elegir cómo se comportará el ancho y el alto del canvas.

Ancho (Canvas Width)

Tenemos dos opciones:

1. Fixed (760px). Es decir, el ancho será de tamaño fijo, establecido en 760 píxels.
2. Fluid. El canvas (junto con toda la web de Facebook) se ajusta al ancho máximo que permita la ventana.

Alto (Canvas Height)

De nuevo, tenemos dos opciones:

1. Ajustable (800px). En este caso, se establece un tamaño fijo (por defecto 800px).
2. Fluid. El canvas ocupará el 100% del alto permitido. En caso de que exceda el alto asignado a la página, se mostrarán barras de desplazamiento en el canvas.

Junto con el modo de alto ‘Ajustable (800px)‘, tenemos 3 métodos más del SDK JavaScript (y los últimos):

FB.Canvas.setSize

Este método nos permite modificar en tiempo de ejecución la altura del canvas. Si en la configuración del ancho se estableció ‘Fixed (760px)‘, no se podrá exceder ese valor. Si no le pasamos ningún parámetro, tratará de determinar automáticamente el tamaño del canvas.

FB.Canvas.setAutoResize

Sirve para que el alto se autoajuste dinámicamente (por defecto, cada 100 milisegundos realiza un reajuste). En resumen, inicia un timer que invoca a FB.Canvas.setSize sin ningún parámetro.

Si la aplicación decrece de tamaño, el canvas no decrecerá.

FB.Canvas.scrollTo

Ejemplos

Vamos a ver algunos ejemplos para comprobar cómo manejar los métodos del SDK JavaScript para el tamaño del Canvas. Usaremos como valor de ancho ‘Fixed (760px)‘, y de alto ‘Ajustable (800px)‘.

1. En el primer ejemplo vamos a ver una aplicación con 1500px de alto. Verás que no se visualiza el final de la aplicación. Ver ejemplo.
2. En el segundo ejemplo llamaremos a FB.Canvas.setSize, sin ningún parámetro, para que determine él solo el tamaño de la aplicación, y lo defina en el canvas. Ver ejemplo.
3. En el tercer ejemplo, tendremos un div que se expande y se contrae. El canvas no se ajustará a su tamaño pese a que llamemos a FB.Canvas.setSize al comenzar su ejecución. Ver ejemplo.
4. Por último, en el cuarto ejemplo, tenemos de nuevo un div que se expande y se contrae. Sin embargo, en este caso el canvas sí se ajusta a su tamaño. Invocamos a FB.Canvas.setSize cada vez que se modifica el tamaño (esto no siempre será una opción válida, por lo que quizás convenga llamar a FB.Canvas.setAutoResize). Ver ejemplo.

Si quieres ver un how-to de cómo realizar aplicaciones fluidas (ancho y alto), revisa este post del blog de desarrolladores de Facebook.

Autenticación y permisos

Si quisiéramos que los usuarios se autenticaran en nuestra aplicación canvas, y además poder solicitarles permisos, lo haríamos de un modo muy similar a como lo hicimos en la aplicación web. En este ejemplo, la principal diferencia es que en lugar de recurrir al SDK JavaScript para añadir el social plugin “Entrar” (y de ese modo, mostrar el diálogo OAuth que solicita permisos), redirigiremos al usuario a una URL que únicamente muestra diálogo OAuth para solicitar los permisos.

Vamos a ver el código:

<html>
<head>
<meta charset="UTF-8" />
</head>
<body style="background-color: yellow; margin:0 auto; padding:20px;">
    <div style="height: 500px; background:#EEEEFF; padding: 10px;">
        <h1>Canvas app</h1>
        <p id="step1" style="display: none;">Estás desconectado de esta aplicación. Pulsa <a href="#" onclick="connect()">aquí</a> para conectar y acceder al contenido privado.</p>
        <p id="step2" style="display: none;">Estás en el contenido privado de esta aplicación 
        <br /><br />Si ya habías concedido permisos a esta aplicación, puedes borrarlos en los <a href="http://www.facebook.com/settings/?tab=applications" target="_blank">ajustes de aplicaciones</a> para ver el diálogo OAuth.</p>
    </div>
    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>
    <script type="text/javascript">
        FB.init({
            appId  : '256797284360192',
            status : true, // comprobar estado de login
            cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
            xfbml  : true, // ejecutar código XFBML
            channelURL : 'http://chusete.es/facebook/channel.html', // fichero channel.html
            oauth  : true // habilita OAuth 2.0
        });

        FB.getLoginStatus(function(response) {
            if (response.authResponse) {
                document.getElementById('step2').style.display = 'block';
            } else {
                document.getElementById('step1').style.display = 'block';
            }
        });

        function connect() {
            top.location.href = 'https://www.facebook.com/dialog/oauth?client_id=256797284360192&redirect_uri=http://apps.facebook.com/chusetedemo/&scope=publish_stream'
        }
    </script>
</body>
</html>

Como ves, se trata de un documento HTML básico, que muestra un div con dos párrafos (los dos ocultos por defecto). El resto, es código JavaScript.

Vamos a analizar este código:

1. En primer lugar, cargamos el SDK JavaScript.
2. Después, realizamos una llamada a FB.getLoginStatus, que, como ya sabemos, nos sirve para determinar si el usuario ha conectado o no con nuestra aplicación. En caso afirmativo, mostramos el párrafo cuyo id es ‘step2′. En caso negativo, mostramos el párrafo con id ‘step1′.
3. El párrafo ‘step1′ tiene un link para que los usuarios conecten con la aplicación. Cuando lo pulsan, se ejecuta la función ‘connect()’, cuyo único cometido es redirigir a la URL del diálogo OAuth. La estructura de esta URL es la siguiente:

   https://www.facebok.com/dialog/oauth?client_id=APP_ID&redirect_uri=APP_URL&scope=PERMISOS

   Por supuesto, existen más parámetros GET que los que hemos usado. Puedes consultarlos todos en la documentación del diálogo OAuth.

Diálogo OAuth que se muestra al redirigir a su URL

Una vez que el usuario está autenticado, y nos ha concedido permisos, podríamos hacer como en el ejemplo de la tercera parte, y publicar una historia en su muro.

<a href="https://www.facebook.com/dialog/oauth?client_id=APP_ID&redirect_uri=APP_URL&scope=PERMISOS" target="_top">

Social Channels

¿Pensabas que ya conocías todos los conceptos de Facebook? ¡Todavía no! Te presento los Social Channels. Se trata de un concepto que englobal todas las herramientas que Facebook pone a disposición de los desarrolladores para ayudar a que los usuarios compartan las aplicaciones con sus amigos. En resumen, herramienta para ayudar a que tus usuario promocionen y no dejen de usar tu aplicación.

Éstas son los canales de las que dispones:

• Muro – Ya conoces el muro. Es el principal lugar donde compartes publicaciones de cualquier tipo con tus amigos. Como programador, puedes solicitar permisos al usuario para publicar historias en su nombre (como ya sabes, con el permiso publish_stream), o puedes mostrarle un diálogo Feed para que lo haga él. Por otra parte, el botón ‘Me gusta’ también permite que se comparta un contenido en el muro.
• Peticiones – Permite que los usuarios envíen invitaciones a sus amigos para que utilicen tu aplicación. Al igual que con el muro, puedes solicitar permisos al usuario para enviar peticiones en su nombre (con el permiso apprequest), o bien dejar que lo realice él con el diálogo de peticiones.
• Juegos – Si estás desarrollando un juego, dentro del Graph API tienes opciones para administrar los logros o las puntuaciones de tus usuarios, para de esta forma hacer al juego más competitivo. Puedes revisar este post del blog de desarrolladores de Facebook para conocer más sobre cómo publicar logros y puntuaciones de usuarios.
• Marcadores – Es el enlace a las aplicaciones que se muestra en la columna izquierda de la página principal de Facebook.
• Paneles – Hay dos paneles de aplicaciones. El panel de aplicaciones propiamente dicho y el panel de juegos. Desde estos paneles, se muestran recomendaciones, invitaciones, y catálogos de aplicaciones.
• Página de perfil de aplicaciones – Tal como vimos en la segunda parte, cada vez que damos de alta una nueva aplicación, automáticamente se crea su página de perfil. Desde aquí, podrás escribir novedades y actualizaciones que recibirán tus usuarios.

Pestañas de páginas

Hay un segundo tipo de aplicaciones canvas que puedes utilizar: las Page Tabs. Son aquellas aplicaciones que se muestran como una pestaña dentro de una Facebook Page. Por ejemplo, accede a la Facebook Page de Coca-Cola, y verás que dentro de la página de Coca-Cola hay una aplicación.

Ahora vamos a revisar los principales puntos de las Page Tabs.

Diseño

En la siguiente imagen puedes ver dónde va ubicada una aplicación de tipo page tab:

Abre la imagen y fíjate en estas cosas:

• El hueco central está disponible para tu aplicación. Pero en este caso, a diferencia de una aplicación canvas normal, dispondrás de un ancho máximo de 520px.
• El título de la página ahora es
  “NOMBRE_PAGINA ᐅ NOMBRE_PAGE_TAB”.
  Al configurar la Page Tab podrás definir con qué nombre aparecerá.
• En la columna izquierda aparece el enlace para la Page Tab, con el nombre que, como veremos a continuación, hayamos establecido en su configuración.

Configuración

Para configurarla, debemos acceder al apartado Aplicaciones, seleccionamos la que deseemos y pulsamos sobre Edit Settings. Esta vez, en el panel inferior desplegaremos Page Tab:

Vemos cuatro campos:

1. Page Tab Name – Corresponde al nombre de la aplicación. Será el nombre con el que se cree el enlace dentro de las Facebook Pages, y el que aparecerá en el título.
2. Page Tab URL – Dirección URL donde se podrá localizar la aplicación.
3. Secure Page Tab URL – Dirección URL mediante HTTPS donde se podrá localizar la aplicación. A partir del 1 de octubre de 2011, será obligatoria.
4. Page Tab Edit URL – Dirección URL accesible para los administradores de las Facebook Pages desde donde se les podrá ofrecer un panel de control para personalizar la aplicación.

Añadir a una página

Una vez tengamos la aplicación creada, querremos que se muestre en alguna de nuestras Facebook Pages. Esto, que pudiera parecer algo trivial, no lo es tanto, pues se encuentra un poco escondido. Deberemos acceder a la página de perfil de nuestra aplicación, en la columna izquierda localizamos el link donde pone “Añadir a mi página”, y seleccionamos aquélla en la que lo queramos añadir.

Diferencias

El desarrollo de aplicaciones en Page Tabs es exactamente igual que el de las aplicaciones canvas normales; es decir, podremos añadir el código HTML, CSS y JavaScript que deseemos. Igualmente, podemos hacer uso del SDK JavaScript para autenticar al usuario, solicitar permisos, realizar consultas al Graph API, mostrar diálogos, etc.

Pero tenemos algunos nuevos parámetros disponibles. En el objeto signedRequest, se añadirá un nuevo parámetro ‘page’ que contiene lo siguiente:

• id – ID de la página actual.
• admin – Indicando si el usuario es o no administrador de la página.
• liked – Indica si al usuario le gusta o no la página (sin necesidad de permisos).

Además, para personalizar el contenido de la aplicación, podríamos añadir el parámetro GET app_data a la URL principal de Facebook a la que se accede. El valor de este parámetro se traspasará también al objeto signedRequest.

Resumen

Ya habíamos visto los principales conceptos de Facebook, cómo crear una aplicación, cómo usar plugins sociales, y cómo utilizar Open Graph. También revisamos prácticamente todo el SDK JavaScript, viendo cómo iniciar sesión, solicitar permisos, y realizar acciones mediante el Graph API.

Esta vez, hemos visto cómo crear otro tipo de aplicaciones; las aplicaciones canvas que se muestran dentro de Facebook, y que también se pueden incorporar como pestaña de una Facebook Page. Hemos terminado de ver el resto de métodos del SDK JavaScript, que nos permiten gestionar asuntos relacionados con Canvas. Del mismo modo, hemos realizado una autenticación y solicitud de permisos equivalente a la de una aplicación web, pero esta vez dentro de canvas. Tambien conocemos ahora un nuevo objeto, signedRequest, que permite que Facebook comparta información con nuestra aplicación. Y, además, hemos revisado las herramientas que Facebook pone a nuestra disposición para promocionar nuestras aplicaciones: los Social Channels.

Si has llegado hasta aquí, ya tendrás bastante soltura desarrollando aplicaciones para Facebook. En la siguiente, y última parte, veremos cómo usar el SDK de PHP. ¡Hasta pronto!

Paso 1 – Autenticación

Vamos a añadir un sistema de autenticación mediante el Social Plugin ‘Login Button’, el diálogo OAuth, y el protocolo de autenticación OAuth. No te asustes, pues tras tanta palabreja se esconde una única línea de código HTML

En primer lugar, vamos a crear el Login Button. Como ya sabemos, accedemos a la página del plugin, completamos el formulario, y obtenemos su código HTML, que será similar a éste:

<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>

Con sólo poner eso, ya tendremos el Login Button . ¿Y qué ocurrirá cuando lo pulsemos? Se desplegará automáticamente un diálogo OAuth (¿recuerdas los diálogos? Hablamos sobre ellos en la primera parte) que nos solicitará permiso para que la aplicación pueda acceder a nuestra información básica:

Con esto quizás sea suficiente. Pero vamos a enriquecerlo un poco, y en lugar de solicitar sólo la información básica, vamos a pedir permisos también para poder publicar nuevas noticias en su muro. Si recuerdas, en el apartado “Autenticación y permisos” de la primera parte de esta guía, hablamos de los distintos tipos de permisos. Puedes volver a consultar la lista completa de todos los que hay disponibles. En concreto el permiso para publicar en el muro se llama ‘publish_stream’. Para solicitarlo, debemos actualizar el código que genera el Loggin Button añadiendo el atributo ‘scope’ (puedes ver más sobre los atributos de Login Button en su documentación). Nos quedaría así:

<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1" scope="publish_stream" ></div>

Y el nuevo diálogo OAuth:

Como vemos, ha funcionado correctamente, y ahora también solicita permisos para publicar en el muro. Ver ejemplo.

Paso 2 – Conocer el SDK JavaScript

Hasta ahora no hemos usado directamente el SDK de JavaScript. Únicamente lo hemos cargado indicándole algunos valores, como por ejemplo que renderice automáticamente todos los objetos XFBML (gracias a eso hemos podido incluir los Social Plugins).

Vamos a revisar algunos métodos que nos van a ser especialmente útiles para nuestra demo (recuerda que puedes consultar la documentación completa del SDK de JavaScript en http://developers.facebook.com/docs/reference/javascript/):

FB.api

Este método es el que nos permitirá realizar consultas al Graph API, que como vimos en la primera parte, es la herramienta donde todos los objetos de Facebook (personas, páginas, imágenes, etc.) están interconectados, y a la que podemos invocar para realizar consultas o modificaciones. Este método acepta 4 parámetros:

1. path - String con la ruta al API.
2. method - Tipo de petición (GET, POST o DELETE).
3. params - Objeto con los parámetros de la consulta (si los necesitara).
4. cb - Función callback.

Usualmente sólo serán necesarios path y cb.

FB.getLoginStatus

Permite determinar si el usuario ha iniciado sesión y está conectado con nuestra aplicación. Acepta dos parámetros:

1. cb - Función callback con el parámetro ‘response’.
2. force - Booleano que obligar a recargar el estado de login.

Cuando se invoca a este método, se realiza una consulta HTTP que devuelve el objeto ‘response’ de la función callback. Este objeto tiene la siguiente estructura:

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

Si el objeto response contiene un objeto authResponse, sabremos con certeza que el usuario ha iniciado sesión y que está conectado a nuestra aplicación. Los campos accessToken y userID serán muy útiles para hacer llamadas a la API de Graph API. Pero no te preocupes por esto, ya que el SDK JavaScript se encarga de hacer todas las gestiones por nosotros como luego veremos sin necesidad de manejar nosotros esos parámetros

FB.getAuthResponse

Su funcionamiento es equivalente al del método FB.getLoginStatus. La única diferencia es que, en lugar de devolver un objeto response, sólo devuelve su campo authResponse. Es decir, llamaremos a FP.getAuthResponse cuando tengamos la certeza de que el usuario ha iniciado sesión (y está conectado a nuestra aplicación) y queramos obtener información acerca de la sesión.

FB.init

Este es el único método que hemos invocado directamente hasta ahora. Se encarga de inicializar el SDK. Acepta un único parámetro, options, de tipo objeto, que incluye todas las propiedades que queramos establecer. En concreto, hemos usado estas propiedades (existen más):

• appId – String con el ID público de nuestra aplicación.
• status – Booleano que indica si se debe o no comprobar el estado.
• cookie – Booleano que habilita o deshabilita el soporte para la cookie. Ésta podrá usarse posteriormente para que, desde el servidor, por ejemplo en PHP, se realicen peticiones al API.
• xfbml – Booleano que indica si se deben o no renderizar los objetos de tipo XFBML disponibles en la página. Gracias a esto, se han generado automáticamente hasta ahora los social plugins que hemos definido.
• channelURL – String con la URL del fichero channel.html. Usándolo se evitan algunos errores. Consulta la documentación de este método para saber más.
• oauth – Booleano que habilita o deshabilita soporte para OAuth 2.0. Tenlo siempre a true, pues muy pronto sólo se permitirá autenticación OAuth 2.0.

FB.login

Este método se encarga de gestionar el login por nosotros. Es decir, renderiza el diálogo OAuth con los permisos necesarios, y gestiona la respuesta devuelta por éste. No lo vamos a invocar directamente, pero ten en cuenta que el Login Button por debajo utiliza este método.

Tan solo acepta dos parámetros:

1. cb - Función callback para gestionar la respuesta del usuario.
2. opts - Objeto para modificar el comportamiento del login. Tan solo tiene una propiedad, ‘scope’, que como vimos más arriba acepta un string de los permisos que solicitamos, separados por coma.

FB.logout

Cierra la sesión del usuario. Sólo acepta un parámetro:

1. cb - Función callback para gestionar el cierre de sesión.

FB.ui

Es el responsable de renderizar por nosotros los diálogos. Ya lo hemos visto en funcionamiento cuando hemos pulsado el Login Button y se ha desplegado el diálogo OAuth. Pero, por supuesto, también podremos invocar a mano este método siempre que deseemos mostrar cualquier otro diálogo.

Acepta dos parámetros:

1. params - Objeto con todas las propiedades de configuración. Cada diálogo tiene sus propias propiedades (en la documentación de cada uno podrás conocerlas). Además, hay dos propiedades globales a todos los diálogos:
1. method - String con el nombre del diálogo que se desea mostrar. Obligatorio.
2. display - String que indica la forma en que se mostrará el diálogo, por ejemplo ‘popup’ . Opcional.
2. cb - Función callback para manejar la respuesta.

FB.Event.subscribe

JavaScript es un lenguaje dirigido por eventos. Siguiendo este paradigma, el SDK JavaScript genera una serie de eventos a los que podemos suscribirnos para ejecutar una función callback. Este método acepta dos parámetros:

1. name – String con el nombre del evento al que nos queremos suscribir.
2. fb – Función callback que se ejecutará cuando se dispare el evento.

Entre los posibles eventos están auth.login, auth.authResponseChange, auth.statusChange, auth.logout además de otros muchos. Algunos de estos eventos generan un objeto que se pasará como parámetro a su función callback. Revisa la documentación para conocer más detalles.

Del mismo modo que nos podemos suscribir a un evento, también nos podemos desuscribir de él, mediante el método FB.Event.unsubscribe.

FB.XFBML.parse

Si bien en la demo no vamos a invocar este método, convine conocerlo, pues se ejecuta igualmente. En las propiedades de inicialización del SDK establecimos el valor xfbml a true. Esto significa que será el método FB.init el que llame a FB.XFBML.parse automáticamente por nosotros. Si no fuera así, lo podríamos invocar a mano con los siguientes parámetros:

1. dom – Elemento DOM raíz a partir del cual se parsearán todos sus hijos XFBML.
2. cb – Función callback.

Resto de métodos

Todavía quedan algunos métodos del SDK JavaScript. Dos de ellos (FB.Data.query y FB.Data.waitOn) no los hemos visto, ya que quedarán obsoletos a partir del 1 de enero de 2012 (su comportamiento se puede llevar a cabo mediante FB.api). El resto de métodos tratan sobre canvas; es decir, para gestionar aspectos gráficos relacionados con el elemento iframe donde se ubican las aplicaciones que se empotran en la página de Facebook. Estos métodos sobre canvas los veremos en la siguiente parte.

Paso 3 – Juntándolo todo

Volviendo a nuestra demo, hemos visto que ésta ya nos permite autenticarnos. Pero esto por sí solo no es algo muy útil. Por eso ahora queremos que haga más cosas. En concreto:

• Queremos que cuando el usuario haya iniciado sesión, ya no se muestre el Login Button.
• Cuando haya iniciado sesión, se mostrará un botón para cerrar sesión.
• Además, consultaremos al Graph API algunos datos del usuario para mostrar su nombre y su avatar.
• Añadiremos un botón que publicará automáticamente una historia en su muro.
• Mostraremos un diálogo para invitar a nuestros amigos a usar la aplicación.
• De paso, y por simplificar, vamos a eliminar el plugin Live Stream y el plugin del botón “Me gusta”.

¿Parece mucho? Vas a ver qué sencillo es Añadimos este código HTML:

    <div id="user-box" style="text-align:center; display:none;">
        <img id="image"/>
        <div id="name"></div>
        <a href="#" id="logout" onclick="userLogout()">Cerrar sesión</a> <br />
        <a href="#" id="publish" onclick="publishStream()">Publicar en el muro</a> <br />
        <a href="#" id="request" onclick="requestDialog()">Invitar a amigos</a>
    </div>

Simplemente es un contenedor div, por defecto oculto, que mostrará una imagen, el nombre del usuario, y tres enlaces.

Vamos a por el nuevo código JavaScript que hemos añadido:

        FB.Event.subscribe('auth.login', function () {
            window.location.reload();
        });

        FB.Event.subscribe('auth.logout', function (response) {
            window.location.reload();
        });

        FB.getLoginStatus(function(response) {
            if (response.authResponse) {
                document.getElementById('fb-login-button').style.display = 'none';
                document.getElementById('user-box').style.display = 'block';
                FB.api('/me', function(user) {
                    if(user != null) {
                        var image = document.getElementById('image');
                        image.src = 'https://graph.facebook.com/' + user.id + '/picture';
                        var name = document.getElementById('name');
                        name.innerHTML = user.name
                    }
                });
            }
        });

        function userLogout() {
            FB.getLoginStatus(function(response) {
                if (response.authResponse) {
                    FB.logout();
                }
            });
        }

        function publishStream() {
            var body = 'Probando la demo del SDK de JavaScript de Facebook';
            FB.api('/me/feed', 'post', { message: body }, function(response) {
                if (!response || response.error) {
                    alert('Ha ocurrido un error');
                } else {
                    alert('¡Éxito! Entra a tu muro y verás una nueva publicación');
                }
            });
        }

        function requestDialog() {
            FB.ui({
                method: 'apprequests',
                message: 'Echa un vistazo a esta demo.',
                title: 'Compartir aplicación'
            });
        }

Paso a paso:

1. En primer lugar llamamos a FB.Event.subscribe para que cuando el usuario inicie sesión (es decir, cuando se lance el evento auth.login), la página se recargue.
2. Del mismo modo, cuando el usuario cierre sesión (cuando se lance el evento auth.logout), la página también se recargará.
3. Después invocamos a FB.getLoginStatus. Como vimos, con este método podemos saber si el usuario ha iniciado sesión y está conectado con nuestra aplicación, en función de si el objeto authResponse está o no presente. En ese caso de que lo esté (está conectado):
1. Ocultamos el Login Button
2. Mostramos el div contenedor.
3. Realizamos una llamada a la API (FB.api) consultando información sobre el usuario activo. Construimos la URL de su avatar y lo establecemos a la imagen que hay dentro del div contenedor. E igualmente, extramos su nombre completo y lo escribimos en el div con id ‘name’.
4. Ahora definimos la función userLogout() que se invoca al hacer clic sobre el texto “Cerrar sesión”. Comprobará si se ha iniciado sesión, y en caso afirmativo, la cierra (FB.logout).
5. La función publishStream se ejecuta cuando se hace clic sobre el texto “Publicar en el muro”. Mediante FB.api, realiza una llamada al método ‘/me/feed’ del Graph API, usando una petición POST, y con el mensaje de ‘body’. Tras realizar la petición, se le notifica al usuario de si se ha publicado con éxito o no la historia.
6. Por último, definimos la función requestDialog, que se invoca al hacer clic sobre “Invitar a amigos”. Esta función realiza una llamada a FB.ui, pasándole tres parámetros (nombre del diálogo, texto de la petición, título de la petición), y genera el diálogo Request que permite enviar una invitación a los amigos para que usen la aplicación.

Ver demo completa.

Resumen

Hasta ahora ya conocíamos por encima todo el ecosistema de tecnologías para desarrollar en Facebook, y habíamos creado una primera aplicación que hacía uso de algunos Social Plugins y de Open Graph.

Esta vez ya nos hemos ensuciado más las manos. Hemos instanciado un nuevo Social Plugin (el Login Button), que nos ha generado el diálogo OAuth, con el que hemos podido solicitar determinados permisos para nuestra aplicación. Después hemos revisado los principales métodos del SDK JavaScript, y hemos visto cómo muchos de esos métodos ya estaban funcionando incluso sin invocarlos nosotros a manos. Después hemos puesto en práctica nuestro conocimiento del SDK: nos hemos atado a eventos generados por Facebook (auth.login y auth.logout), permitimos mostrar diferente contenido en función de si se ha iniciado o no sesión, consultamos en la API y mostramos información básica del usuario, hemos visto cómo cerrar sesión, cómo publicar en el muro del usuario directamente, y hemos creado un diálogo Request para invitar a nuestros amigos a usar la aplicación.

No está mal, ¿no? Con lo que ya conocemos, y un poco de imaginación, podemos crear aplicaciones muy ricas en funcionalidades. Pero todavía nos quedan algunas cosas por ver en esta serie introductoria a la programación en Facebook: cómo crear aplicaciones canvas, y cómo manejar el PHP SDK. Nos vemos en la siguiente parte y, como siempre, ¡gracias por leer!

Ok, el anterior artículo no estuvo mal; vimos una introducción conceptual a las piezas clave para la construcción de aplicaciones en Facebook. ¡Pero no llegamos a hacer nada! En este post vamos a construir algo sencillo, jugando con el SDK en JavaScript. Vamos a probar a mostrar algunos de los social plugins, usaremos Open Graph, y presentaremos dos nuevas tecnologías: XFBML y Facebook Insights. ¡Al lío!

Paso 1 – Alojamiento para la aplicación

Es responsabilidad del desarrollador buscar un alojamiento para su aplicación. Esto no suele ser un problema, ya que sirve cualquiera al que tengas acceso FTP. Sin embargo, desde el 1 de octubre de 2011 Facebook obliga a que las aplicaciones estén disponibles tanto por HTTP como por HTTPS.

Por lo pronto vamos a crear una carpeta llamada “/facebook” en el directorio raíz de la web, que será desde donde se acceda a nuestra aplicación.

Paso 2 – Configurando la aplicación

Ahora, accedemos a developers.facebook.com, y de ahí vamos a la pestaña Aplicaciones. Seleccionamos la nuestra, y en el apartado de configuración pinchamos en “Edit settings“. En la parte inferior, tal como vimos en el anterior artículo, nos dan cuatro opciones para crear nuestra aplicación. Vamos a seleccionar Website e introducimos la URL completa con la que se accederá a nuestra aplicación. En mi caso, introduzco http://chusete.es/facebook.

Pulsamos en Guardar cambios, y ya está. Ésta ha sido fácil

Paso 3 – Creando el esqueleto

Ahora, en la carpeta /facebook de nuestro alojamiento web, vamos a crear un fichero llamado index.html con la estructura básica de un documento HTML. Además, añadiremos el código JavaScript que vimos en el anterior artículo que había que insertar para usar el SDK. Quedaría así el esqueleto:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Demo Facebook</title>
</head>
<body>
    <h1>Demo Facebook</h1>

    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>
    <script type="text/javascript">
        FB.init({
            appId  : '256797284360192',
            status : true, // comprobar estado de login
            cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
            xfbml  : true, // renderizar código XFBML
            channelURL : 'http://chusete.es/facebook/channel.html', // fichero channel.html
            oauth  : true // habilita OAuth 2.0
        });
    </script>
</body>
</html>

<script src="http://connect.facebook.net/es_ES/all.js"></script>

Llegados a este punto, ya tenemos listo el esqueleto sobre el que construir una pequeña aplicación de demo. Ver resultado del paso 3.

Paso 4 – Añadiendo Social Plugins (XFBML)

Ya vimos que hay, ni más ni menos, que 10 social plugins. Vamos a insertar algunos a nuestra aplicación. Pero antes un poco de teoría. Hace tiempo, Facebook creó su propio lenguaje de marcado para poder insertar social plugins en nuestras aplicaciones. Hablamos del FBML (Facebook Markup Language). Para que pudierar interactuar con JavaScript, crearon FBJS; un dialecto de JavaScript para usarlo en conjunto con FBML dentro del espacio de Facebook. Sin embargo, desde el 11 de marzo de 2011, todo este conjunto de tecnologías ha quedado fuera de uso. ¿Y qué hay en su lugar? Pues un sistema unificado para todas las aplicaciones, ya sean pestañas, aplicaciones en canvas, externas, etc., basado en tecnologías estándar: HTML, CSS y JavaScript. Mucho mejor, ¿verdad?

Para sustituir a FBML crearon XFBML, que es un sistema que, mediante etiquetas HTML estándar, permite definir Social Plugins. Por ejemplo, el botón “Me gusta” es algo tan sencillo como:

<div data-send="false" data-width="450" data-show-faces="false"></div>

¿Cómo se hace para que ese código HTML se renderice como el Social Plugin “Me gusta”? Hay dos opciones:

1. Si en el código de inicialización del SDK JavaScript (el método FB.init que hemos invocado en index.html) tenemos a true el campo xfbml, entonces se renderizarán todas las etiquetas XFBML automáticamente.
2. En caso contrario, podremos renderizarlas invocando a FB.XFBML.parse.

Vale, ahora sólo nos queda saber cómo averiguar el código HTML que define cada Social Plugin. Accede a la página de Social Plugins, elige el que quieras usar, completa el formulario con los valores que desees (si es que el plugin te da esa opción), y finalmente pulsa sobre el botón Get Code. ¡Pero ojo! El código que te genera incluye tanto la inicialización del SDK, como el código HTML que define el plugin. Como nosotros ya tenemos el código del SDK, sólo tendremos que copiar el código HTML del plugin.

Por ejemplo, vamos a insertar un plugin Live Stream en nuestra demo. Al pulsar en Get Code obtenemos lo siguiente:

Copiamos sólo el código HTML:

<div data-event-app-id="282078738484719" data-width="400" data-height="500" data-always-post-to-friends="false"></div>

Con lo que ya tendríamos un chat en nuestra aplicación web, con el siguiente aspecto:

Ver resultado del paso 4.

Paso 5 – Botón “Me gusta” y Open Graph

Del mismo modo que hemos insertado un plugin Live Stream, ahora vamos a insertar el famoso botón “Me gusta”. Como vimos, para obtener el código XFBML debemos acceder a la página del plugin, completar el formulario, obtenemos su código, y lo copiamos. Siguiendo esos pasos obtendrás algo similar a esto (en función de cómo complementes el formulario):

<div data-send="false" data-width="450" data-show-faces="false"></div>

Con solo pegar ese código al documento HTML, ya tendremos el botón en nuestra página. ¡Pero un momento! Como vimos en la primera parte, existe una tecnología llamada Open Graph que convierte un documento web en todo un objeto social, referenciable y al que como administradores podemos seguirle el rastro. Pues bien, vamos a hacer esto. En la propia página del plugin del botón “Me gusta” tenemos un formulario que nos permite generar algunos códigos Open Graph -aunque generarlos a mano es algo trivial. En mi caso, lo he dejado así:

<meta property="og:title" content="Página demo de Facebook" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Ésta es la página de demo de la segunda parte de la introducción a programación en Facebook de chusete.es" />
<meta property="og:url" content="http://chusete.es/facebook/index.html" />
<meta property="og:image" content="http://chusete.es/facebook/logo.png" />
<meta property="og:site_name" content="chuso!" />
<meta property="fb:admins" content="1048522537" />

Ahora, cuando alguien comparta esta página en Facebook, ésa será la información que se mostrará por defecto. Por ejemplo, en este caso quedaría así:

Ver resultado final.

Paso 6 – Página para administradores e Insights

Pero hay más. Junto con la información Open Graph hemos insertado una etiqueta más, en la que el atributo property tiene como valor “fb:admins”. Ese campo contiene el id de nuestro usuario, de manera que así constaremos como el propietario de la página. ¿De qué nos sirve esto? Pues en resumen, para dos cosas. Fíjate en cómo queda el botón “Me gusta” cuando tú lo visualizas:

Interesante… Hay un link a “Página para administradores” y a “Estadísticas”. ¿Qué son?

Página para administradores

Cuando alguien pulse sobre el botón “Me gusta”, se creará un nuevo panel de administración con el que podrás comunicarte con tus “likers” (aquellos a los que les ha gustado tu publicación). Este panel estará disponible desde tu lista de Facebook Pages. Y lo más interesante: todo lo que publiques en el muro de esta página, aparecerá en las lista de novedades de los usuarios a los que les gustó tu publicación.

Insights

Y en segundo lugar, tendrás acceso a las estadísticas en Facebook Insights (¡otra más de las tecnologías de Facebook!). Básicamente, es un panel de análisis de tráfico web, similar a Google Analytics. Puedes acceder desde el enlace “Estadísticas” que acompaña al botón “Me gusta”, pero es preferible reclamar la propiedad de tu dominio ante Facebook, para de ese modo tener acceso completo a todo lo que ocurre con tu página. Para ello, accedemos a la página principal de Insights, y pulsamos sobre el botón . Mete el dominio de tu web, copia el código “meta” que te ha generado, y pégalo en la página principal del dominio:

Finalmente pulsa en Get Insights y ya habrá finalizado el proceso de alta en Facebook Insights. Ahora, cada vez que accedas al dashboard de Insights, podrás consultar qué historias de tu página se han compartido o han gustado en Facebook.

Para más información, consulta la documentación de Facebook Insights.

Resumen

En la primera parte dimos un repaso a las principales tecnologías que involucran el desarrollo de aplicaciones Facebook, y dimos de alta un nuevo perfil de aplicación.

Hoy, hemos visto cómo crear una aplicación en una web externa a Facebook vinculada a nuestro alojamiento. Hemos creado un documento HTML con el código de incialización del SDK JavaScript. Hemos conocido una tecnología de Facebook -XFBML- que nos permite crear plugins de una forma muy sencilla. Como ejemplo, hemos creado un plugin de tipo Live Stream, y otro con el botón “Me gusta”. También hemos añadido los códigos Open Graph y hemos visto su utilidad. Finalmente, hemos visto cómo interactuar con los usuarios a los que les gustan nuestras publicaciones, y cómo explorar las estadísticas de uso de nuestro sitio por los usuarios de Facebook.

¿De modo que te han pedido que hagas una aplicación para Facebook y no sabes por dónde empezar? ¿Has llegado a la documentación oficial y te pierdes entre tanto Open Graph, SDK, plugins, dialogs y Graph API? Don’t panic! En este artículo vamos a ver paso a paso cómo empezar a programar en el nuevo sistema de Facebook. ¡Al lío!

Tipos de aplicaciones

En el apartado Getting Started de la documentación oficial vemos que nos dan tres opciones:

1. Páginas web. Para crear una aplicación que se ejecute en tu página web fuera de Facebook.
2. Aplicaciones móviles. Para crear apps para las principales infraestructuras móviles.
3. Aplicaciones en Facebook. Este decir, para crear una aplicación que se insertará dentro de la web de Facebook, en un canvas.

En cualquiera de los tres casos, las tecnologías que utilizaremos serían básicamente las mismas.

Más adelante revisaremos algunas de las tecnologías que nos ofrece Facebook para integrar nuestra aplicación con su infraestructura.

Además, en la página de inicio ofrecen un apartado de ejemplos donde podrás probar y descargar distintas demos, como el de una aplicación en página web, o una aplicación dentro de un canvas en Facebook. También puedes acceder a vídeos con charlas y guías.

Dando de alta una aplicación

Para entender mejor todos los apartados, y para poder realizar algunos ejemplos, vamos a crearnos una nueva aplicación. Para ello, vamos a seguir los siguientes pasos:

Accedemos a la página de desarrolladores de Facebook: https://developers.facebook.com/

Una vez ahí, seleccionamos “Aplicaciones” en el menú.

En tercer lugar, pulsamos sobre el botón .

Ahora indicamos un nombre y la local de la aplicación y pulsamos Continuar:

Completamos el captcha y pulsamos sobre Enviar:

Y con esto ya estaría dada de alta nuestra aplicación:

Fíjate en la caja superior. Verás dos campos: App ID y App Secret. Estos código los necesitarás para hacer funcionar tu aplicación. El primero es el código que identifica la app, y el segundo es un código de seguridad que utilizarás para la autenticación en el lado del servidor.

Por lo pronto, podemos cambiar los siguientes campos:

• Logo. Corresponde al logo de 75×75 px de la aplicación.
• Icono. Icono de 16×16 px de la aplicación
• App Secret. Este código no debemos compartirlo con nadie. Desde este apartado podremos reiniciarlo si lo deseáramos.
• App Display Name. Nombre con el que se mostrará la aplicación.
• App Namespace. Nombre del espacio de nombres de la aplicación, formado únicamente por caracteres en minúsculas, guiones medios y guiones bajos.
• Contact Email. Dirección de correo electrónico de contacto.
• App Domain. Dominio sobre el que se alojará la aplicación (por ejemplo www.example.com).
• Category y Sub-category. Categorías en las que catalogamos la aplicación.

Además, vemos que podemos definir 4 formas distintas de integrar la aplicación con Facebook:

1. Website. Para cuando queramos que en nuestra página puedan los usuarios hacer login con su cuenta de Facebook.
2. App on Facebook. Aplicación para incorporar en un canvas dentro de Facebook.
3. Mobile Native. Para crear una aplicación para móviles.
4. Page Tab. Permite crear una aplicación que se mostrará como una pestaña dentro de una Facebook Page.

Y estas son todas las opciones básicas que tenemos disponibles para configurar una aplicación de Facebook. Sin embargo, podemos acceder a la configuración avanzada desde el menú de la izquierda, pulsando sobre Configuration > Advanced:

En este apartado avanzado por ahora podremos establecer la descripción de nuestra aplicación, y el Sandbox Mode (habilitado indica que sólo los desarrolladores pueden acceder a la aplicación).

Rápido e indoloro, ya tenemos nuestra aplicación creada . Cada vez que queramos volver a la configuración de nuestra aplicación, tan solo tendremos que acceder a la página de desarrolladores de Facebook, apartado Aplicaciones, y seleccionamos la opción deseada.

Tecnologías disponibles

Bien, y ¿qué tecnologías nos ofrece Facebook para implementar una aplicación? Éstas son las principales:

1. Social plugins

Corresponde a pequeños plugins o widgets que se pueden incorporar muy fácilmente en cualquier página web ajena a Facebook. Accediendo a la página de cada uno de ellos verás un pequeño formulario que te genera el código necesario para que lo incorpores en tu página. Seguro que estás muy familiarizado con casi todos ellos:

Botón “Me gusta”.
Es el más famoso de todos los plugins. Permite a los usuarios compartir con un solo clic la página que están visitando

Botón “Enviar”.
Permite que los usuarios envíen a alguno/s de sus contactos la página que están visitando.

Comentarios.
Para añadir un sistema de comentarios a tu página web.

Feed de actividades.
Muestra una lista de las últimas actividades que han llevado a cabo tus contactos de Facebook.

Recomendaciones.
Muestra al usuario una lista personalizada de enlaces recomendados, en función de diferentes parámetros, como por ejemplo las preferencias de sus amigos.

Caja “me gusta”.
Similar al botón “Me gusta”, pero con más elementos. Por ejemplo, muestra las últimas actividades de la página, o una lista de personas a las que les gusta.

Botón “Login”.
Botón que permite iniciar sesión en la página utilizando la infraestructura de sesiones de Facebook.

Registro.
Formulario de registro a una página que se rellena automáticamente con tus datos de Facebook. De este modo, se ahorra tiempo a los usuarios.

Facepile.
Muestra una lista de imágenes de perfil de los usuarios a los que les ha gustado la página que se está visitando.

Live Stream.
Muestra un pequeño ‘chat’ vinculado a la página que se está visitando.

Como ves, a base de insertar este tipo de plugins, puedes crear una página web muy rica en funcionalidades en un tiempo récord. A modo de demostración, puedes consultar esta página, que forma parte del apartado de ejemplos de Facebook. Esta demo hace uso del botón “me gusta”, del feed de actividades, de las recomendaciones y de los comentarios.

2. Diálogos

Podemos definir los diálogos como ventanas emergentes que solicitan al usuario permiso para realizar alguna acción.

Podemos invocar los diálogos a mano, sin embargo en general suele ser mucho más cómo realizarlo mediante alguno de los SDK que Facebook nos ofrece. En concreto, para páginas web, utilizaremos el SDK JavaScript mediante el método FB.ui. En el apartado del SDK de JavaScript veremos cómo invocar estos diálogos.

Por lo pronto, vamos a ver cuáles son los distintos diálogos que nos ofrece Facebook:

Diálogo de Feed

Permite al usuario añadir a su muro, desde nuestra aplicación, una publicación.

Diálogo de amigos

Muestra un diálogo para añadir a un amigo.

Diálogo OAuth

Solicita al usuario unas determinadas autorizaciones, y concede permisos a la aplicación.

Diálogo de Pago

Permite al usuario adquirir nuevos créditos de Facebook.

Diálogo de petición

Diálogo que permite al usuario enviar una petición a uno o más amigos.

Diálogo de envío

Diálogo para que el usuario envíe un mensaje a algún amigo, a un grupo de amigos, o a una dirección de correo.

3. Autenticación y Permisos

A menudo necesitaremos que los usuarios nos autoricen a acceder a su información. Por ejemplo, cuando queramos que puedan iniciar sesión en nuestra web utilizando su cuenta de Facebook, o cuando desde nuestra aplicación queramos acceder a determinados campos de su perfil de usuario. Para solicitar esta autorización utilizaremos el Diálogo OAuth.

Cada vez que se utiliza el diálogo OAuth, podremos pasarle información al diálogo acerca de la los permisos de acceso que autorizará el usuario. Te recomiendo que revises la lista de todos los posibles permisos. Además, ten en cuenta que cuantos más permisos solicites a un usuario, menor será el número de personas que decidan autorizar a tu aplicación.

Existen dos métodos posibles de autenticación: Desde el servidor, o desde el cliente. Pero, para simplificar, podemos decir que son equivalentes el uno al otro.

4. Graph API

El nucleo de Facebook es un grafo social, donde cada persona, foto, evento o página tiene su ID único, y donde existen conexiones entre todos ellos (por ejemplo, amistades, etiquetas en fotos, contenidos compartidos, etc.).

Para acceder a las propiedades de cualquiera de estos objetos accederemos a la URL: https://graph.facebook.com/ID cambiando ID por el identificador del objeto que queramos consultar. Como resultado, nos devolverá un objeto JSON.

Por ejemplo, al comienzo de este artículo creamos una aplicación. Puedes coger el App ID de tu aplicación y acceder a su información. Te saldrá algo similar a esto:

{
   "id": "256797284360192",
   "name": "chusete demo",
   "description": "Aplicaci\u00f3n de pruebas de Chusete",
   "category": "Utilities",
   "subcategory": "News",
   "link": "http://www.facebook.com/apps/application.php?id=256797284360192"
}

En el caso de los usuarios y de las páginas, cuando tengan un alias, se podrá usar como alternativa al ID.

Por supuesto, todas estas peticiones devuelven por defecto tan solo la información pública de ese objeto/persona. Para acceder a información privada, debemos contar con su autorización. Esta autorización se proporciona mediante el parámetro GET access_token.

5. Open Graph Protocol

Esto no es una tecnología del core de Facebook propiamente dicha, pero sí es algo sobre lo que se apoya. ¿De qué se trata? Voy a explicarlo mediante un ejemplo. Supón que creas una página web de restaurantes, donde cada uno tiene su propia URL. Un día un usuario comparte esta URL en Facebook. ¿Qué ocurrirá? Que Facebook elegirá la información y las imágenes que él considere relevante. Pero, ¿y si quisiéramos nosotros decirle a Facebook (y otras redes sociales) la información que debe mostrar? Para dar respuesta a eso surge el protocolo Open Graph.

En otras palabras: Hace que nuestras páginas web se conviertan en objetos “del mundo real” con el que pueden interactuar las redes sociales. Películas, restaurantes, celebridades, etc.

En el caso concreto de Facebook, además, cuando un usuario haga clic en el plugin del botón “Me gusta” de una de tus páginas, será equivalente a que hiciera clic en “Me gusta” de alguna de las Facebook Pages, por lo que podrás enviarle actualizaciones a su Feed. Mola, ¿no?

Su funcionamiento no podría ser más sencillo. Open Graph Protocol está basado en RDFa, por lo que mediante etiquetas meta puedes añadir semántica a tus páginas. Además, para una correcta integración con Facebook, debes añadir el plugin del botón “Me gusta”.

Para más información, revisa la página oficial de Open Graph Protocol: http://ogp.me/

6. Otras tecnologías

Además de todas las tecnologías que hemos visto, existen otras de tipo avanzado que, por lo general, no será necesario usarlas. En concreto estaríamos hablando de:

• FQL. Facebook Query Language, o Lenguaje de consultas de Facebook. Similar a SQL, sirve para consultar los datos que ofrece Graph API.
• API de internacionalización. Mediante esta API puedes aprovechar la infraestructura de internacionalización de Facebook para tu aplicación.
• API de créditos. Para que los usuarios puedan realizar pagos de créditos de Facebook para utilizar en tu aplicación.
• API de publicidad. Permite crear y gestionar mediante código tus campañas publicitarias.
• API de Chat. Para aquellos desarrolladores que quieran integrar el chat de Facebook en sus aplicaciones, mediante el protocolo estándar Jabber/XMPP.

APIs obsoletas. Además, existen determinadas APIs que han quedado obsoletas y a las que pronto Facebook dejará de dar soporte, como la API REST, el lenguaje de marcado FBML, o la API JavaScript.

SDKs

Por último, vamos a repasar los distintos kits de desarrollo que nos regala Facebook. Cabe destacar que no es imprescindible utilizarlos, ya que podremos realizar la autenticación, invocación de diálogos, o las llamadas a la API a mano. Pero, como podrás imaginar, resulta mucho más sencillo utilizar una herramienta ya probada que lo haga por nosotros.

Existen cuatro SDKs:

1. JavaScript SDK.
2. PHP SDK.
3. iOS SDK (iPhone & iPad).
4. Android SDK.

Aquí vamos a hablar de los dos primeros.

1. JavaScript SDK

Permite realizar llamadas a la Graph API, crear diálogos, renderizar los Social Plugins, además de otras muchas cosas. Para usar el SDK, debemos  intrducir el siguiente código a nuestra aplicación:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'ID DE TU APP',
    status : true, // comprobar estado de login
    cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
    xfbml  : true, // ejecutar código XFBML
    channelURL : 'http://WWW.MIDOMINIO.COM/channel.html', // fichero channel.html
    oauth  : true // habilita OAuth 2.0
  });
</script>

Y en el fichero channel.html añades el siguiente contenido:

<script src="http://connect.facebook.net/en_US/all.js"></script>

Y ya lo tienes. Tu página está preparada para ejecutar código del SDK JavaScript de Facebook.

2. PHP SDK

El SDK oficial para PHP de Facebook es un proyecto open source que se encuentra alojado en GitHub:  https://github.com/facebook/php-sdk/.

Si bien existe un ejemplo básico, pero completo, sobre su uso, vamos a resumir aquí las principales operaciones:

Código de inicialización:

require 'php-sdk/src/facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'TU_APP_ID',
  'secret' => 'TU_APP_SECRET',
));

// Obtener ID de usuario
$user = $facebook->getUser();

Llamada a la API (Graph API):

if ($user) {
  try {
    // Procedemos sabiendo que tenemos un usuario que ha iniciado sesión y concedido permisos.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}

Obtener URLs de inicio de sesión y de salida:

if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}

Resumen

Este ha sido un post bastante extenso, al que le seguirán otros con distintos casos de uso. Por lo pronto, hemos visto que es posible implementar distintos tipos de aplicaciones para Facebook: para el móvil, para una página web, y empotradas en Facebook. Hemos revisado paso a paso el proceso de alta de una nueva aplicación, donde establecemos los parámetros básicos, el nombre, logo, descripción, etc. También hemos revisado todas las tecnologías que nos ofrece Facebook para desarrollar aplicaciones en su ecosistema: Social Plugins, Diálogos, Autenticación y permisos, Graph API y Open Graph. Por último, hemos repasado las distintas bibliotecas que nos da Facebook para facilitar el desarrollo de aplicaciones en JavaScript, PHP, iOS y Android, centrándonos en las dos primeras.

Ahora que conocemos bien todo marco de trabajo sobre el que se apoyan las aplicaciones en Facebook, estamos listos para comenzar. En el siguiente post realizaremos una pequeña aplicación que sirva como demo de todos estos conceptos.

Aviso – Lee esto antes

Tras escribir este artículo he visto que el encargado del dominio democreaciarealya.es ya había escrito un post en Barrapunto desmintiendo lo que dicen sobre él:
http://barrapunto.com/~manje/bitacora

Esta noche estamos viendo en varios medios de comunicación, afines a la derecha, decir que tanto la iniciativa #democraciarealya como #acampadasol fueron gestadas por el PSOE. ¿Por qué lo dicen? ¿Cómo pueden pensar algo así cuando no hace más que gritarse “no LES votes”?

Dicen “El titular del dominio democraciarealya es el dirigente de una escisión de Izquierda Unida, que ahora forma parte de la web redsocialista, por tanto las acampadas de Sol son iniciativa del PSOE y se están gestando desde el 1 de marzo de este año, no se trata de algo espontáneo“. Veamos en qué se basa su sesudo estudio

Gracias a los datos whois del dominio democraciarealya.es, han averiguado el nombre del contacto administrativo y técnico; se trata de Manuel J R E. Primer fallo: Manuel J. es el contacto administrativo y técnico, no el titular. Éste es el Colectivo de Educador@s en Barrio Arrabal. Pero ok, asumamos que Manuel J. es el titular.

Si buscamos su nombre en Google, en el cuarto resultado vemos lo siguiente:

¿Qué es una Red de blogs? Se trata de una página que muestra automáticamente todos los artículos de aquellos blogs que estén vinculados a esta red. En concreto este artículo proviene de este otro blog, y habla de que Manuel J. R. E. ha realizado una página web para compartir noticias de Jerez.

Segundo fallo: que su nombre aparezca en esa red de blogs, no lo vincula con el PSOE. Es como decir que José María Aznar es socialista, porque su nombre también aparece en la web redblogsocialistas.org. Como en “Red de Blogs Socialistas” ha salido publicada una noticia que habla de la nueva página web que ha creado Manuel J. R. E. (persona de contacto administrativo y técnico de democraciarealya.es), entonces concluyen que Manuel es socialista.

Luego llama la atención la precisión con la fecha en que “el PSOE inició todo esto”: el 1 de marzo. ¿Por qué el 1 y no el 26 de febrero? Simple y llanamente se limitan a decir la fecha de alta del dominio democraciarealya.es Esto es de una candidez mental tal que uno no puede evitar sonreir.

Por último, tratan de deslegitimar las declaraciones de los acampados en que dicen que esto es un movimiento espontáneo. ¿No se han enterado de que una cosa es la manifestación ORGANIZADA del 15M, y otra la acampada espontánea que surgió minutos después por parte de unas 50 personas de las que acudieron? Por tanto tercer fallo: Confundir el movimiento #democraciarealya con @acampadasol. No hay más que leer la propia web de democraciarealya:

Democracia real YA apoya las acampadas espontáneas convocadas para esta misma semana. Convocatorias también desprovistas de símbolos políticos o sindicales y promovidas por asistentes a las manifestaciones del domingo, pero no convocadas directamente por Democracia real YA ni por los organizadores de las manifestaciones del 15 de mayo.

Así es. En esto se basan los sesudos informes que presentan los medios de desinformación que manipulan a la ciudadanía. Lo peor de todo, nuestras personas más mayores los creen.

Copiad y pegad este artículo donde queráis. Que no deslegitimen este movimiento de todos nosotros.

Edit: Efectivamente, el titular del dominio (colabore o no con #democraciarealya), formó parte de las listas de Izquierda Andaluza. De modo que es evidente que no tuvo vinculación alguna con el PSOE.