UPDATE: June 25, 2015
A new version of the plugin is available on our GitHub page.
UPDATE: May 3, 2013
Finally! I pushed the plugin to our GitHub account so it has a permanent, source-controlled home. The latest and greatest Galleria Facebook Plugin can always be found here:
In this release:
- Published initial version to GitHub
- Fixed &limit= to &photos.limit= in querystring arguments (thanks @RoelDekker)
(Note: I’m going to soon remove the old versions that were uploaded as a zip to this post to prevent people from downloading the older, out of date versions.)
UPDATE: April 29, 2013
- Worked around new Facebook security restriction by using long form graph API
- Upgraded plugin for Galleria 1.2.9
- Latest plugin: Galleria Facebook Plugin 2013-04-29
UPDATE: December 12, 2012
- Fixed Facebook api change to use graph.facebook.com
- Fixed & bug in photo request url pattern
- Latest plugin: Galleria Facebook Plugin 2012-12-12
UPDATE: August 29, 2012
- Fixed bug that caused missing thumbnails on Galleria versions 1.2.7+
- Restructured portions of the plugin to be based on latest Flickr plugin in Galleria 1.2.8
- Updated post below to include 1.2.8 documented way of loading themes (slightly different than the documented approach in 1.2.6) ##Latest plugin: galleria.facebook.zip
Facebook provides an easy way for individuals to display photos from their profile using Facebook’s Photo Badge. You download a small snippet of HTML, embed it in your website or blog, and et voilà.
However, there are a few drawbacks to the tool, most notably:
- The Facebook Photo Badge does not allow much customization. If you’d like control over how your photos are displayed on your website, you will need another solution.
- Photo Badges are currently limited to photos from an individual’s profile and do not support company Pages. If you want to display Facebook Page albums and photos on your site, read on.
Galleria is a popular, open source photo gallery whose “aim is to simplify the process of creating professional image galleries for the web and mobile devices.” Best of all, it’s free and comes with an attractive theme for displaying your photo albums. You can purchase additional themes, though I’ve found the basic, free theme to be attractive and sufficient for most purposes.
Out of the box, Galleria does not currently support loading Facebook albums, but does have excellent support for Flickr and Picassa. I adapted their Flickr plugin to work with Facebook. You can see an example of the Galleria Facebook Plugin in action on The Gaga Center site.
Galleria Facebook Plugin How-To
Instructions on how to display a Facebook photo album on your website using Galleria.
You will first need to find the identifier for the Facebook album that you want to display. I haven’t yet found an easy way to do this other than looking in the URL when you’re viewing the album at Facebook. Navigate to the album in question, and copy down the album id (for your own album, of course): (http://www.facebook.com/media/set/?set=a.291489504249941.68160.249094895156069&type=3)
Download and install Galleria: (http://galleria.io/download/)
Download and install my Galleria Facebook Plugin: Get a copy of the plugin: Galleria Facebook Plugin. The Galleria library has a directory called plugins/. Unzip galleria.facebook.zip and place the facebook/ folder directly in the plugins/ directory so the file layout looks like this:
Load jQuery, Galleria, the basic theme, and the Galleria Facebook Plugin in your HTML page (this assumes you’ve put the basic Galleria files in a js/ directory):
Add the following snippet of HTML to your page, setting your album_id (gathered in step 1), height, and width:
You can explore more Galleria display options and fun tweaks in the Galleria Documentation.
See the Facebook Galleria Plugin in action on The Gaga Center website.
Finally, do consider purchasing additional themes as the developer generously donates this photo gallery to the world and I’m sure would appreciate it! (we have no connection to them) The gallery has great support for mobile and tablet, including native swipe gestures.