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. Marco Almeida

    It would be great to be able to use square thumbnails.

    This could be achieved by using “background-image” on the “a” tag instead of “img src”.

    Reply
    1. Zach Post author

      That it could Marco. If you have a head for JavaScript/jQuery – its a pretty easy edit (happy to help if you want to do this). Also, let it be known <img> tags are not impossible to crop to a square (with a container with `overflow: auto` and fixed dimensions), but it can be a bit difficult to center the cropped image unless you know ahead of time what the dimensions will be of the individual un-cropped thumbnails.

      Some more info here:

      Reply
  2. Jay

    Has anyone tried to make it into a grid format? What would I do to have the images stop at the end of the frame, and begin where it left off next to it on the right? Or is there a better way?

    Thanks in advance.

    Reply
    1. Zach Post author

      Hey Jay, that sounds like its probably a pretty easy CSS question; but I’m not 100% sure what you’re looking for. Do you have an example of what effect you’re trying to achieve?

      Reply
  3. Gerjan

    Am I correct to say the ‘Timeline Album’ does not work with this? All other albums do, just not the timeline album.

    Reply
    1. Zach Post author

      Not really sure what the “Timeline Album” is. If you can, send me an example of a non-working album, and I’ll attempt to debug.

      Reply
      1. Justin

        I’m experiencing the same problem – when I first set up this page, the timeline album was working without issue; however, a couple weeks ago, it stopped loading. You can see a regular album is working fine on this page:

        http://deltasigosu.org/media

        Reply
  4. Iacovos

    Hello, I have tried this code in a real- time html Editor and its working fine. But when I put it in wordpress it doesn’t work, does anyone know why?

    Reply
    1. Zach Post author

      Hard to say without seeing it. Not to be a jerk, but you’re probably doing it wrong ;-)
      If you have a live link to your WP site with a broken gallery, email me zach@lysobey.com and I’ll try to spot a fix. Otherwise, perhaps explain how you’re “putting it into” wordpress.

      Also, its unlikely to matter, but what html editor are you using?

      Reply
      1. Paul

        Hi Zach,

        I have the code working great when I preview the site in IE, but when I upload it to the web it the album doesn’t show up I just setup a test page to try it out. I must be missing something .

        Thanks,
        Paul

        Reply
        1. Zach Post author

          Hey Paul,
          Looks like you havent properly included jquery. You have to put jquery.min.js in the same directory as test.htm

          Reply
  5. Andy

    Hey thanks so much for the code! I have been working on it for hours however and I cannot get it to work. Our website is a wordpress site. I finally found the editor for the section. I placed the code in that section. Then i placed the code in the page where i want our photos to be (The Photos section). Our website is 3orless.com Any way you could help me out?

    Reply
    1. Andy

      it deleted a part of it thinking it was code. Sorry about that. I meant to say that i found the “Head” section of the site and place the code there.

      Reply
        1. Zach Post author

          Hey Andy, did you end up coming up with a solution? I checked out your page and was unsure exactly what you were trying to do.

          I see you have `$(‘#FBalbum’).fbAlbum({ //…` but it doesn’t look like you have any element with `id=FBalbum` so that may be your problem. The code will look for that ID and put the album inside that element.

          Reply
  6. Bjoern

    Hi Zach,
    great script!
    I think a “like- button” in or under the colorbox would be a good thing to get fans for the fanpage. I tried to integrate it but it didn’t work. Do you have an idea, how/where I can handle this?
    Bye,
    Bjoern

    Reply
    1. Zach Post author

      apparently its something I cannot whip-up in 15 minutes (I tried), but its been mentioned before, and I’ll look into it when I get a chance. Not sure how easy it will be without editting core colorbox files (which I don’t think I want to do)

      Reply
  7. OBERLINER

    Hi Zach

    Please help! the the script suddenly stopped showing albums for the last one week….

    Any idea? any update ? i guess facebook has changed something at their side so the script is not able to pull the albums anymore.

    Reply
    1. Zach Post author

      Your guesse is correct. I noticed this issue a couple weeks ago. It has been fixed in my newest version of the plugin: fbAlbum2. Scroll down in the comments a bit, and there is a short discussion explaining what happened.

      Reply
      1. OBERLINER

        Thanks dear, but i am still confused that which file should i update.

        Here is the code i embed in every article with new album

        $(document).ready(function() {
        $(‘#MY_DIV_ID’).fbAlbum({
        ‘albumID’:10150099875358938,
        ‘callback’: function(){ //code that loads after the album must go here
        $(“.album a”).fancybox();
        }
        });
        });

        .album{ width:auto; float:left;}
        .album li{ float:left; width:120px; height:120px; overflow:hidden; margin-bottom:10px; text-align:center;}
        .album a{ display:block; width:120px; margin:20px; float:left; border:0px solid #444;}
        .album a:hover{ border:0px solid #44d}

        Reply
  8. Matt Harvey

    Ok Zack thanks for helping me on Hetrickpainting.com that is fixed and working well. I also have that site doing what I asked you to help me with in the other post. Picture comes up with transparent backdrop, direction arrows and exit button. but i cannot seem to get google+ to do the same thing please take a look and and let me know what i have done wrong please.

    Thanks

    Reply
    1. Matt Harvey

      i have this up and working with the transparent background and it now has all navigation buttons. i am still trying to add the watermark. Here is a fiddle with the watermark, I have tried it add the watermark to my site but cannot seem to do so. do you think you can help. this is the last thing I need to complete before i can go live with this site.

      Thanks so much for all your help..

      Matt

      Reply
    1. Zach Post author

      Sure thing. fbAlbum2.js is indeed the current version, and should be working fine (though it hasn’t yet been thoroughly tested.

      I took a quick peek at your code and noticed you’re actually still using an older version on the code however, so that may be the problem.

      Try replacing likes 124 – 190 in your source with the contents of the following js file:
      http://zach.lysobey.com/files/fbAlbum2/jquery.fbAlbum2.js

      PS: I saw your other message (about G+), but cannot put together a good response right now – but its on my todo list ;-)

      Reply
    1. Zach Post author

      Not really sure what you’re asking here. This plugin grabs photos (in realtime) from Facebook for display on your own page. If you delete the photo on facebook, it will not appear on your page.

      Reply
  9. Zach Post author

    Update [April 26th 2013]:
    As of the last week or so, many people started having trouble with their albums no longer working in some situations. I was using facebooks API in an undocumented way, and they Facebook changed something in their code (not sure what), causing strange errors. But not to fear, it should all be fixed in the newest version of my code!

    Reply
    1. lemd

      Even your version 1 examples sometimes works, sometimes doesn’t. Could you give the reason on why it was failed?

      Reply
      1. Zach Post author

        I’m still not entirely clear on the exact mechanism that caused the 1.x code to break sometimes. I did find out however that the way I was querying the graph api was “undocumented”, and althogh it worked for a long time, it was never guaranteed by Facebook to do so. I was doing something like `graph.facebook.com/<albumID>/photos` where I should’ve been doing something more like `graph.facebook.com/<albumID>/photos?fields=picture,source,caption`

        More info here:
        http://stackoverflow.com/questions/16063370/facebook-graph-api-call-no-longer-works-because-of-facebook-cookies

        Reply
    1. Zach Post author

      should be good to go now John. I’ll be making more updates soon, but everything should work fine now with the new version (fbAlbum2)

      Reply
    1. Zach Post author

      hans, I remember you! and that site. Sorry this happened. This is new info to me; which is good – maybe it will help get to the bottom of this. I’m going to email you and ask a few more questions. I’ll post back here as soon as I have some good results.

      Reply
    1. Zach Post author

      I’m putting a “bounty” on my question now. http://stackoverflow.com/questions/16063370/facebook-graph-api-call-no-longer-because-of-facebook-cookies

      Hopefully we’ll have a solution.

      A bit more info on the problem: I think it only happens for people who used my code (or similar) prior to a couple days ago – assuming its some sort of bug with Facebook OAuth cookies or something. It should still work for new visitors, or on another browser that you haven’t viewed the site on, or if my manually delete your Facebook.com Cookies. I hope to have a better solution soon.

      Reply
  10. Mark

    I’ve been using your code for a few months now and only today have noticed that facebook is now throwing a OAuthException error when I’m trying to access public albums.

    Is this something with your code or a change with Facebook?

    Reply
    1. Mark

      It seems Facebook is now requiring an access_token for public photo album JSON feeds (unless someone changed my albums to private).

      Reply
      1. Zach Post author

        Hi Mark.

        I just found this issue this morning as well, and am at somewhat of a loss as to why its happening.
        The “good” news is that this is apparently only happening in Chrome.
        I created a question on StackOverflow, but as of yet, haven’t seen any response.
        http://stackoverflow.com/questions/16063370/facebook-graph-api-call-no-longer-working-without-token-in-chrome

        I hope to figure this out ASAP. If you have any insight, please let me know.

        Reply
  11. seka

    Hello there! First of all, great plugin, i’ve been using it with fancybox for a while but now i’d like to integrate it in Twitter’s Bootstrap Modal and i can’t get it done. Could you please help?!

    Reply
    1. Zach Post author

      Yea, I’ve tried (briefly) to use it with another modal dialog (not Fancybox) and got frustrated and gave up at one point. Can you perhaps shoot me a link with your (broken) code? Or ideally a jsfiddle if you can put one together. I’d be happy to help debug, but I cannot spare the time to set up a demo from the ground up.

      Reply
  12. martijn*

    hello great plugin,
    i am not a webdesigner…cant get it done

    i wonder if you could help me including the code in a webbuilder?
    greets

    Reply
  13. aj

    I was wondering if there is a way to limit the number of images shown? For example if we only need the latest 9 to show out of an album. Do you know what code I would need to add for that? Great script btw. Thanks for sharing it with all of us!

    Reply
    1. Zach Post author

      there is a parameter in the settings object (defaults shown above)

      you would do something like:

      $(‘#FBalbum’).fbAlbum({
      ‘albumID’:’10150302289698306′,
      ‘limit’ : 9
      });

      Reply
  14. ruben

    Hi there,

    I’m wondering if its possible at all to load the images from fb, but have them appear to the browser as incrementally ‘renamed’ srcs. So it would load from fb as “527840_435723113141541_271882918_n.jpg” for example, but appear in the element attributes as “01.jpg”

    cheers!

    Reply
    1. Zach Post author

      interesting thought. No idea how (or if) this can be accomplished with JS. You can definitely do this with a server-side language (like PHP) though…

      Reply
  15. matt Harvey

    Trying to get new Default Settings added to the script so i can pull title and my descriptions and also change thumbnail size most important. can you please help i think i may have script messed up a little. i have reverted back to what works for now.

    Reply
  16. Yotsume

    I see that you have never addressed the problem of longer album IDs do not embed. A number of other people have asked for a solution. I hope you can help with that issue please.

    Reply
    1. Zach Post author

      I appologize to everyone who’s questions I’ve ignored. As it often does, life has gotten in the way, and I’ve been a bit too overwhelmed to give this script its required attention.

      I know exactly what’s going wrong, and I’m extremely sorry for the trouble. I need to update my page to reflect this “bug” that’s shown up.

      When you include the album id in my code, wrap the number in quote marks. This is a problem with the album id exceeding javaScripts upper-limit interger value, so we just need to treat it as a string.

      Reply
  17. Yotsume

    Using your code I can not embed my public album from my page. Certain albums can and others cant depending on their album ID. How do I need to enter in my album ID for this album?
    https://www.facebook.com/media/set/?set=a.10151518590287023.444017.265117747022&type=1

    I tried to use both of your demos but neither work for this album which is public.

    I noticed any of my public albums that end in 23 cant be embeded. All my other albums can.

    What is the problem???

    Reply
  18. matt Harvey

    I am building a web site and I am using fancybox 2 and have it working well. I am trying to add this script to a page with the same css style on the page can you assist.

    Reply
  19. Mark

    Hello

    Firstly, thank you for the excellent information and code you have provided us, its really good! I have two questions for you, the gallery page I created appears to have lost some of its css styling, if you look at: p1sports.com and then select the gallery, everything moves to the left, how can I get it to stay where its meant to be?

    Secondly, is it possible for the description of each image to be displayed along with the image etc?

    Thank you in advance for your help

    Mark

    Reply
  20. Ray

    Hi Zach. Thank you for the script. Have installed it on my website and it works great.

    I’m trying to alter the layout of the output by using one of the Foundation framework scripts, Clearing. This needs the ul tag changed to add another attribute, from to .

    Can you suggest how I could edit your script to do this?

    Thanks. Ray.

    Reply
    1. Ray

      Sorry, the code fragments got lost …

      I meant change ul tag to be ul class=”album” data-clearing.

      In other words add another attribute inside the ul angle brackets.

      Reply
  21. Marcus

    Thank you so much for this code. It works perfectly. I was wondering what the solution to the first question posted here is (how to link images to their respective facebook pages). Thanks!

    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>