Facebook Photo Gallery Plugin With jQuery - fbGallery

File Size: 350 KB
Views Total: 4619
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Facebook Photo Gallery Plugin With jQuery - fbGallery

fbGallery is a very small jQuery plugin for Facebook API that fetches public photos from any Facebook Page and displays them in a beautiful grid gallery with image lightbox integrated.

How to use it:

1. Load jQuery library and the fbGallery plugin's files into the html file.

<link rel="stylesheet" href="fbgallery.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="fbgallery.js"></script>

2. Set the Page ID, Access Token and Excluded Album ID as follows:

var appId = 'APP ID';
var pageId = "PAGE ID";
var excludedAlbums = ["Album ID 1","Album ID 2"];
var accessToken = 'Access Token';   

3. The JavaScript to initialize the plugin and generate the Facebook gallery inside a container element:

window.fbAsyncInit = function() {
  FB.init({
      appId      : appId,
      xfbml      : true,
      version    : 'v2.8'
  });
  FB.AppEvents.logPageView();
  $("#gallery-container").fbGallery({
      accessToken: accessToken,
      pageId: pageId,
      excludedAlbums: excludedAlbums,
  });
};

4. Don't forget to load the Facebook Javscript SDK:

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

This awesome jQuery plugin is developed by friendsocial. For more Advanced Usages, please check the demo page or visit the official website.