FBalbum

Why I made this plugin

One day, I tried to find a simple solution to use images from a facebook photo album for a website I was working on.  I couldn’t find anything that was free wasn’t dependent on a CMS like WordPress or Joomla.  I couldn’t find it, so I made it. I posted my code to the forums I was searching on where other people like myself were looking for a solution, and it caught on! Now its apparently being used across the world. Very exciting.

*note: this code does not work for personal “profile” page albums – only public fan-pages, business pages, etc…

The Raw jquery plugin code: fbAlbum2.js

Some quick demos I put together: I still haven’t added any styles or anything, but it should be good to get ya started. I’ll be improving on these Demos soon.

Basic Usage:

$('#FBalbum').fbAlbum({
  'albumID':'10150302289698306'
});

The Default Settings:

{
  'albumID' : '10150302289698306',
  'limit' : 100, // limit on number of linked photos in album
  'limitThumbs' : false, // set to number to limit number of thumbnails displayed
  'ulClass' : 'album',
  'rel' : 'group',
  'callback' : '',
  'title' : true,
  'thumbSize' : 0, // use sizes 1 - 9 to change from default size
  'fullSize' : 0 // use sizes 1 - 9 to change from default size
};

Live Demos & Examples

fbAlbum2 Demo page (I’ll be improving this very soon, feel free to make requests)

Old fbAlbum(1.x) Examples (will merge with fbAlbum2 shortly)

194 thoughts on “FBalbum

  1. Mitch

    Hi Zach,

    I recently started having issues with the thumbSize variable. I had it defaulting to 4 because my thumbnails were pretty big, and I wanted some better quality images. That was working fine for the better part of a year…until now. After I reset the default to 0 the script started working again. Do you know if Facebook changed something, like not offering all the sizes for every image?

    Thanks.

    Reply
  2. Rehan Arshad

    Hey, Zach!

    Hope you’re doing good. I’ve lately noticed that images with captions no longer works. I thought i messed-up the code but I didn’t. I came here to check you demo2 and it’s also not working.

    Has facebook stopped developers from pulling the captions?

    Reply
    1. Zach Post author

      Good Catch! It’s very possible that Facebook changed something, but I’ll need to dig around a bit to be sure. No time to do so today, but hopefully by the end of the weekend I’ll have an answer

      Reply
  3. Chameleon1333

    I seem to be having an issue all of a sudden. images are not showing and i’m getting this error in the js: Uncaught TypeError: Cannot read property ‘source’ of undefined

    Reply
    1. Chameleon1333

      Ok so the code is no longer showing that error but now all the places that i am using it shows up blank. the images aren’t getting pulled in at all. I’ve made to changes to the code. They were just working fine one minute and the next they were not. ????help please.

      Reply
      1. elvis presley

        It’s the “thumbSize” parameter that is causing the issue.
        That’s also why Demo 2 isn’t working on this site.
        Just remove that line or comment it out and it’s working fine again.

        Reply
        1. Ruben

          Well actually setting thumbSize to 0 worked, but since I was relying on it to control, well, thumbnail size, how would I modify the size now?

          Reply
  4. Chameleon1333

    Great script. Need some help though. I’ve noticed that this script displays the images starting with the oldest first and there seems to be no way to have them order by newest first. this also causes an issue with the limit function. one one have i want to only list the most recent 5 images. Any help on this would be greatly appreciated.

    Reply
    1. Zach Post author

      Interesting. Honestly I’ve never even looked at the order. Not yet tested, but I think you should be able to fix this with a small edit to the fbAlbum.js source code.

      Where the code says `$.each(json.data, function ()`, add in `.reverse()` like so:

      $.each(json.data.reverse(), function ()

      That should reverse the photos, putting them into the correct order. Please let me know if this works.

      Reply
      1. Chameleon1333

        That works good for reversing the order the images are listed out. However if you limit the amount of images it still cuts off the newer images.

        Reply
        1. Zach Post author

          Hmmm… ok, try this:
          $.each(json.data.slice(-5).reverse(), function ()

          That should take the last 5 elements of the original array, and then reverse them.

          Reply
  5. Dan

    I’m looking to find a way of pulling the title of the album automatically to the page and popping it into a div/h2 etc. You can see here http://www.auction-house.co.nz/auctions/ that I’ve added the album title (or date) manually, but the facility to do this in an automated manner would make my life easier as it’s then just a case of adding the album name! Thanks!

    Reply
    1. Zach Post author

      Hey Dan, this will be possible once (if/when) I finish my current code updates. Not really sure when this is happening though, sorry.

      Reply
  6. Scott

    Hey. Great script. Just a suggestion for the next update. It would be cool to embed an entire facebook photo stream into a website rather than an individual album.

    Keep up the good work.

    Reply
    1. Zach Post author

      Thanks Scott! I agree, that is a good idea. I’ll try to do that in a future update – though its a somewhat major code-base change.

      Reply
  7. Rafael Garau

    Hello… very thanks for your script. I need embebed a facebook comment in each photo. How to make?

    Sorry, i’m not speak english… ja ja ja… i’m argentinian

    Reply
  8. Joshua Richards

    Plugin works great, but for some reason, with the following id: 436543376464896

    I get the following error in the console:
    Uncaught TypeError: Cannot read property ‘source’ of undefined jquery.fbAlbum2.js?ver=2.0:30

    It works with EVERY other id, except that one. Any ideas?

    Thank you

    Reply
    1. Mark Bauer

      hi there! i have the same problem with some albums.
      Uncaught TypeError: Cannot read property ‘source’ of undefined

      with this code my album will show up. you need to scroll down a little bit (2nd code frame on page):
      https://gist.github.com/alexdunae/1239554

      hope you can use this and fix it :)
      the combination with fancybox is perfect for me! thanks a lot!!

      Reply
  9. Laura Levin

    Hey-

    I love this! Thank you so much for creating this plugin.

    Questions: I saw that you provided the modification for the code to set the image from facebook through the css background-image so one can style it in a square manner.

    Makes me wonder if one could integrate that with the fancybox version as well? I am very new to javascript, so sorry to bother you.

    Laura

    Reply
    1. Zach Post author

      Thanks for the kind words Laura. It certainly is possible, and I’d generally be happy to help, but I’ve been totally swamped with work lately.

      If this is not a time-sensitive project, please feel free to harass me via Email (zach@lysobey.com) and I’m sure I’ll get a chance to help eventually. If you wanted to take a shot at making some updates, and send me an example link, I’d defintely be able to take a couple minutes at some point and help get you pointed in the right direction.

      Reply
  10. Strae

    For all those asking to make square format, just use a link with background image.
    Find this part of code (around line 42):

    $a = $('').attr({
    'class': 'imageLink',
    'rel': settings.rel,
    'title': title,
    'href': fullImg
    }),

    and change to:


    $a = $('').attr({
    'class': 'imageLink', //want to add custom class? here is the place.
    'rel': settings.rel,
    'title': title,
    'href': fullImg,
    'style': 'background-image: url(' + thumbImg + ')'
    }),

    And replace this (about line 52):
    $ul.append($li.append($a.append($img, $caption))).addClass(settings.ulClass);

    with:
    $ul.append($li.append($a.append($caption))).addClass(settings.ulClass);

    Reply
  11. Ray

    Hi I wondered if there was a tweak to make the script display images in 4 or 5 columns instead of 3 – Can you help? Thanks

    Reply
  12. hannes

    ist it possible to shown only one image (e.g. given with a number)?
    i dont wont to show the3. 5. or 6. , i want to show an image with a given number

    txs

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>