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

Escrito por: el August 5, 2010 Escribe un Comentario (11) Ir a los Comentarios

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

Clic para ver Texto Plano
JavaScript:
  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.

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

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

Clic para ver Texto Plano
PHP:
  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.

Clic para ver Texto Plano
PHP:
  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.

Clic para ver Texto Plano
PHP:
  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.

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
Tutoriales, , , , , ,
Leave a comment ?

11 Comments.

  1. Extraer galería de fotos de una Fan Page de Facebook - pingback on August 9, 2010 at 8:47 pm
  2. javier February 8, 2011 at 8:10 pm

    queria saber si se puede obtener el listado de fans, o como minimo los avatares de unos cuantos usuarios en modo aleatorio

    Reply
  3. Billy September 7, 2011 at 4:51 pm

    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.

    Reply
    • Billy September 8, 2011 at 7:18 am

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

      Reply
  4. Jaime January 18, 2012 at 9:18 am

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

    Reply
  5. Camilo Salazar Ocampo February 12, 2012 at 2:41 pm

    :razz: 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

    Reply
  6. Billy March 7, 2012 at 6:28 am

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

    Reply
    • Billy March 7, 2012 at 8:03 am

      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.

      Reply
  7. miguel April 9, 2012 at 8:13 pm

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

    Reply

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackbacks and Pingbacks: