In this recipe we'll learn how to create a plugin that retrieves images from Facebook.
For this exercise we're going to walk through the process of creating a Facebook plugin that will get all the public photos for the user or page provided in a Galleria option.
Before we get started, we need to create a new folder named facebook. Inside the folder, please create empty files with the names galleria.facebook.js and galleria.facebook-example.html.
Creating a plugin can include hooking into Galleria events, customizing options, or overriding Galleria methods. In the later stage, we need to make sure we still allow Galleria to function properly if the plugin isn't used, even though it might be loaded.
The following code with inline comments is used to create the
galleria.facebook.jsplugin:(function($) { var FACEBOOK_URL = 'https://graph.facebook.com'; /* Store the original load method so we can later call it if no facebook option is provided to Galleria. */ var load = Galleria.prototype.load; /* Here we override the load method with our own that will check for facebook option. */ Galleria.prototype.load = function() { /* check if facebook option is provided. Call the original load if not. */ if(typeof this._options.facebook !== 'string'){ load.apply(this, Galleria.utils.array(arguments)); return; } /* "this" in this context is the Galleria instance. We assign it to "galleria" so we can still have access to it within the context of the ajax callback */ var galleria = this, facebook = this._options.facebook; $.ajax({ /* Use the facebook graph API to get all the public photos for the provided facebook user or page */ url: FACEBOOK_URL + '/' + facebook + '/photos?fields=picture,source&limit=50', /* returned data is in JSON format */ dataType: 'json', success: function(data){ var images = []; for(var i=0; i<data.data.length; i++){ /* go through each image and add it to new images array in JSON format that Galleria expects */ var _image = data.data[i]; images.push({ image: _image.source, thumb: _image.picture }); } /* manually set the data for Galleria */ galleria._data = images; /* And trigger Galleria to load with the newly set data */ galleria.trigger(Galleria.DATA); } }); }; }(jQuery));Finally, we need to load the gallery using the plugin. For this example, we're using the "Marvel" Facebook page to retrieve images:
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="../../galleria-1.2.8.js"></script> <script src="galleria.facebook.js"></script> <script> $(document).ready(function(){ Galleria.loadTheme( '../../themes/classic/galleria.classic.min.js'); Galleria.run('#galleria', { facebook: 'Marvel' }); }); </script> </head> <body> <div id="galleria" style="height: 500px;"> </div> </body> </html>Here, all we're doing differently is including the
galleria.facebook.jsfile we just worked on and initializing the gallery with the facebook option. If everything worked properly, the result should be a nice gallery retrieving images from Facebook, as shown in the following screenshot:
The plugin overrides the original load behavior of Galleria, retaining the original load behavior to fall back on if the facebook plugin is not used. Then, we use the Facebook Graph API with AJAX to retrieve the images.