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 };
it works great – txs a lot for this.
does it work with the prettyPopin (jquery from Stephane Caron (http://www.no-margin-for-errors.com) too?
greetings
.. solved! use the callback an implement the fct.
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”.
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:
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.
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?
Am I correct to say the ‘Timeline Album’ does not work with this? All other albums do, just not the timeline album.
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.
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
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?
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?
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
Hey Paul,
Looks like you havent properly included jquery. You have to put jquery.min.js in the same directory as test.htm
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?
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.
then placed the “div id” code in the body for the Photos page
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.
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
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)
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.
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.
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}
OK got it
Thanks you really saved us 🙂
glad to hear it. Feel free to drop me a line if you run into other troubles.
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
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
moved to main page http://proaudiovideo.us/photo-gallery.htm it was on a test page before soeey for the many post. still trying to watermark!!!
Hey Zack,
Is the FBalbum2.js working or is that the one that is not working. if the 2 is the stable working js please take a look at http://hetrickpainting.com/Deck%20Finishes.htm and tell me what i am missing please sir.
Thank you.
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 😉
Hi Zach,
Is it possible to export history and don’t redownload deleted photo?
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.
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!
Even your version 1 examples sometimes works, sometimes doesn’t. Could you give the reason on why it was failed?
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
Thanks for the info
Is your fbAlbum2.js work better than version 1 or they are the same?
Hope there will be a solution soon as the script is AWESOME!
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)
Fantastic. Thanks for posting this – it is just what I was looking for!
i have the problem with
firefox, waterfox,IE,chrome,safari
some of them have never opend my website before
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.
when using this link, i can see all pictures without issue,deleting cookies and so on, so maybe they changed naming or similiar
https://graph.facebook.com/181453538582282/photos?limit=500
i copied the part for a picture and can open without issue
same here, no pics anymore, hope for a soon solution
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.
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?
It seems Facebook is now requiring an access_token for public photo album JSON feeds (unless someone changed my albums to private).
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.
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?!
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.
Congratulations!
Thanks a lot for yout script!
Antonio Carlos Valentini – Brazil
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
what do you mean by “a webbuilder” precisely? I’ll help if I can
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!
there is a parameter in the settings object (defaults shown above)
you would do something like:
$(‘#FBalbum’).fbAlbum({
‘albumID’:’10150302289698306′,
‘limit’ : 9
});
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!
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…
Exellent works, Zach! This is what I’m looking for.Thankyou.
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.
i got the code working thanks sorry for the many post.
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.
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.
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???
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.
Hi,
So after a little playing around I just removed one line: body{ max-width:600px; text-align:center;}
Thanks
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
Anyway this will work with Fancybox 2?
Yes this works with fancybox2 I have it working with this site.
How to create a list and display all albums in one page?
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.
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.
Hi Zach,
I have a Facebook group with several albums, and I have issues adding the albums to my website. Do you know if the same functionality can be obtained with Facebook groups using your code. Below is the public group album:
https://www.facebook.com/media/set/?set=oa.420589434678893&type=1
By the way, Happy New Year and excellent post and I think I was able to figure out how to use your demo files.
Thanks,
Jerome Biotidara
Please disregard my previous request. I just figured it out through the console (val2.link). Thanks!
Dear Marcus
Is it possible to see you code how you did it, as i am also looking for something same as yours.
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!
Hello again, I solved the issue.
Just adding a var and using the albumItem.push to append it worked fine (=
Hey Zach, is there a way to display the image titles at the bottom of the thumbs perhaps?
Hi, I have this url http://www.facebook.com/media/set/?set=a.341387242594733.70908.168766713190121&type=3 how can I set de album ID with that?
Hey Zach quick question. is there anyway to embed the whole albums on the fan page?
http://www.facebook.com/voguedurham/photos_albums I would like to list on my website