jQuery Plugin To Display Facebook Albums and Photos On Your Website

Facebook Album Browser is a jQuery plugin that retrieves albums and photos from any Facebook account and displays them as a photo gallery on your website. Click on the cover image to browser all the photos under the album. Click the first photo of an album to display all the photos in a lightbox-style popup window with next/prev navigation arrows.

See also:

• jQuery Plugin To Display Photos From Your Facebook Album - Facebook Photos

How to use it:

1. Load the jQuery Facebook Album Browser plugin after jQuery JavaScript library as shown below.

<link rel="stylesheet" href="src/jquery.fb.albumbrowser.css">
    
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/jquery.fb.albumbrowser.js"></script>

2. Create a container element to display the facebook album browser.

<div class="fb-album-container">
</div>

3. Call the plugin on the container element and specify which Facebook user's album you wish to use.

$(document).ready(function () {
  $(".fb-album-container").FacebookAlbumBrowser({
    account: "natgeo"
  });
});

4. Options and defaults available.

// Facebook account
account: "",

// Facebook access token
acessToken: "",

// Display account information
showAccountInfo: true,

// Display the number of images
showImageCount: true,

// Skip albums which have no images
skipEmptyAlbums: true,

// Show comments
showComments: true,

// Number of comments per page.
commentsLimit: 5,

// An array of albums to be skipped
skipAlbums: [],

// Show only specific album
includeAlbums: [],

// load single album
onlyAlbum: null,

// switching on/off lightbox
lightbox: true,

// Allows using of plugin as an image multipicker.
photosCheckbox: true,

// thumbnail size
thumbnailSize: 130,

// show image text in preview lightbox
showImageText:false,

// Add facebook like button for image on image lightbox preview
likeButton: true,

// Add facebook share button
shareButton: true,

// Enables sharing via AddThis buttons if AddThis pub-id is provided and shareButton is enabled.
addThis: null,

// images used for plugin UI
pluginImagesPath: "src/",

// page size options
albumsPageSize: 0,
albumsMoreButtonText: "more albums...",
photosPageSize: 0,
photosMoreButtonText: "more photos...",

// Events

// when album is selecetd in the browser.
albumSelected: null,

// when photo is selecetd in the browser.
photoSelected: null,

// when photo is selecetd in the browser. 
photoChecked: null,

// when photo is checked. 
photoUnchecked: null,

// An array of photos to be checked
checkedPhotos: []

Change logs:

2015-09-13

• Fixed animation issue with count label (now follows title smoothly, instead making jump)

2015-09-06

• Added support for v2.4 with backward compatibility to v2.2 OpenGraph API version
• Fixed Dates @usercomments are NULL on IPAD

2015-09-05

• Final Facebook OpenGraph v2.2 API version

2015-09-02

• Added thumbnail size option

2015-08-27

• Fixed issues with selecting Albums for Viewing

2015-08-26

• Fixed issues with loading single album
• Fixed lazy image loading when onlyAlbum option used

2015-08-25

• Attemppt to implementrestriction list for albumbs

2015-08-24

• Added option to show only specific albums

2015-08-23

• Added option pluginImagesPath for plugin images used for plugin UI

2015-08-09

• Added key handlers for next and previous button in lightbox preview

2015-08-04

• Added support for AddThis

2015-08-01

• Added access token for calling basic info details

2015-07-30

• Loading animation for loading albums and photos

2015-07-24

• Load more comments animations
• Handling nulls for pagination values

2015-07-23

• Added option for comments for photo
• Changed image text resizing

2015-07-21

• Adding comments (loads only first 25 comments for now for photo only)

2015-07-20

• Added overlay content scroll for the image lightbox

2015-07-19

• Added option to load single album

2015-05-23

• enabled facebook share button option as an addition to like button

2015-05-02

• Added paging for photos inside album

2015-04-26

• Added style for load more button

2015-04-25

• Adding paging option

2015-04-22

• Fixed like button alignment

2015-04-21

• Fixed next and previous arrows alignment fixed
• Added 30px for the preview image

2015-04-05

• Safari margin issue fix

2015-03-27

• Added link recognition in photo preview

2015-03-26

• Added option to show image text in preview lightbox
• No showing comment box if image comments is empty

2015-02-15

• Fixed for chrome.

2015-01-05

• Added condition for checking checkbox option when adding checkbox tag to DOM

2015-01-03

• All event arguments return same structure of id, url, thumb

2014-12-30

• Added back image when album opened

2014-11-18

• added option switching on/off lightbox

2014-11-15

• update styles.

---

This awesome jQuery plugin is developed by dejanstojanovic. For more Advanced Usages, please check the demo page or visit the official website.