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)

198 thoughts on “FBalbum

  1. LWC

    Would it be possible for you to make another code that only embeds a specific image? Sometimes it’s needed to only embed a certain photo. I’d like to retrieve its Graph properties and use them to build a linkable image.

    Thanks!

    P.S.
    Still hoping you’d update demo.

    Reply
    1. Zach Post author

      there is a way, but its not something likely to be included in my plugin anytime soon (due to lack of free time). If you’re handy with code, you can probably figure it out. My code grabs JSON data from URLS like: graph.facebook.com/{YOUR-ALBUM-ID}/photos, which, if memory serves me, also contains the comments.

      Reply
  2. Scarab

    Hi, this is nothing short of fantastic, thank you for the effort.

    I’m trying to integrate FB photo’s with my VBAdvanced site, a VBulletin portal add-on. I created the page, added the js to the header, checked it via view source, yet nothing appeared.

    So I checked our FB Group page, the photo’s are set to public, and I have the proper photo album ID. But when I’m logged out of FB and try to hit that same page directly, it’s blocked. Are there any other things that I might me missing here. It’s got to be something simple that I haven’t thought of. Did FB do anything different in terms of privacy settings? The album is listed as “Public”. It’s not a “personal” page, it’s a club group page.

    Thanks in advance for any insights and guidance.

    Reply
  3. PD

    Thanks for the great script! I’m working on using this to display multiple Facebook albums on a single output page, however each Fancybox album is displaying ALL the photos from the albums included on the output page. How do I limit each Fancybox album to only that Facebook album’s photos?

    Example:
    This below link displays photos from 2 different albums, however clicking on either one, displays photos from BOTH albums (not just the one clicked.)

    http://b2a.com/test/facebook/albums/

    Thanks!

    Reply
    1. Zach Post author

      Woah PD, you really went to town with this, hacking my plugin (which is awesome)!

      So, the quick fix is to use the 'rel' option in the settings object passed to the fbAlbum(). Fancybox groups collections of photos via this attribute. My plugin defaults it to “group”, so you can, for the 2nd album just pass 'rel':'group2', or some such thing

      Reply
  4. Justin Kirby

    Is it too soon to tell you that I love you?! #NoHomo

    I have been looking for something like this for WEEKS!

    THANKS!

    Reply
    1. Justin Kirby

      Ok. I’ve been trying for several hours now to get this to work. Well, it DOES work, for the most part.
      The page is being populated with the right images, and the links DO work.
      What I’d like to do is use prettyPhoto for the opening of the images. It’s a script I already have plugged in site-wide.
      I think I’m doing it wrong…
      http://www.pipepuffer.com/photos.html
      The question is: What did I mess up?

      Reply
  5. Dan

    Hi Zach

    Finding no words to thank you this project has saved my life otherwise i had to upload 132 albums to the blog i am working with really great.

    I installed the thing and added the code to the post where i want the album to appear but encountered two minor issues i would so thankful if you please help me out.

    1. The title is having no width so if if the picture is having longer title or caption it will just open in one straight line, please check the URL http://www.oberliner.de/2011/09/stralau-wie-eine-eigene-welt.html

    2. On the same page you can see that the text after the album is starting rite after the last picture which looks so weird is there a way that it should start after the gallery, for example from next paragraph. I am sorry if i am asking something basic but i am not much into code.

    Thanks alot dear, looking forward to your answer.

    Reply
    1. Zach Post author

      Not yet. The Major feature on my todo list is more options for this sort of thing. I was thinking that there should be an pageId(s) option, and includeAlbumId(s) option, and an excludeAlbumID(s) option.

      This will likely be the 2.0 release if/when it happens.

      Reply
  6. Shaun

    Love the script! So far it’s been working great.

    I noticed when you hover over an image it sets the image description as an alt tag for the photo. Any chances you know a quick bit of code that would also assign the alt tag as a description/title of the image when it loads in Fancybox?

    Thanks!
    Shaun

    Reply
    1. Zach Post author

      Hey Shaun, I think you contacted me via email, and we got you sorted out – but for everyone else’s benefit – this is actually now a feature of the script, and should just work out of the box. HOWEVER, all of my demos are currently using the outdated version of my script.

      At the bottom of my post, you can find this link: http://zach.lysobey.com/files/fbAlbum/jquery.fbAlbum.1.02.js which is the most recent version of my script – and you can substitute this into any of my code examples.

      Reply
    1. Zach Post author

      It should be pretty straight forward – I was actually considering this as my 3rd demo. If I have some spare time this week I’ll try to put something together.

      Reply
  7. sekazone

    Hey Zach! Is there any possibility that your script to merge more than one album. Technically to add more album ids and display them like there is only one album? Thanks waiting for your reply!

    *Sorry for my last message and it’s bad typing…i has in a huury 😀

    Reply
  8. Diego

    Hey man, i tested your script and its really great, thank you very much

    im still trying to make some hack over it to create a layer and import the coments

    very good work

    Reply
  9. Jarek

    You should probably escape title – it can contain or ” in it.
    now line 42 is:

    + title

    i belive it should be:

    + title.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''')

    Reply
  10. Luiz Felipe

    Thanks, Zach!

    You created a very useful code!

    I’m looking for a slideshow to display my album.

    Any idea?

    Reply
  11. KONEY

    Hi,

    the script works nicely on my pages with your IDs but fails on mine ones, even if I correctly set the albums to “PRIVATE” all I get is an unpopulated . Problem with tags, maybe? what other kind credentials shall I provide?

    thanx a lot, the script is beautiful and useful!

    Reply
    1. Zach Post author

      hmmmm, do you mean “PUBLIC”? The script only works for public non-person(profile) facebook pages. If you email me a link to your FB album I’d be happy to take a look

      Reply
  12. Nina

    I have no idea why it doesn´t work for me. I´ll get the notice
    Be sure all XML-elements are closed in the right way. XML-error: The reference to entity “callback” must end with the ‘;’ delimiter.
    Error 500

    Reply
    1. freddy

      hey zach….like scotty said this would be a great feature! i would really need this feature…

      do you think you will get a hand on?

      regards

      Reply
      1. Zach Post author

        agreed, not sure when I can make time to do any serious improvements though… I haven’t even been keeping up on replying to comments here 🙁

        Reply
  13. Sam

    Hey, sorry if this has been answered before but I couldn’t see it.

    I was just wondering if there is a way to make the images (once you’ve clicked on them) to appear at the size they are on the facebook gallery. Right now they seem to be around 1/4 of the size.

    Cheers, great script by the way!

    Reply
  14. Claire

    This is awesome, thanks Zach!
    Could I ask how exactly you got it to work with fancybox?
    Also, is there any way I could get it to display albums from public groups, not only fan pages?

    Reply
    1. Zach Post author

      there is a link to a fancybox example on this page just above the comments. This script should work on any albums that you can see data for when typing a url like: http://graph.facebook.com/10150741907914431/photos, where that crazy number is your album ID

      Reply
    1. Zach Post author

      Can you also update the basic version with v1.02′s changes? – soon hopefully, though you should be able to use any of the code examples and just swap out the plugin code for the newer version.

      Also, why is “rel” needed (regarding v1.01)? – its not needed per se, but it allows you to add the rel attribute to the links, which is utilized by various plugins, including fancybox (for grouping photos together I think)

      Reply
  15. Ramon

    Great script!

    I don’t see any descriptions underneath the pictures. Maybe my ‘Fancybox’ settings are wrong?

    It would be very nice if there would be a Like button underneath each picture! Also it would be very nice to be able to place/read comments.

    Reply
    1. Zach Post author

      As far as the fancybox descriptions – i’m not 100% sure it even works yet. The capability in the newest version of my plugin (1.02), but I have yet to set up new demos, etc… It very well may be dependent of fancybox settings. If you put together a test – I’d be happy to help debug it and steal your code for this page 😉

      Thanks for the ideas for other improvements. Perhaps I’ll add some of that in a new version.

      Reply
  16. Jim

    Hi Zach,
    I changed the ‘limit’ to 1 – guess that’s simpest way ?
    Will send a link when I’ve got this thing sorted.
    All the best, Jim

    Reply
  17. Jim

    Hi Zach,

    Thanks for the response. I haven’t had chance to have a go at that yet, but will do shortly. My current efforts are trying to pull just 1 No. photo from a gallery in facebook, ideally the one most recently uploaded or at the front of the gallery. Is this possible or does it involve changing alot of code ?

    Many thanks,

    Jim

    Reply
  18. Jim

    Hi Zach,

    Your work is fantastic, really big help and clear info on how to make it work. Thanks.

    One other thing I wanted to get it to do was to bring the facebook photo description along with the photo – so the text description appears at the bottom in the slideshow – how could you do that ?

    Many thanks,

    Jim

    Reply
    1. Zach Post author

      The current version of my plugin places the description in the title attribute of the thumbnail img’s. Without messing with the plugin core, you can work with these attributes in jQuery to do all kinds of stuff. When you say slideshow, do you mean as in the Fancybox examples? Try the new version of my plugin right above the comments on this page (might need to refresh – its brand new). I’ve altered it so that fancybox should grab the descriptions automatically – though I haven’t tested this yet. Feel free to send me a link and I can help debug for you.

      Reply
  19. Pete

    Hi Zach,

    Thanks for creating this script, its exactly what im looking for, however is it possible to resize the thumbnail images ? I need to make them bigger.

    Cheers,

    Reply
    1. Zach Post author

      Its not a feature built into my plugin but it is possible and I may add the functionality in the future.
      If you edit the plugin source directly you maybe able to achieve what you want:

      Find the following chunk of code:
      val2.picture
      Change it to the following:
      val2.images[3][‘source’]
      The number (3) in the brackets references one image size. Try other values between 0 and 10(ish) to see if you can find something reasonable.

      Hope this helps

      Reply
  20. LWC

    Regarding the one code for multiple albums, this may help:

    PageID = "whatever..."
    graph = "https://graph.facebook.com/" + PageID + "/albums?callback=?";
    $.getJSON(graph,function(json2){
    json_length=json2.data.length
    $.each(json2.data,function(i,fb2){
    getloop(i, fb2['id'], fb2['name'], json_length)
    })
    })

    function getloop should enough parameters now to get you going. Does any of this help you?

    Reply
    1. Zach Post author

      Thanks! You sir are a gentleman and a scholar. I think you just saved me a solid chunk of time when I finally get around to another update to the plugin

      Reply
      1. LWC

        Actually, I’ve combined barelyfitz.com’s slideshow, your code and my code to create a Facebook slideshow from the albums of a given page. But that’s outside the scope of this board.

        Reply
        1. Zach Post author

          I’d love to see it if you can send me a link. Hopefully I’ll soon get a chance to put together some demos doing this kind of thing.

          Reply
  21. KaksMan

    HUh! You just save my weekend! Thank you really really much! Now i can go sleep happy:) This code is Dope!!!!

    Reply
  22. Jared

    Hi Zach, firstly I’d like to thank you for your work! Amazing and selflessly shared … This is exactly what I’m looking for ( with Fancybox ) except for one detail which I’m wondering can be figured out:
    Can it be tweaked to display the Facebook Album thumbnail only ( like the cover image for that particular album ) then when clicked, displays the Fancybox with images from that album available through the next / back buttons ? In addition to this, can I display multiple Facebook Albums?

    Once again, thanks for the amazing stuff!

    Reply
    1. Zach Post author

      Hi Jared, thank you for the kind words!

      I just uploaded a new demo with Multiple albums in use that should be a help to you.

      As for the album thumbnail idea, thats not a feature I think I want to build into the plugin, but its certainly possible do make it happen. Maybe I can suggest an somewhat ‘hacky’ solution though: You can load the albums into hidden divs, using Fancybox as in my demo and then hard-code thumbnails for the albums (rather than traversing the Facebook API). You can then trigger the fancybox when these thumbnails are attached with something like:


      $('#thumbnail_id').click(function(){
      $('#hidden_album_id img:first').trigger('click');
      });

      You’ll probably need to be comfortable with jQuery and do some tweaking to get this solution to work. If you require additional assistance, or want me to help put together a more robust solution, shoot me an email.

      Reply
  23. Jon

    Hi Zach, this plugin is perfect for the web site i’m currently working on and it works almost perfectly except for one thing. It seems to be interfering with my drop down menus for the top menu. I’m using your plugin on the 2 pages in the drop down menu for “About us”. When I go to either of these 2 pages and then hover over the “About us” menu item it won’t let me go down to the drop down menu. The drop down menu disappears as soon as I move the cursor down to it. Could you offer some assistance with this?

    Reply
    1. Zach Post author

      Hmm… thats a tricky one. I’m not really sure whats causing this to happen. Maybe its becuase my code loads a newer version of jQuery than your superfish plugin uses? I unfortunately cannot spend too much effort on this one – try stackoverflow.com if you’re really stuck – but… I rearranged a few things in the <head> which miiight just fix it. See the source here: view-source:http://zach.lysobey.com/files/fbAlbum/for_jon.html

      Reply
      1. Moutzees

        Hi Zach, I have the same problem, some album work perfectly, others not. in your code generator all the links work, but not on the site page. I only observed a difference in the length of the link.
        Thanks a lot! beautiful job!

        Reply
        1. Ben

          HI Zach,

          Same for me,I ‘ve got it working just not with the longer gallery address’s. This is great by the way very useful.

          Thanks,
          Ben

          Reply
  24. Rachel

    Zach, I have been looking everywhere for something like this as well! I followed your instructions exactly but the album does not appear embedded. Can you offer some guidance on making it work?

    Reply
      1. Pablo

        Zach, could you post the instructions that you gave Rachel and Andrew so that we could all see the solution? I’m having issues accessing my albums even though I’ve set them to “Public”.

        Thanks!

        Reply
        1. Zach Post author

          Unfortunately yes. The problem is authentication – it needs login credentials to get personal pages. Its probably not even possible without some php or server-side logic.

          Reply
  25. shola

    Hi, Thanks for the post, just what i have been looking for but i have a question, is it possible to make the image link back to the facebook album

    Reply
    1. Zach Post author

      It sure is! Please email me (Zach@Lysobey.com) and let me know how exactly you would like it to work (link to album? link to individual facebook image, etc…). It should be real quick & easy

      Reply
      1. Mike

        My question is similar to shola’s. Ideally, I’d like the image link to target a new tab/window and view the image in the facebook’s theater mode similar to if you clicked the image directly from within the facebook album.

        Also, is it possible to compile multiple albums onto a single page? I’d like to organize multiple albums by date on facebook, but have a gallery page with all the photo thumbnails on the website.

        This tool is really great and I appreciate your work.

        Reply
        1. Zach Post author

          Hi Mike,

          I just added a demo to the bottom of this page showing integration with fancybox (similar to FB’s theater mode)

          In a future version of this code I want it to be able to take a fb page id (not album id) and be able to grab ALL available photos.

          For now each album needs to be manually added. To do this, create a div with a unique id for each album, and call my plugin multiple times within the ` $(document).ready(function() { `part of the script.

          I’ll try to put together a ‘multiple albums’ demo soon, but in the meantime, email me if you have trouble.

          Reply
          1. Cheryl

            What needs to be changed so that each photo links back to that photo on Facebook, where the user could then like/comment? Or just to even link to the album page on Facebook?

Leave a Reply to Pablo Cancel reply

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