Do not speak Spanish? Read this post in English.

Martes, 07 d septiembre d 2010.

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:

<div id="facebook-feed-container"></div>

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)

<div id="facebook-feed-container"><!-- Contenedor en el que hemos incluido el feed  -->
<ul id="facebook-127049567332376" class="facebook"><!-- 127049567332376 es el id de página de facebook -->
  <!--  Elemento con un video -->
  <li id="127049567332376_1602830272345" class="video from-127049567332376">
    <img class="icon" src="http://static.ak.fbcdn.net/rsrc.php/z75M0/hash/6z01mawk.gif" />
    <img class="user-photo user-127049567332376" src="https://graph.facebook.com/127049567332376/picture" />
    <strong class="author author-127049567332376">PlanetaDeCine</strong>
    <span class="message">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.</span>
    <div class="extra">
      <h4 class="title facebook-link"><a href="http://www.facebook.com/video/video.php?v=1602830272345">MIEDOS 3D [HQ]</a></h4>
      <a class="image facebook-link" href="http://www.facebook.com/video/video.php?v=1602830272345"><img src="http://vthumb.ak.fbcdn.net/vthumb-ak-sf2p/v50581/75/38/1283738803/t1283738803_1602830272345_1362.jpg"></a>
    </div>
    <p class="likes">A 2 personas les gusta esto</p>
    <p class="source"><a href="http://video.ak.fbcdn.net/cfs-ak-ash2/57633/361/1602830272345_48990.mp4">Descargar video</a></p>
  </li>
  <!--  Elemento sencillo -->
  <li id="127049567332376_146569962029941" class="status from-127049567332376">
    <img class="user-photo user-127049567332376" src="https://graph.facebook.com/127049567332376/picture" />
    <strong class="author author-127049567332376">PlanetaDeCine</strong>
    <span class="message">MIEDOS 3D: ¡¡¡QUEDAN 5 DÍAS PARA EL ESTRENO!!!</span>
    <p class="likes">A 6 personas les gusta esto</p>
  </li>
  <!--  Elemento con un link -->
  <li id="127049567332376_140645992637945" class="link from-127049567332376">
    <img class="icon" src="http://static.ak.fbcdn.net/rsrc.php/z7NSY/hash/ajh5dbgz.gif"/>
    <img class="user-photo user-127049567332376" src="https://graph.facebook.com/127049567332376/picture"/>
    <strong class="author author-127049567332376">PlanetaDeCine</strong>
    <div class="extra">
      <h4 class="title facebook-link"><a href="http://www.facebook.com/notes/planetadecine/ganadores-concurso-killers-el-mas-votado/140645992637945">GANADORES CONCURSO "KILLERS: El más votado"</a></h4>
      <span class="description">Ya tenemos a los ganadores del fantástico Pack de Killers. Enhorabuena a los afortunados:&nbsp;xxxxx, xxxxx, xxxx</span>
    </div>
    <p class="likes">A 5 personas les gusta esto</p>
    <p class="comment-count">5 comentario/s</p>
    <ul class="comments">
      <li>
        <img class="user-photo user-127049567332376" src="https://graph.facebook.com/127049567332376/picture"/>
        <strong class="author author-127049567332376">PlanetaDeCine</strong>
        <span class="message">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.</span>
      </li>
      [...]
    </ul>
  </li>
  [...]
</ul>
</div>

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.

Temas Relacionados: jquery programacion

Autor:

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

  1. Alex dice:

    No consigo que funcione. Puedes poner un ejemplo funcionando?
    Gracias!!

  2. Norberto dice:

    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

  3. Ivano dice:

    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

  4. ikhuerta dice:

    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.

  5. David dice:

    no he podido hacer que funcione no se si podrias poner un ejemplo ya funcionando de antemano muchas gracias

  6. jmaldonadom dice:

    pues funciona estupendamente, gracias por el aporte!!!

  7. que tal, ya hice que funcionara correctamente, tiene unos errores... pero ya esta listo... jejejeje... les paso la web... http://www.zona502.com

  8. guadalupe dice:

    funciona de maravilla !!!, gracias por compartir

  9. jose luis dice:

    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.

  10. Federico dice:

    Es posible que no funcione en todas las páginas? Con una no me funciona y con otra me funciona el OwnFeed pero no el feed completo.

  11. Raul dice:

    Justo lo que estaba buscando. Lo probare a ver si funciona. Muchas gracias.

  12. Juanma dice:

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

    Muchas gracias

  13. SGG dice:

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

  14. angel dice:

    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

  15. izzuk dice:

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

  16. iñaki huerta dice:

    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.

  17. Luis dice:

    Gracias por este tutorial sencillo y efectivo. Un gran aporte!

  18. Luis dice:

    Por cierto acabas de ganarte un subscriptor :-)

  19. Jay dice:

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

  20. Natgeo dice:

    Gracias, no pude hacerlo funcionar, pero debe ser por eso que ahora pide identificación... opciones? saludos

  21. ikhuerta dice:

    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.

Anímate y deja tu comentario