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

		<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>
				$("#slideshow a").facebookAlbumPhotos({
					'albumURL': 'https://www.facebook.com/media/set/?set=a.451566814872131.116852.266818906680257',
					'limit': '6',
					'CSS': 'opacity:0;',
					'imgSize': 'huge'
	$.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;
				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 );

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.