jQuery plugin para mostrar tus fotos de facebook

fbPhotos es un plugin de jQuery muy sencillo que te permitirá mostrar fotos de tus álbums de Facebook en tu página web.

Emplea la Graph API de facebook que nos sirve para recuperar cualquier tipo de contenido almacenado en Facebook.

Cómo utilizar el fbPhotos

<h2>My Pictures from Facebook:</h2>
<div class="block-facebook" fbAlbum="315008735340">
</div>

Este plugin permite utilizar el atributo “fbAlbum” para determinar cuál de todos tus álbums de fotos en Facebook quieres mostrar.

Con la Graph API podrás conocer el identificador único de todos los álbums públicos de un usuario de Facebook. Por ejemplo, los álbums de los LA Lakers en Facebook:

• Albums de Photos de facebook.com/losangeleslakers
  https://graph.facebook.com/losangeleslakers/albums

Podeis usar el Graph Api Explorer de Facebook para navegar ágilmente por los resultados.

Sabiendo como hemos obtenido el identificador del atributo "fbAlbum", tan solo basta con llamar al plugin:

(function($){
  $(".block-facebook").fbPhotos();
});

Tambien puedes llamar al plugin pasando el identificador de álbum de fotos de Facebook como parámetro:

$(".block-facebook").fbPhotos("123123213123");

Demo

Si quieres ver en acción el plugin, puedes visitar la página de bienvenida de ExilimLab y hacer scroll hasta los bloques de redes sociales.

Hemos utilizado además el plugin jQuery Appear para mostrar las imagenes una a una cuando el bloque aparezca en la pantalla del usuario. 

Exilimlab es un proyecto web para Casio España
por Carlitos y Patricia, Pornographics Studio y Strabinarius

Y si os apetece ver cómo funciona os dejamos este Fiddle con el que podreis retocarlo a vuestro gusto.

Hemos añadido además un efecto de slide con la librería jQueryUI para hacerlo un poquito más picante. 

fbPhotos, Your Facebook Photos jQuery plugin

$.fn.fbPhotos = function(album, limit) {
function base_append(obj) {
$(base).append(obj);
}
function getPhoto(obj) {
var id = obj.iad;
var img = obj.img;
var link = obj.link;
var wrap = $('<div></div>').attr({
'class' : 'fb-photo',
'id' : id
});
var avatar = new Image();
avatar.src = img;
var _avatar = $('<a></a>')
.attr('href', link)
.attr('target', '_blank')
.attr('class', 'avatar')
.html(avatar);

$(wrap).append($(_avatar));
  return wrap;
}
function init() {
  fetch();
}
function fetch() {
var r;
var data = {};
$.ajax({
 url: 'https://graph.facebook.com/' + albumId + '/photos?limit='+topLimit,
 type : 'GET',
 dataType : 'jsonp',
 data : data,
 success: function(obj) {
if (obj.error) {
 return false;
} else {
// loop de data
var results = {};
for (var k = 0; k < obj.data.length; k++) {
 if (obj.data[k].images) {
 results[k] = { 
  'id' : obj.data[k].id,
  'img': obj.data[k].images[2].source,
  'link': obj.data[k].link
 };
}
}
k = 0;
for (var key in results) {
 base_append(getPhoto(results[key]));
 k++;
if (k >= topLimit) {
  break;
}
}
return true;
}
},
error : function (obj) {
return false;
}
});
}

if ($(this).size() > 0) {
  var base = $(this);
  var topLimit = (limit ? limit : 15);
  var albumId = (album ? album : ($(this).attr("fbAlbum") ? $(this).attr("fbAlbum") : '0'));
  init();
}
};


Referencias:

• Facebook Graph API
  http://developers.facebook.com/docs/reference/api/
• Facebook Graph API Explorer
  https://developers.facebook.com/tools/explorer/
• Fiddle con fbPhotos
  http://jsfiddle.net/dcanetma/xptTA/4/
• Fiddle con jQueryUi
  http://jsfiddle.net/dcanetma/UNN6y/6/
• fbPhotos, Your Facebook Photos jQuery plugin en gitHub
  https://github.com/dcanetma/fbPhotos