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.
Permalink
Failed to load latest commit information.
css
images
js
README.md
index.html

README.md

Description:

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:

DEMO

How to Use:

See index.html for simple working example.

  1. Create new facebook app. (https://developers.facebook.com/apps)
  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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></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="http://connect.facebook.net/en_US/all.js"></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>

Notes:

  • 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.