Add a Facebook Gallery

You can insert a gallery from a Facebook account on your page by inserting an image and giving it some special properties. Follow this quick guide to learn how.


Click Picture Icon



Find a Picture

Find a Picture in your directory. Double-click it, to select it.


Set the Height

Set the height to your desired row height.


I've set it to 200

This means that my rows will be 200 px tall.


Click the Advanced Tab



Select the Stylesheet Classes input

We will enter some special classes here to tell the page that we want to show a Facebook album here, which one, and how many pictures.


Add fb-album-container

This tells the system you want a gallery to replace this image.


Enter account-

Now enter space and then


 then your account name from Facebook. We will be using Andrews University.


Enter Account name

The finished class looks like 



Add third class includeAlbum-

Press space and then enter 


We will follow this with the id number of our facebook album that we want to pull pictures from.


Add your album id

The id for our album was 478053909585 so our complete class looks like:


Almost done!


Enter imageCount-

Enter space and then the first part of the class


We will follow it with the number of images we want to pull into our gallery. 


Add Number of Photos

We have decided to have 11 photos in our gallery. The completed class looks like this:


I want twelve spots in my gallery, but I know that I have one portrait image that I want to take up two spots. It is good to choose numbers divisible by 4 and 3, if you want your gallery to be squared off at the bottom. Try different amounts to get the effect you want.


Add gutterSize-

Add a space and then 


Here we enter how wide we want the gaps between the pictures. So we will just follow this with a number.


Set the gutter width

Here we set the gutter width to 10 



Add showPortrait

Enter space and then


If you have portrait images in your gallery and you want them to take up two spaces above each other (to show the image better, perhaps prevent chopping off a head), you can set this class. If you don't use it, all your photos will be the same size.

It's optional.


Click OK

One last thing. After you click Ok, Click source. Scroll down to the bottom and past the following code:

<script type="text/javascript" src="/code/js/fb-gallery/src/jquery.fb.albumbrowser.js"></script>


That's it. We are ready to go test it out.


Save your page



Preview your handiwork



There it is!



Click an image

To see the lightbox preview of an image, which shows the whole image, click on the image.


lightBox View

You can navigate between the images using the buttons on the right and left side of your screen.


Save and Publish!

Congratulations! You have a working Facebook gallery. Save and Publish your page to show it to the world!

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk