Home > Plugins and Tools

fbPhotoStream

Get fbPhotoStream View on Github

fbPhotoStream is free to use under the MIT/GPL license for any application. Donations are greatly appreciated, but not required.

Buy me a beer!

fbPhotoStream is a simple, light-weight jQuery plugin that allows you to display Facebook photos from a public album. Just set the album id, and the rest is optional.

It has a a few design options like grid, collage, or circle mode, but you can customize the look to match your needs by adding your own CSS. You can pass several formatting options including width, height, etc., as well as setting whether you want to show captions or link back to Facebook.

All you need to do is include the plugin file into your webpage, create a target wrapper element, and pass that element's id into the method.

Demo

Grid example (default)

Collage example.

Circle example.

Raw data example.

Required Files

  1. jQuery Core JavaScript Library
  2. fb-photo-stream.min.js

Include the above files into your webpage and invoke the fbPhotoStream() method.

Remember, you can add your own CSS to style the results to match your needs in "raw" display mode.

How to Use

  1. First, make sure that your Facebook photo album is public. You can change the privacy settings by following this documentation.
  2. Next, you need to get the album id. You can get this by clicking on the album in Facebook, then from the URL copy the number that is between the "photos/a." and the next "." (highlighted in blue in the image below).
  3. Create an empty wrapper element, in this case a <div>, and assign a unique id or class to it. Then pass that id into the fbPhotoStream() method along with the album id.
<div id="fbPhotoStream"></div>
<script type="text/javascript">
$(document).ready(function(){
    $('#fbPhotoStream').fbPhotoStream();
});
</script>

Configuration

fbPhotoStream is pretty much ready to go, and the only necessary parameter to get started is the album id. There are several additional options that you can use to match your needs. Pass these options as an object into the fbPhotoStream() method like this:

$('#fbPhotoStream').fbPhotoStream({
    album:'10152554461003426',
    count:5,
    format:'ul'
});

Options

Property Type Default Description
album string No default, must be set as option. The id of the Facebook photo album. See how to get that here.
display string grid Preset display formats. Options include 'grid','collage', or 'circle'.
displayWidth string 200px Width of the images used in one of the display presets.
displayHeight string 200px Height of the images used in one of the display presets.
count integer 25 (maximum allowed by Facebook). The number of photos to display. Facebook puts a limit of 25.
linked boolean true Whether or not the image links back to itself in Facebook.
theClass string No default. Allows for classes to be assigned to the elements created. If adding multiple, separate by spaces like such:
theClass:'row feature pull-left'.
format (used only with display:'raw') string ul The format in which the results are displayed. Options are 'ul','div', or 'none'. Using 'none' outputs the image tag in an anchor, or just the image tag by itself (depending on whether 'linked' is set to false).
caption (used only with display:'raw') boolean false Whether to include the image caption or not.

License

fbPhotoStream is free to use under the MIT/GPL license for any application. Donations are greatly appreciated, but not required.

Buy me a beer!

Author

This plugin was written by Gerardo Larios.