Extraer galería de fotos de una Fan Page de Facebook.

Publicado por

En estos tiempos, donde muchisimas personas (por no decir todas) ya cuentan con un perfil en redes sociales, más sin embargo como ya sabemos, la «moda» o la red social con más usuarios en la red es Facebook. Esta plataforma cuenta con multiples servicios para los perfiles de las personas, como son: muro de mensajes (alias ‘twitter de facebook’), fotos, videos, notas, aplicaciones, etc. Las empresas pueden aplicar estos mismos servicios, no como un perfil de usuario, si no como una compañía con una pagina fan. En estas paginas, las personas se unen para conocer sus promociones, fotos y actividad de dichas empresas. Esto es solo un gancho social para atraer a los usuarios, o como mantener clientes leales como tal es el caso de Starbucks. Todo esta plataforma puede ser aprovechada por los desarrolladores web para extraer la información con ayuda del API, creando un concepto muy parecido al de la nube (cloud computing). Pues bien, ahora vamos a aprender un poco de como aprovechar esta plataforma para crear galerías de fotos. Empezamos.

Lo primero…

Antes de empezar necesitamos contar con lo siguiente:

  • Tener una cuenta en Facebook
  • Tener acceso a la Fan Page de donde vamos a extraer la galería.
  • Soporte libreria JSON de PHP
  • Que la Fan Page sea totalmente publica.
  • Que nuestro servidor soporte cURL (opcional).

Si contamos con lo anterior, ya podemos trabajar sobre nuestra pagina web para que muestre las fotos de facebook en el sitio. Si tu servidor no cuenta con cURL, no te preocupes, más adelante te voy a decir una alternativa a cURL. Como la galería tiene que ser publica, entonces no necesitaremos del access_token que necesita el Graph API de Facebook para reconocer al usuario que ya inicio sesión. Ahora si… sobre la marcha.

El siguiente paso…

Necesitamos obtener el numero de ID de nuestra galería, pero como en ninguna parte menciona la ID de la galería, ni en la URL, entonces necesitamos entrar al API, que si nos dirá como acceder, vamos a trabajar sobre una Fan Page que creé para este ejemplo. Mi Fan Page se llama «Faxterol Web» y su numero de ID es 116134141772310. Esta prueba se hace en el navegador, así que esta es la estructura de la URL de los albums de una fan page.

https://graph.facebook.com/ID_FANPAGE/albums

Sustituimos ID_FANPAGE por el ID de nuestra Fan Page. y nos mostrará algo así.

[js]
{
«data»: [
{
«id»: «116134595105598»,
«from»: {
«name»: «Faxterol Web»,
«category»: «Unknown»,
«id»: «116134141772310»
},
«name»: «Wallpapers PHP»,
«description»: «Algunos Wallpapers de PHP.»,
«link»: «http://www.facebook.com/album.php?aid=23384&id=116134141772310»,
«count»: 3,
«created_time»: «2010-08-05T21:56:51+0000»,
«updated_time»: «2010-08-05T21:58:51+0000»
},
{
«id»: «116134141772310»,
«from»: {
«name»: «Faxterol Web»,
«category»: «Unknown»,
«id»: «116134141772310»
},
«name»: «Fotos de perfil»,
«link»: «http://www.facebook.com/album.php?aid=-3&id=116134141772310»,
«count»: 1,
«created_time»: «2010-08-05T21:55:42+0000»,
«updated_time»: «2010-08-05T21:55:42+0000»
}
],
«paging»: {
«previous»: «https://graph.facebook.com/116134141772310/albums?limit=25&since=2010-08-05T21%3A56%3A51%2B0000»,
«next»: «https://graph.facebook.com/116134141772310/albums?limit=25&until=2010-08-05T21%3A55%3A41%2B0000»
}
}
[/js]

Nos desplega contenido en formato JSON, que contiene la variable data que es un arreglo, y tenemos dos galerías. Ponemos especial atencion en el parametro ‘name’, tomamos la de nombre «Wallpapers PHP», y tomamos su id (arriba de from). Despues de haber tomado el ID, ahora vamos a pedirle las fotos al API de Facebook con la siguiente url.

https://graph.facebook.com/ID_DEL_ALBUM/photos?limit=100

