Facebook-Album-Browser

Reponsive jQuery plugin for browsing public albums of a Facebook account. Plugin is suitable for both desktop and mobile websites.

What can I do with it

The main purpose of this plugin is to enable to embed and customize phot albums in your website without being limited with Facebook styling. It also allows you to use it as picker as it raises events for clicked album/photo.

How to add to a page

Add a reference to jQuery library, this plugin library and this plugin CSS stylesheet

<link rel="stylesheet" type="text/css" href="../src/jquery.fb.albumbrowser.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="../src/jquery.fb.albumbrowser.js"></script>

Simply add a container (div or any other element) and apply the plugin to it.

<div class="fb-album-container"></div>  <script type="text/javascript">     $(document).ready(function () {         $(".fb-album-container").FacebookAlbumBrowser({             account: "natgeo"         });     }); </script>

What are options for plugin

The following are options for the plugin which are used to congigure the plugin instance:

Events

The following are events raised by plugin:

Every event functin returns an object which holds three properties:

• id - image id in Facebook database
• url - large image url
• thumb - thumbnail image url

Demo

Test document test.html is contained in the soolution. You can download it for testing or use the following code:

<div class="fb-album-container"></div>  <script type="text/javascript">  $(document).ready(function() {       $(".fb-album-container").FacebookAlbumBrowser({         account: "natgeo",         skipAlbums: ["Profile Pictures", "Timeline Photos"],         showAccountInfo: true,         showImageCount: true,         lightbox: true,         photosCheckbox: true,         photoChecked: function(photo) {           //Handles photo checkbox checked         },         photoUnchecked: function(photo) {           //Handles photo checkbox unchecked         },         albumSelected: function(photo) {           //Handles album thumbnail clicked event         },         photoSelected: function(photo) {           //Handles photo thumbnail click event         }       });     }); </script>

To see the plugin live in action checkout demo on CodePen

• Loading all albums from the Facebook page
• Change thumbnail size
• Skip specific albums from browsing
• Load single album photos
• Photo picker sample
• Load only specific photo albums
• Multiple plugin instances on page

AddThis support

Starting from version 1.3.1 plugin supports sharing via AddThis sharing. It allows you to share facebook URL to an image direcly from the image lightbox preview in a plugin. All that needs to be done is to enable sharing button and provide AddThis pub-id to plugin in initialization settings and you are set to share Facebook photo URL direcly on your website.

<div class="fb-album-container"></div>  <script type="text/javascript">  $(document).ready(function() {       $(".fb-album-container").FacebookAlbumBrowser({         account: "natgeo",         showAccountInfo: true,         lightbox: true, 	    shareButton: true,         addThis:"ra-xxxxxxxxxxxxxxxx"       });     }); </script>

Using it as a photo-picker

This plugin has buit in support for multiple picker, wich allows you to browse through albums and photos and pick them. The plugin will store all picked photos in an object array and make them available.

You can either access picked images on your custom page event or you can hook to plugin's photoChecked and photoUnchecked event.

  <div class="fb-album-container">   </div>   <script type="text/javascript">         $(document).ready(function () {           $(".fb-album-container").FacebookAlbumBrowser({                 account: "natgeo",                 accessToken: "775908159169504|cYEIsh0rs25OQQC8Ex2hXyCOut4",                 skipAlbums: ["Profile Pictures", "Timeline Photos"],                 showAccountInfo: true,                 showImageCount: true,                 showImageText: true,                 lightbox: true,                 photosCheckbox: true,                 photoChecked: function(photo){                     console.log("PHOTO CHECKED: " + photo.id + " - " + photo.url + " - " + photo.thumb);                     console.log("CHECKED PHOTOS COUNT: " + this.checkedPhotos.length);                 },                 photoUnchecked: function (photo) {                     console.log("PHOTO UNCHECKED: " + photo.id + " - " + photo.url + " - " + photo.thumb);                     console.log("CHECKED PHOTOS COUNT: " + this.checkedPhotos.length);                 },                 albumSelected: function (photo) {                     console.log("ALBUM CLICK: " + photo.id + " - " + photo.url + " - " + photo.thumb);                 },                 photoSelected: function (photo) {                     console.log("PHOTO CLICK: " + photo.id + " - " + photo.url + " - " + photo.thumb);                 }             });         });   </script>

Acquiring the right access token

Follow the steps to get the access token to use the plugin

1. Login to developers.facebook.com with your Facebook developer account
2. Create an App with WWW platform selected
3. Add url of the website where you are about to use this plugin and save the changes
4. In a new browser tab visit https://graph.facebook.com/oauth/access_token?client_id={app-id}&client_secret={app-secret}&grant_type=client_credentials (values for app-id and app-secret parameters take from the app settings page)
5. After loading the url above you will get the access token in a response. Sopy the access_token value to plugin settings javascript code you use to initialize the plugin.
6. Enjoy using the plugin :)

Note: In order to make this plugin work with Facebook account photos you need to allow user_photos permission in your Facebook App that is used to authenticate and add permissions. Please read the article on Facebook https://developers.facebook.com/docs/apps/review.

For testing purposes you can use Facebook App test users. More about using test users you can find at https://developers.facebook.com/docs/apps/test-users/.

A word of author

So far I developed and mainatined this plugin by myself, so sometime I might not have time to respond to your requests and reported bugs. Feel free to participate. Every line of code, every comment or idea would mean a lot to maintain this free plugin project alive and up to date.

It would mean a lot to me to know where it is used, to see how it works and maybe give me an idea what can be improved in order to better fit in to various websites.

I created an issue where you can add all your website URL/URLs where you are using this webiste.

Thank you all in advance.