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 };
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.
I’m trying to get your script to work with royal slider like it does with fancybox. The callback doesn’t seem to work?
Hi Zach, great script. Is there a way to also get the comments to the photos?
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.
@Antoine
Bro can i see you code too, as im also looking for same..
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.
Disregard. Apparently our Group Page was restricted to United States Only. This prevented the display.
glad you sorted it out 🙂
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!
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 thingHi Zach,
You rock – thanks so much for this code which fits perfect for what I wanted to do on my Little website!
I can’t get the fanceybox part to Work though which would improve the look a lot. Can you possible help me out by taking a look at http://www.evigglad.com/?Maries%26%23160%3BMalerier and tell me if you see any problems preventing the fancybox-thingy opening? Would be much appriciated….
Thank you!
Best,
Marie
Oh, URL is bad. This is the right one: http://www.evigglad.com/?Maries_Malerier
thnx for the script! works great
Is it too soon to tell you that I love you?! #NoHomo
I have been looking for something like this for WEEKS!
THANKS!
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?
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.
Hey, sorry I’m a week late in my response. Going to your link, it looks like you’ve resolved the issues already! If not drop me an email for a quicker reply: Zach@Lysobey.com
Is there a way to make all the thumbnails the same size?
A little css should be able to make this work. See this example: http://jsfiddle.net/b2925/
Worked like a charm! thanks, however is it possible to automatically get the albumID from all the albums in my fb account?
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.
+1 on that, that’s exactly the functionality I’m looking for, as the client would be able to set it and forget it.
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
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.
Hello and thanks for this! Do you happen to know a way to get this work with masonry.js?
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.
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 😀
Its certainly possible 😉 I have a demo of something similar (though they don’t display like one album: http://zach.lysobey.com/files/demo2
I’m happy to come up with something if you still need/want this functionality, but given the lateness of this reply, I’ll hold off for now.
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
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, ''')
off couse comment system strips tags so my comment above became useless to copy&paste but I hope that’s no problem for you.
Thanks Jarek! You’re right of course – thanks for the heads up!
Hi!
How can i have all photos in only one horizontal line?
Thanks for the excellent code!
Thanks, Zach!
You created a very useful code!
I’m looking for a slideshow to display my album.
Any idea?
Hey Luiz, sorry for the late reply. Uhh, check out http://zach.lysobey.com/files/demo_fancybox for an example of a jquery plugin integration – you should be able to use that same method to combine fbAlbum with just about any jQuery plugin. I’ve found some cool slideshows/etc… here: tympanus.net/codrops/
Thank you for this! It helped me a lot! And I even managed to make it work with multiple albums.
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!
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
ah right it’s not a FB page 🙁
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
thats odd… email me a link (or some code) and I’ll take a quick look ( zach@lysobey.com )
Being able to add comments and likes to photos would be an amazing feature to add. Similar to this site:
http://punyentertainment.com/forestface/
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
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 🙁
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!
they should come in at full size… send me a link (or some code) and I’ll check it out
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?
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 IDCan you also update the basic version with v1.02’s changes?
Also, why is “rel” needed (regarding v1.01)?
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)ve been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thx again
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.
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.
So the script only works for Facebook “Pages” and not “Profiles”?
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
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
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
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.
this is so helpful—thanks a ton for sharing!!!
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,
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
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?
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
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.
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.
We’ve once PMed via Facebook. Do you prefer that way over e-mail?
HUh! You just save my weekend! Thank you really really much! Now i can go sleep happy:) This code is Dope!!!!
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!
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.
Thanks Zach! Much appreciated!!! I will have a play and get back to you.
Hey Jared, did you work this out?
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?
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.htmlZach you’re awesome. That fixed the problem and now my web site is working perfectly. Thanks you!
Works great!!!!
Thanks a lot for yout script!
Roberto Maldonado C.
ojoandroid.com
Hi Zach, Thanks for this. I’m able to get it to work on albums on one of my pages but not another one. All are publicly accessible so I’m not sure why it isn’t working for all of the albums on one page. Here is a link to one of the albums that doesn’t work: http://www.facebook.com/media/set/?set=a.10150741907914431.424446.7787249430&type=3
Andrew
hope my email helped 😉
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!
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
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?
Rachel, I hope my email helped… Let me know if you’re still stuck
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!
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.
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
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
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.
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.
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?