Sustituimos el ID_DEL_ALBUM por el numero de id del album que tomamos anteriormente y abrimos con el navegador para observar que tambien despliega los datos en JSON, pero ahora con las fotos del album. Añadimos la variable ‘limit’ a la url para limitar el numero de fotos que nos regresara el API, podemos cambiarlo si queremos. Ahora nuestra url es así: https://graph.facebook.com/116134595105598/photos?limit=100

Codigo a la ejecución… (vease, manos a la obra)

Ahora si, vamos a trabajar con nuestra galeria.Primero con nuestro codigo PHP.

[php]

«http://graph.facebook.com/140387082653939/photos?limit=100»,
CURLOPT_USERAGENT => «Faxterol 1.0 Windows es_MX / Chromium», //el ‘user agent’
CURLOPT_RETURNTRANSFER => 1 //para que nos regrese el contenido y no lo imprima directamente
));

//el contenido quedará guardado en esta variable.
$galeria = curl_exec($gals);
curl_close($gals);
//codificamos el contenido JSON del API para poder usarlo como arreglo y/o objeto de PHP.
$galeria = json_decode($galeria);

//Esta es la variable de las fotos,
$fotos = $galeria->data;
?>

[/php]

Si no tienes la librería cURL en tu servidor, puedes hacer lo siguiente.

[php]

data;
?>

[/php]

Despues de esto, vamos a imprimir las fotos con un foreach.

[php]





Untitled Document

Galeria


[/php]

la variable, $foto->source tiene guardada la URL de la foto en tamaño grande y la variable $foto->picture la URL de la foto en miniatura (thumbnail).

Y listo ya tenemos nuestra galería en nuestro sitio web.

Una manita de gato…

Si queremos darle una manita de gato, ahi que ponerle algo extra a nuestra galería, en este caso le pondrémos un lightbox. Descargamos un plugin llamado SexyLightbox y lo ponemos en nuestro sitio, el codigo queda de la siguiente manera.

[php]





Untitled Document



Galeria


[/php]

Y listo, ya tenemos una muy bonita y sexy galería de fotos extraidas del facebook de la fan page.

Ventajas…

  • No gastamos en espacio y ancho de banda de nuestro servidor
  • Desarrollo rapido de nuestra aplicación.
  • No necesitamos programar un panel de administración para subir las fotos.
  • No es necesario actualizar las dos partes, pues solo actualizando en Facebook tambien se actualiza en nuestro sitio.
  • Ideal para mostrar fotos a usuarios que no forman parte de dicha red social

Y esas son algunas de las ventajas, espero les haya servido este pequeño tutorial que apliqué a Kilometro X, puedes descargar el ejemplo.

5/5 - (2 votos)

