Plugin jquery para incluir el muro de una página de Facebook en tu web


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.

¿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)

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.


22 respuestas a “Plugin jquery para incluir el muro de una página de Facebook en tu web”

  1. Hola y gracias por tus mensajes muy informativos.

    Yo tampoco logro hacer que funcione, sería buenísimo tener un ejemplo funcional para simplemente modificar el ID de facebook y poder hecharlo a andar. Y ya luego si lo deseo poder hacer otros tipos de modificaciones de estilo, etc.

    Gracias de antemano.
    Nor

  2. El error esta en el codigo. Si se fijan, alrededor de la linea 7 dice: pageid : «116374171720257», pero al final del script, dentro de la declaracion de los dos plugins, hace referencia varias veces a: pagegraph.pageId (con I mayuscula). Si corrigen eso les va a fucionar perfectamente

    Anda muy bien
    Gracias y saludos

  3. Buenas Ivano,

    Mil gracias por ver el fallo. No he tenido tiempo de ponerme a revisar porque fallaba. Veo que como dices el fallo estaba en que al declarar los plugins se llama a la propiedad «pagegraph.pageId» en vez de a «pagegraph.pageid». Algo debi tocar antes de subir el archivo al blog. De nuevo gracias por verlo y comentarlo.

    He corregido el archivo javascript para que nadie más tenga problemas con el mismo. Ya se puede descargar sin problemas.

  4. Hola, muchas gracias por el magnifico aporte, pero hay algo que no entiendo, como podria sacar simplemente los eventos y mostrar la fecha de ellos. Es que los eventos con tu script los toma como links y no le puedo sacar el «location».

    Gracias y Un saludo.

  5. Estoy haciendo las pruebas y funciona perfectamente, ahora me tengo que remirar el código para limitar el número de resultados. 😀

    Muchas gracias

  6. Hola, gracias por el plugin, me viene genial. Quería preguntarte si e sopsible hacer esto mismo pero con el muro de un perfil de facebook en lugar del de una página. Gracias…

  7. hola a todos
    jose luis hernandez e Ikhuerta, ojala puedan ayudarme, no puedo hacerlo funcionar

    jose luis hernandez como lo jalas a la web?
    de donde aparecen esos iframes?

    de antemano gracias por su ayuda

  8. Hola. Lo cierto es que me da errores extraños e ilógicos. ¿Sigue funcionando este plug-in al día de hoy?

  9. Buenas,

    Lo siento pero parece que la petición de feed de una página pública paso a necesitar estar identificado y con el tocken creado para poder lanzarse…

    Es ilógico ya que ahora para una página abierta necesitas logar al usaurio por lo que este plugin no arroja datos al no pedir el usuario logado.

  10. Hola, he intentado instalar tu plugin, pero me da error, primero, no deberia llebar parentesis el function() ?
    $(document).ready(function { // o la forma abreviada de este…

    $(document).ready(function() { // o la forma abreviada de este…

    y si le pongo los parentesis me peta en el jQuery 1.7
    Aqui :

    // args is for internal usage only
    each: function( object, callback, args ) {
    var name, i = 0,
    length = object.length,
    isObj = length === undefined || jQuery.isFunction( object );

    me dice que: length = object.length,
    is undefined..

  11. por desgracia ahora toca hacerlo desde el servidor pues de otra forma estarías poniendo publico tu token de autentificacion y cualquiera podría usarlo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *