Album Extension

Overview

The Album extension allows you to embed photos from specific Facebook albums into your site, displayed in a single column or grid format.

Below is an example of using the Album extension to display photos from an album.

facebook-album-extension

Shortcode used above:

[custom-facebook-feed album=440612488444]

See the How to use tab above for directions on how to use the extension.

How to use

Installation

Extensions are installed just like any other WordPress plugin. You can follow the same process used when uploading and installing the Custom Facebook Feed Pro plugin.

Finding the Album ID

You can find the ID of a Facebook album from it’s URL. It is the set of numbers between the first two periods in the URL, as highlighted below:

https://www.facebook.com/media/set/?set=a.440612488444.242105.15087023444

Shortcode

The Album extension allows you to specify the ID of a Facebook album directly in the shortcode:

[custom-facebook-feed album=440612488444]

You can also set the number of columns in the photo grid by using the ‘albumcols’ shortcode option, and the number of photos to display using the ‘num’ option:

[custom-facebook-feed album=440612488444 albumcols=4 num=100]

Shortcode Options

Name Attribute Options Description Example
Album ID album Any album ID The ID of the Facebook album you want to display album=440612488444
Number of columns albumcols 1-4 The number of columns in the photo grid albumcols=2
Number of photos num Any number The number of photos to display num=50

Show newest photos first

By default, Facebook adds the newest photos to the end of the album, and so this is what the plugin does too. To change this, you can change the photo ordering within your album on Facebook:

  1. Go to your album on Facebook and click on the 3 dots in the top right corner and select “Change ordering” (screenshot).
  2. Select “Show most recently uploaded photos at top” (screenshot)
  3. Clear the plugin’s cache by going to the main “Facebook Feed” Settings page in WordPress and clicking “Save Changes & Clear Cache“.

Display captions on hover

When clicking on a photo the caption will be displayed in the pop-up lightbox, but you can also choose to display the caption when the photo is hovered/rolled over without opening the lightbox. Just add the following to the plugin’s Custom JavaScript section, which is under the Misc tab on the plugin’s Customize page:

$('.cff-album-cover').each(function(){
  $self = $(this);
  $self.find('.cff-photo-hover').html('<p style="color: #fff; width: 90%; padding: 5%;">' + $self.find('.cff-lightbox-link').attr('data-title') + '</p>
'); });