Display Photos From Your Facebook Album Using jQuery Plugin

Available Options

albumURL (required): full URL to a Facebook Album
limit: limit to the last X photos (default: 10)
CSS: CSS styles to apply to every image
imgSize: size of the image (default: medium)
- original
- huge
- x-large
- large
- medium
- small
- x-small

For more information on image sizes, check out the Facebook Graph Photos API.

How to Use?

$("#slideshow a").facebookAlbumPhotos({
 'albumURL': 'https://www.facebook.com/media/set/?set=a.451566814872131.116852.266818906680257',
 'limit': '6',
 'CSS': 'opacity:0;',
 'imgSize': 'huge'
});

Access Facebook Album with jQuery – Source Code

<html>
 <head></head>
 <body>
  <div id="slideshow"><a href="#"></a></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="fb-photos.js"></script>
  <script>
   $(document).ready(function(){
    $("#slideshow a").facebookAlbumPhotos({
     'albumURL': 'https://www.facebook.com/media/set/?set=a.451566814872131.116852.266818906680257',
     'limit': '6',
     'CSS': 'opacity:0;',
     'imgSize': 'huge'
    });
   });
  </script>
 </body>
</html>

(function($){
 $.fn.facebookAlbumPhotos = function(options) {
  var settings = $.extend(options);
  return this.each(function() {
   var albumID = settings.albumURL.replace(/.*(a\.)([0-9]+).*/,"$2");
   var photoLimit = settings.limit||10;
   var target = $(this);
   var imgStyle = settings.CSS||'';
   var imgSizes = {'original':1,'huge':2,'x-large':3,'large':4,'medium':5,'small':6,'x-small':7};
   var imgSize = imgSizes[settings.imgSize]||5;
   $.getJSON('https://graph.facebook.com/'+albumID+'/photos?callback=?',function(json,status,xhr){
    if(json.data.length<photoLimit) {
     photoLimit = json.data.length;
    }
    target.html(''); // empty the target element
    if (!target.is("a")) { // create an anchor tag linking to the album that holds all the images
     target.append("<a href='"+settings.albumURL+"'></a>");
     target = target.children(":first");
    }
    for(i=json.data.length-1;i>=json.data.length-photoLimit;i--) { // load all the images
     target.append("<img src='"+json.data[i].images[imgSize].source+"' alt='Slideshow image' style='"+imgStyle+"'/>");
    }
   });
  });
 };
})( jQuery );

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.