An easy to use jQuery widget to put Facebook pictures on your website.
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This JS script grabs all albums and displays them. When you click on an album it shows the photos in that album. If you click on a photo it brings up a lightbox. It is 100% jQuery. See notes at the bottom for more details.

Live Example:


How to Use:

See index.html for simple working example.

  1. Create new facebook app. (
  2. Make sure you include the lightbox js file and css file
  3. Make sure you include the facebook JS SDK file
  4. Make sure you include the Facebook_Photo_Gallery_Widget JS file
  5. Include a div or any other html tag with the id "fb_gallery"
  6. Set custom attribute app_id=""
  7. Set custom attribute page_id=""

JavaScript Files to be included (Steps 2 - 4):

<!-- Load jQuery -->
<script type="text/javascript" src=""></script>

<!-- Load LightBox - Used by Facebook Photo Gallery Widget -->
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<!-- Load Facebook JS SDK - Used by Facebook Photo Gallery Widget -->
<script src=""></script>

<!-- Load Facebook Photo Gallery Widget -->
<script src="/js/fb_gallery.js"></script>

Include a Div where you want the gallery (Steps 5 - 7):

<div id="fb_gallery" app_id="" page_id=""></div>


  • You get an app_id after you create a new app
  • You can find the page id by visiting that page in your browser.
  • There is no CSS applied currently other than what the lightbox has applied.
  • You don't have to worry about include facebooks
    . But if you have already included, just remove it from the fb_gallery.js file.