Facebook album browser

Fb album browser is one of those plugins that let us use power of 3rd party integration with minimal programming knowledge. It is written using jQuery by Dejan Stojanovic. It makes it possible for a user to integrate their Facebook photos and albums within the website using the plugin. Fb album browser is very flexible, and there is an option to adjust settings to your specific needs. Most of those settings are for appearance and presentation of data fetched from Facebook. The plugin has callback functions which can be very useful in data manipulation. To name a few, there is a callback that activates when an image is selected and it provides all the information needed to download that specific image. There is a callback for when an album is chosen, and you can use it for downloading all images from that photo album.
One of the great features of Drupal 8 (well, Drupal in general) is that you can easily extend it’s core and code with 3rd party libraries. Because of that, Fb album browser and Drupal are a great match. In this tutorial, you will learn how to integrate these two libraries.

After you downloaded the Fb album browser (https://github.com/dejanstojanovic/Facebook-Album-Browser), in the archive you'll find the main files and some example files. Everything that is needed for this plugin to work is in the src folder. There you can find the main js file, main css file and few image files that are used for the plugin to look modern.
It’s a good idea to create a separate javascript config file that will store configuration data about the plugin. If you later update the core of the plugin, there won't be a need to setup the configuration once more because it will be in a safe place. So, step zero is to create fb-album-browser-config.js. In that file, insert the following code:

  1. FB.init({
  2.     appId      : 'Your app facebook id',
  3.     cookie     : true,
  4.     xfbml      : true,
  5.     version    : 'API version'
  6.   });
  8.   FB.AppEvents.logPageView();
  10.   FB.getLoginStatus(function(res) {
  11.     if( res.status == "connected" ) {
  12.       var user_id = res.authResponse.userID,
  13.           user_access_token = res.authResponse.accessToken;                  
  14.           user.id = user_id;
  15.       // Parameter for settings of the Facebook photo brower plugin.  
  16.       jQuery(".fb-album-container").FacebookAlbumBrowser({
  17.         // Parameter for settings of the Facebook photo brower plugin.
  18.       });      
  19.     }
  20.   });

The first part (FB.init) initializes the Facebook Javascript SDK (you can find out more about that here: https://developers.facebook.com/docs/javascript). After that, FB.getLoginStatus checks whether the user is logged in with their Facebook credentials and if that is true, the Fb album browser will be initialized. Fb-album-container class in the jQuery selector determents the element to which the instance would be attached.

The first step is to add the plugin’s javascript and css file into the theme's libraries yaml file. At the end of the file, add following code (because this is a yaml file, be careful with blank spaces):

  1. fb-album-browser:
  2.   css:
  3.     theme:
  4.       stylesheets/jquery.fb.albumbrowser.css: {}
  5.   js:
  6.     js/jquery.fb.albumbrowser.js: {}
  7.     js/fb-album-browser-config.js: {}

Order of js files in this case is important, so the config file needs to be called after fb.album.browser. So far, we have created the configuration file for the plugin, added all files need to .yaml file. Next step is to call the library theme on the website's gallery page. This is done with adding this code ({{ attach_library('THEMENAME/fb-album-browser') }}) at, preferably, the end of a twig template file. The following code shows our gallery twig template with added call to the theme in the last row:

  1. <body>
  2. <!- - html code of the template page - ->
  3. {{ attach_library('THEMENAME/fb-album-browser') }}
  4. </body>


Slobodan Prodanović

back to top