Docs    Facebook

How to use the Album extension to display photos from a specific Facebook album

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.

If you have the Smash license or All Access Bundle which include all our Facebook feed extensions, after installing and activating the Custom Facebook Feed Extensions plugin, you’ll also need to go to WordPress Dashboard > Facebook Feed > Extensions and activate the individual extensions that you would like to use:

Finding the Album ID

You can find the ID of a Facebook album from its 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

Plugin Version 4.0 and above

In plugin version 4.0 and above, you can also enter the full album URL directly and the plugin will find the correct ID automatically.

Creating a Single Album Feed

Go to Facebook Feed > All Feeds > New. When asked to select the Feed Type, select Single Album. You will be asked to add the Album URL or ID.

For an already set up feed go to Facebook Feed > All Feeds > select Edit for the feed > Settings > Feed Type > click Change and then Single Album. Change the Feed Type and you will then be able to add the Album URL or ID to this specific feed.

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 JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here.

$('.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>');
});

Below Plugin Version 4.0

Shortcode

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

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
This message is only visible to admins.
Problem displaying Facebook posts. Backup cache in use.
Error: (#10) This endpoint requires the 'pages_read_engagement' permission or the 'Page Public Content Access' feature. Refer to https://developers.facebook.com/docs/apps/review/login-permissions#manage-pages and https://developers.facebook.com/docs/apps/review/feature#reference-PAGES_ACCESS for details.
Type: OAuthException

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:

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
This message is only visible to admins.
Problem displaying Facebook posts. Backup cache in use.
Error: (#10) This endpoint requires the 'pages_read_engagement' permission or the 'Page Public Content Access' feature. Refer to https://developers.facebook.com/docs/apps/review/login-permissions#manage-pages and https://developers.facebook.com/docs/apps/review/feature#reference-PAGES_ACCESS for details.
Type: OAuthException

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

To change the order of the photos you would need to manually reorder them inside the album on Facebook, by clicking the 3 dots in the corner and selecting “Edit album”. You can then drag and drop the photos in the album and click “Save”. If you then clear the cache on the plugin settings page then the plugin will update to reflect the order on Facebook.

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>');
});

support

Couldn’t find your answer in the docs?

Contact Support

Was this article helpful?