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

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í.

  1. {
  2. "data": [
  3. {
  4. "id": "116134595105598",
  5. "from": {
  6. "name": "Faxterol Web",
  7. "category": "Unknown",
  8. "id": "116134141772310"
  9. },
  10. "name": "Wallpapers PHP",
  11. "description": "Algunos Wallpapers de PHP.",
  12. "link": "http://www.facebook.com/album.php?aid=23384&id=116134141772310",
  13. "count": 3,
  14. "created_time": "2010-08-05T21:56:51+0000",
  15. "updated_time": "2010-08-05T21:58:51+0000"
  16. },
  17. {
  18. "id": "116134141772310",
  19. "from": {
  20. "name": "Faxterol Web",
  21. "category": "Unknown",
  22. "id": "116134141772310"
  23. },
  24. "name": "Fotos de perfil",
  25. "link": "http://www.facebook.com/album.php?aid=-3&id=116134141772310",
  26. "count": 1,
  27. "created_time": "2010-08-05T21:55:42+0000",
  28. "updated_time": "2010-08-05T21:55:42+0000"
  29. }
  30. ],
  31. "paging": {
  32. "previous": "https://graph.facebook.com/116134141772310/albums?limit=25&since=2010-08-05T21%3A56%3A51%2B0000",
  33. "next": "https://graph.facebook.com/116134141772310/albums?limit=25&until=2010-08-05T21%3A55%3A41%2B0000"
  34. }
  35. }

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.

  1. <?php
  2. //llamamos la URL con la librería cURL.
  3. $gals = curl_init();
  4. CURLOPT_URL => "http://graph.facebook.com/140387082653939/photos?limit=100",
  5. CURLOPT_USERAGENT => "Faxterol 1.0 Windows es_MX / Chromium", //el 'user agent'
  6. CURLOPT_RETURNTRANSFER => 1 //para que nos regrese el contenido y no lo imprima directamente
  7. ));
  8.  
  9. //el contenido quedará guardado en esta variable.
  10. $galeria = curl_exec($gals);
  11. curl_close($gals);
  12. //codificamos el contenido JSON del API para poder usarlo como arreglo y/o objeto de PHP.
  13. $galeria = json_decode($galeria);
  14.  
  15. //Esta es la variable de las fotos,
  16. $fotos = $galeria->data;
  17. ?>

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

  1. <?php
  2.  
  3. //Extraemos el contenido de la galería y lo guardamos en una variable.
  4.  
  5. $galeria = file_get_contents("https://graph.facebook.com/116134595105598/photos?limit=100");
  6. //codificamos el contenido JSON del API para poder usarlo como arreglo y/o objeto de PHP.
  7. $galeria = json_decode($galeria);
  8.  
  9. //Esta es la variable de las fotos,
  10. $fotos = $galeria->data;
  11. ?>

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. </head>
  7. <body>
  8. <h1>Galeria</h1>
  9. <ul><?php
  10. <?
  11. foreach($fotos as $idfoto => $foto){
  12. ?>
  13. <li><a title="Foto <?=($idfoto+1);?> de la galería." href="<?=$foto->source;?>"><img title="Foto <?=($idfoto+1);?> la galería" src="<?=$foto->picture;?>" /></a></li>
  14. <?php
  15. }
  16. ?>
  17. </ul>
  18. </body>
  19. </html>

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.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. <script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>
  8.  
  9. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  10. <link rel="stylesheet" href="sexylightbox.css" type="text/css" />
  11.  
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. SexyLightbox.initialize({color:'blanco', dir: 'sexyimages'});
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <h1>Galeria</h1>
  20. <ul><?php
  21. <?
  22. foreach($fotos as $idfoto => $foto){
  23. ?>
  24. <li><a rel="sexylightbox[kmx]" title="Foto <?=($idfoto+1);?> de la galería" href="<?=$foto->source;?>"><img title="Foto <?=($idfoto+1);?> de la galería" src="<?=$foto->picture;?>" /></a></li>
  25. <?php
  26. }
  27. ?>
  28. </ul>
  29. </body>
  30. </html>

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.

Extraer galería de fotos de una Fan Page de Facebook. 5.00/5 (100.00%) 2 votes

Has llegado a este artículo buscando:

Disfruta compartiendo

  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Bitacoras.com
  • email
  • FriendFeed
  • Google Buzz
  • LinkedIn
  • Meneame
  • Posterous
  • Wikio
Dejar un comentario?

39 Comentarios.

  1. Extraer galería de fotos de una Fan Page de Facebook - pingback on agosto 9, 2010 @8:47 pm
  2. queria saber si se puede obtener el listado de fans, o como minimo los avatares de unos cuantos usuarios en modo aleatorio

  3. 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.

    • 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.

  4. Una pregunta existira alguna forma de hacer ese api pero para todos los albunes de la fan page, en un solo api?

  5. 😛 me gusto mucho, hice y me funciono, en mi caso solo necesitaba bajar de una forma facil las fotos grandes, ya que eran como 10 albums. http://damisella.com.co/web1/fanpage.php

  6. 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("");
    ?>

  7. necesito poner todo los albunes de fotos de un fans page en una pagina, como lo hago??

  8. 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

  9. es posible guardar todos las fotos de los albunes, en mi pc?

  10. 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.

  11. Muchisimas gracias por compartir tu conocimiento, la verdad es que busque bastante pero solo lo encontraba para wordpress

  12. 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.

  13. Es posible que estas fotos se puedan descargar o sean copiadas a una carpeta especifica en el servidor?

    Gracias.

  14. la pregunta es para aprender a utilizar con un estilo, si es posible podrias colocar de como funciona con lightbox o alguno parecido :)

  15. Guillermo Melendez

    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!

  16. 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.

  17. me funciono de 10 el codigo pero si yo quisiera montar la imagen junto a su descripción se puede hacer?

  18. 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

  19. No entiendo nada, alguien que sea de Chile que sea tan amable de contactarse conmigo y ayudarme. Estaría infinitamente agradecida.
    Saludos

  20. Hola, y si quisiera ordenarlos de la última a la primera, es posible?

  21. 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.

    • 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!

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

    • 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!

  23. uufff tu editor de texto me dejo la caga con el post anterior

  24. 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

  25. ?????????? otra vez no muestra parte del codigo que te estoy enviando
    que onda????

  26. 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

  27. 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

  28. definitivamente esto no me deja colocar el codigo que tengo … mi correo es: jteran.pc@gmail.com si me das el tuyo te puedo enviar un doc con lo que tengo….

  29. Buenas noches, he leido tu publicación y e ha sido de mucha utilidad, gracias por la aportación.

  30. guillermo tkaczuk

    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

Deje un comentario


NOTA - Puede usar estosHTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Trackbacks y Pingbacks: