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
account-
then your account name from Facebook. We will be using Andrews University.
Enter Account name
The finished class looks like
account-andrewsuniversity
Add third class includeAlbum-
Press space and then enter
includeAlbum-
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:
includeAlbum-478053909585
Almost done!
Enter imageCount-
Enter space and then the first part of the class
imageCount-
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:
imageCount-11
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
gutterSize-
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
gutterWidth-10
Add showPortrait
Enter space and then
showPortrait
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!
Created with StepShot Guides
0 Comments