39 comentarios

  1. Me gusto mucho el Post, pero revisando lo que muestra el api, y el ejemplo que muestras, no salen las descripciones de las fotos, ¿Hay alguna forma de obtener las descripciones de cada foto?

    Gracias.

    1. Perdon, ya vi que si aparecen las descripciones de las fotos en el formato JSON, en name 😳 , ahora sólo tengo que buscar la forma de incluirlos en el sexylightbox.

  2. Excelente… la linea para la foto dentro del foreach la coloqué así:

    <a rel="sexylightbox[kmx]" title="name;?>" href="source;?>"><img title="name;?>" src="picture;?>" />

    Además le agregué paginación así:

    En la primera parte agrego:

    if ($_GET["url"]==""){
    $urlface="https://graph.facebook.com/140387082653939/photos?limit=30";
    }else{
    $urlface=$_GET["url"];
    }

    luego cambio:
    CURLOPT_URL => $urlface,


    <?php
    echo("");
    if (($paginas->previous)==""){
    echo("Página Anterior");
    }else{
    echo("previous)."\">Página Anterior");
    }
    echo(" ");
    if (($paginas->next)==""){
    echo("Página Siguiente");
    }else{
    echo("next)."\">Página Siguiente");
    }
    echo("");
    ?>

    1. Olvidé decir que al final de la primera parte, para la páginación hay que agregar:

      $paginas = $galeria->paging;

      y que el último código va al final de la página.

  3. Buenas tardes probé y me funciono todo muy bien, pero lo que aun no logro encontrar es el sexylightbox, podrían decirme donde lo puedo descargar directamente. Gracias

  4. Hola, por favor alguien me puede decir exactamente lo que hay que cambiar para que me funcione? He estado probando y no me va. Espero respuesta. Gracias y un saludo.

  5. Hola 🙂 , sera que por favor podrías colocar un vídeo ya existente o uno que hagas vos en relación al tema, que si es posible donde tu le agregues tambien un estilo para aprender y que tenga mejor explicación (En forma Visual) y aplicación de un profesional (Vos :D) please!! Gracias.

  6. Perdon por mi ignorancia, pero al final cuantos archivos PHP se deben tener… Aun no logro que funcione el codigo y me muestre la galeria…
    Y estoy usando el servidor gratuito: 000webhost.com/

    Necesito ayuda gracias!

  7. Perfecto, nose casi nada de php, pero me funciono. La pregunta es ¿hay alguna forma de que aparezcan en cuadriculas, osea como en tablas y no todas en una sola linea vertical? bueno lo pregunto sin saber si es un rollo explicarlo o no,ojala se pueda. Gracias por este tutorial.

  8. Como se hace para que no aparezca todo el listado de fotos sino que aparezcan los albums? y tambien quitarle las viñetas ya le cambie el por pero no funciono. Gracias de paso por el aporte es muy bueno

  9. Use este metodo hace un año y por algún motivo sin realizar ningun cambio ha dejado de funcionar. Sospecho que el problema está en la obtención de la galería en el PHP del por algún cambio reciente que haya hecho Facebook.

    No entiendo mucho de PHP asi que Googleare y si encuentro la solución les cuento.

    1. Bueno, lo solucione. Aparentemente dejo de funcionar el codigo PHP que utilizaba cURL.


      //llamamos la URL con la librería cURL.
      $gals = curl_init();
      curl_setopt_array($gals,array(
      CURLOPT_URL => "https://graph.facebook.com/568200396571602/photos?limit=100",
      CURLOPT_USERAGENT => "Faxterol 1.0 Windows es_MX / Chromium", //el 'user agent'
      CURLOPT_RETURNTRANSFER => 1 //para que nos regrese el contenido y no lo imprima directamente
      ));

      //el contenido quedará guardado en esta variable.
      $galeria = curl_exec($gals);
      curl_close($gals);

      Así que lo reemplaze por el que no:

      //$galeria = file_get_contents(«https://graph.facebook.com/116134595105598/photos?limit=100»); //por si no tenemos cURL

      Osea, COMENTE (//) lo primero y DESCOMENTE -(//)lo segundo

      Saludos!

  10. hola sabes esto me funcionaba hace algun tiempo y ahora dejo de hacerlo.

    lo que tengo es:

    ——————————————————————-
    PARTE 1
    «https://graph.facebook.com/ID_DEL_ALBUM/photos?limit=15″,
    CURLOPT_USERAGENT=>»»,
    CURLOPT_RETURNTRANSFER=>1));
    $galeria=curl_exec($gals);
    curl_close($gals);
    $galeria=json_decode($galeria);
    $fotosA=$galeria->data; //linea 13
    ?>

    ——————————————————————-
    PARTE 2

    $fotosA){ ?>

    <a rel="sexylightbox[kmx]" title="Foto de NOMBRE GALERIA» href=» source; ?>»> linea57
    <img title="Foto de NOMBRE GALERIA» src=»picture; ?>» width=»100″ height=»70″/> linea58

    Cuando carga la pagina me salen errores:

    en la 1° parte
    Notice: Trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 13

    en la 2° parte
    me dice que no estan definidas las variables $idfoto y $foto y
    ademas el mensaje de trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 57 y 58

    no entiendo que pasa 😕
    help!

    1. si antes te funcionaba y ahora no puede ser por varias cosas

      1) que no tengas instalado curl en el servidor donde lo pusiste
      2) la galería de la que extraías las fotos ya no existe

      Lo que comentas de la parte 1 es que no te esta retornando bien un objeto en json de la galería
      2) si te dicen que las variables idfoto y foto no estan definidas, es posible que las hayas eliminado

      no atiiendo por email salvo a que fuera por consultoría

      espero comprendas, saludos!

  11. hola sabes esto me funcionaba hace algun tiempo y ahora dejo de hacerlo.

    lo que tengo es:

    ——————————————————————-
    PARTE 1
    «https://graph.facebook.com/ID_DEL_ALBUM/photos?limit=15″,
    CURLOPT_USERAGENT=>»»,
    CURLOPT_RETURNTRANSFER=>1));
    $galeria=curl_exec($gals);
    curl_close($gals);
    $galeria=json_decode($galeria);
    $fotosA=$galeria->data; //linea 13
    ?>

    ——————————————————————-
    PARTE 2

    $fotosA){ ?>

    <a rel="sexylightbox[kmx]" title="Foto de NOMBRE GALERIA» href=» source; ?>»> linea57
    <img title="Foto de NOMBRE GALERIA» src=»picture; ?>» width=»100″ height=»70″/> linea58

    Cuando carga la pagina me salen errores:

    en la 1° parte
    Notice: Trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 13

    en la 2° parte
    me dice que no estan definidas las variables $idfoto y $foto y
    ademas el mensaje de trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 57 y 58

  12. hola sabes esto me funcionaba hace algun tiempo y ahora dejo de hacerlo.

    lo que tengo es:

    ——————————————————————-
    PARTE 1
    «https://graph.facebook.com/ID_DEL_ALBUM/photos?limit=15″,
    CURLOPT_USERAGENT=>»»,
    CURLOPT_RETURNTRANSFER=>1));
    $galeria=curl_exec($gals);
    curl_close($gals);
    $galeria=json_decode($galeria);
    $fotosA=$galeria->data; //linea 13
    ?>

    ——————————————————————-
    PARTE 2

    $fotosA){
    ?>

    <a rel="sexylightbox[kmx]" title="Foto de NOMBRE GALERIA» href=» source; ?>»> linea57
    <img title="Foto de NOMBRE GALERIA» src=»picture; ?>» width=»100″ height=»70″/> linea58

    Cuando carga la pagina salen errores:

    en la 1° parte
    Notice: Trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 13

    en la 2° parte
    me dice que no estan definidas las variables $idfoto y $foto y
    ademas el mensaje de trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 57 y 58

  13. hola sabes esto me funcionaba hace algun tiempo y ahora dejo de hacerlo.

    lo que tengo es:

    ——————————————————————-
    PARTE 1
    «https://graph.facebook.com/ID_DEL_ALBUM/photos?limit=15″,
    CURLOPT_USERAGENT=>»»,
    CURLOPT_RETURNTRANSFER=>1));
    $galeria=curl_exec($gals);
    curl_close($gals);
    $galeria=json_decode($galeria);
    $fotosA=$galeria->data; //linea 13
    ?>

    ——————————————————————-
    PARTE 2

    $foto){ ?>

    <a rel="sexylightbox[kmx]" title="Foto de NOMBRE DE LA GALERIA» href=» source; ?> «>
    <img title="Foto de NOMBRE DE LA GALERIA» src=»picture; ?>» width=»100″ height=»70″ />

    Cuando carga la pagina salen errores:

    en la 1° parte
    Notice: Trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 13

    en la 2° parte
    me dice que no estan definidas las variables $idfoto y $foto y
    ademas el mensaje de trying to get property of non-object in
    C:\xampp\htdocs\skyview\galeria.php on line 57 y 58

  14. Les comento que facebook ha puesto un token access el cual hay que agregarlo
    con el curl no me funciona, pero si desconetando la linea
    $galeria = file_get_contents(«https://graph.facebook.com/999990710674/photos?fields=picture&limit=100&access_token=TOKEN DEFINITIVO»); //por si no tenemos cURL

    Tienen que obtener un access token definitivo eso si

  15. Encontre la solución a este gran problema… aqui se pueden guiar http://cesarmansilla.com/blog/2014/12/22/obtener-un-page-access-token-que-nunca-expira/
    yo use token de aplicacion que tampoco expira (mas rápido de sacar)

    El problema es que aún colocando el token mi galería no funcionaba, todo porque ahora hay que definir los campos que mostrará. se hace en la linea:

    CURLOPT_URL => "http://graph.facebook.com/140387082653939/photos?limit=100"

    Hay que aquegar el token y los campos así:

    CURLOPT_URL => "http://graph.facebook.com/140387082653939/photos?limit=100&access_token=TU_TOKEN_DE_APP&fields=id,created_time,from,height,icon,images,link,picture,name,source"

    Yo necesitaba esos campos porque mi galería es diferente y como dije antes use un ligthbox que necesita el source,name,picture,id y otros que puse de más

Deja un comentario