El otro día descubrí que Facebook graph api no solo te permite hacer consultas fácilmente mediante json, sino que implementa jsonp (json con padding) para hacerlas. Esto significa básicamente que se pueden hacer consultas fácilmente a Facebook mediante Javascript. Esto tiene una limitación y es que para que nuestra consulta sea realmente simple tenemos que solicitar solo información pública. Es decir, no vamos a identificarnos, por lo que olvidémonos de usuarios, amigos, etc… Básicamente podremos acceder a la información de páginas de Facebook (y usuarios que lo tengan todo abierto).

Empecé por hacer un pequeño objeto en javascript literal que haga la mayor parte del trabajo, pero al final me he animado un poco más y he terminado por crear un plugin de jquery que nos permita incluir el Feed de una página. Además le añadi un filtro para poder mostrar todos los mensajes del feed o solo los que la propia página ha escrito ya que para integrar en una web me parece mucho más interesante lo segundo.

Dejo aquí el plugin, sin comprimir y creo que con el código suficientemente claro como para que cualquiera pueda ponerlo a su gusto.

• Descargar Jquery FacebookFeed Plugin

¿Cómo usar el plugin?

El plugin es sencillo de usar, simplemente tenemos que usarlo en el «ready» de jquery con cualquier selección de un elemento de la página y su contenido se cambiará por el feed de la página de facebook. En la llamada simplemente tenemos que indicar el id de la página de facebook que queremos extraer.

Por ejemplo, para el siguiente html:

Deberíamos lanzar el siguiente código javascript:

$(document).ready(function { // o la forma abreviada de este...
  idPaginaDeFacebook = 116374171720257;
  $('#facebook-feed-container').facebookFeed(idPaginaDeFacebook); 
});

Filtrando para ver solo mensajes propios

Otra posibilidad es la de no mostrar todos los mensajes de la página sino solo los que la propia página ha producido…

$(document).ready(function { // o la forma abreviada de este...
  idPaginaDeFacebook = 116374171720257;
  $('#facebook-feed-container').facebookOwnFeed(idPaginaDeFacebook); 
});

Nótese que en la práctica, la única diferencia es usar el plugin «facebookFeed» o el «facebookOwnFeed».

¿Cómo sacar el id de una página de Facebook?

Como se ve, el tema es muy sencillo, simplemente tenemos que averiguar el id de la página que queremos mostrar. Para eso nada más fácil que cargar la página y observar su url

Por ejemplo de:

– http://www.facebook.com/pages/ikhuerta/116374171720257

Extraemos que nuestro id de página es el 116374171720257

¿Como le doy una apariencia decente al Feed?

La verdad es que no he querido enredarme con CSS y diseño y de lo que me he preocupado es de que el html fuese válido para aplicarle el css que cada uno estime oportuno.

Seguidamente dejo una muestra del html resultante al usar el plugin, para que quien lo desee cree su propio css a partir de elementos, ids y clases. (si a alguien le queda algo original o práctico que lo comparta y se gana un link)

  
  

    
    
    PlanetaDeCine
    Dane y Lucas Thompson (Chris Massoglia y Nathan Gamble) son dos hermanos que acaban de mudarse a una nueva casa. Su vecina es una chica muy guapa llamada Julie Campbell (Haley Bennett). A los tres les gusta explorar, y por eso no pueden resistirse a abrir la misteriosa puerta que encuentran en el sótano. Al hacerlo, caerán en un pozo profundo del que sólo podrán escapar enfrentándose a las fuerzas malignas que habitan en él... y que tienen mucho que ver con ellos mismos.
    

      
MIEDOS 3D [HQ]
      
    
    
A 2 personas les gusta esto
    
Descargar video
  
  
  

    
    PlanetaDeCine
    MIEDOS 3D: ¡¡¡QUEDAN 5 DÍAS PARA EL ESTRENO!!!
    
A 6 personas les gusta esto
  
  
  

    
    
    PlanetaDeCine
    

      
GANADORES CONCURSO "KILLERS: El más votado"
      Ya tenemos a los ganadores del fantástico Pack de Killers. Enhorabuena a los afortunados: xxxxx, xxxxx, xxxx
    
    
A 5 personas les gusta esto
    
5 comentario/s
    

      

        
        PlanetaDeCine
        Eso es algo que determinas tu misma cuando creas tu perfil. En configuración o edición de perfil puedes cambiarlo. Facilitanos la recepción de tus datos de forma segura.
      
      [...]
    
  
  [...]

Esto nos deja con un css con declaraciones como las siguientes…

ul.facebook {}
ul.facebook li { /* cada elemento */ }
ul.facebook li.from-127049567332376 { /* para destacar posts propios */ }
ul.facebook li.video {}
ul.facebook li.photo {}
ul.facebook li.status {}
ul.facebook li.link {}
ul.facebook li img.icon {}
ul.facebook li img.user-photo {}
ul.facebook li strong.author {}
ul.facebook li strong.author-127049567332376 { /* para destacar el nombre de la página */}
ul.facebook li span.message {}
ul.facebook li div.extra { /* Cuadro extra cuando hay contenido multimedia */ }
ul.facebook li div.extra h4 {}
ul.facebook li div.extra h4 a{}
ul.facebook li div.extra a.image{}
ul.facebook li div.extra a.image img{}
ul.facebook li div.extra a.image img{}
ul.facebook li div.extra span.description{}
ul.facebook li p.likes{}
ul.facebook li p.source{ /* link de descarga del elemento*/ }
ul.facebook li ul.comments{ /* comentarios */ }
ul.facebook li ul.comments li{ /* comentarios */ }
ul.facebook li ul.comments li img.user-photo{ }
ul.facebook li ul.comments li strong.author{ }
ul.facebook li ul.comments li span.message{ }

… que puedes completar a tu gusto (y no obligatoriamente en colores azul pastel).

Como siempre, espero que alguien le saque partido y pido disculpas por el tostón técnico a los lectores del blog que en realidad solo están aquí por temas de seo y marketing online.

• Descargar Jquery FacebookFeed Plugin