Monday, May 9, 2011

Embeddable Facebook Page Photo Gallery

I FINALLY got it! I don't even want to admit the time it has taken me to make this code.... But it is finally done! It is working for me in both IE and Google Chrome. Below you'll find the code to embed any public Facebook Page photo album into your webpage. Simply edit this section:

var id1 = "147982151940543"; <----- Put your album ID here.
var id2 = ""; <----- Leave additional albums blank if you don't want to use them.

You can find your album ID by looking in the address bar of your browser while viewing your album:

Then paste the code to your webpage and viola!
The styling options are endless to really make this script your own!

Features:
•Photos open in new window.
•Hover over image for description.
•Show up to 5 albums!
Want more? Don't hesitate to ask. I'll give it a try!

This script only works for Facebook Page albums and NOT personal profile albums. The code works off of Facebook's constantly changing API. Facebook has recently updated their page security removing the ability to use this same method to pull status updates, posts, links, etc. If they continue to choke out website users, then this code will not work without registering a Facebook app for your website. This would require all viewers to allow you to access their information in order to display your own... In the event Facebook makes this moronic change, I will not be updating the code and will probably delete this post.

DECEMBER 2012
THIS CODE NO LONGER FUNCTIONS.
IT REMAINS ON THE WEBSITE FOR OTHERS WHO MAY WANT TO ALTER OR RESTORE IT.
I WILL NOT BE MAKING ANY UPDATES OR CHANGES.


SEE ONE IN ACTION! and leave a link to yours in a comment below!

Like it? Consider making a donation:

51 comments:

  1. how do you set a facebook photo album to be public?

    ReplyDelete
  2. Click "Edit Album" while viewing the album. Then make sure Privacy is set to Everyone.

    ReplyDelete
  3. I have a Public Facebook Photo album here:

    http://www.facebook.com/media/set/?set=a.1734640690108.2087650.1361289301&l=72d9c2fe44


    If I copy in my Facebook Photo Album id

    var id1 = "1734640690108";

    the photo gallery doesn't work.


    Any ideas?

    Thank-you

    ReplyDelete
  4. Hmmm.... I'm stumped at the moment. I know it has something to do with the album being part of your personal Facebook and not a page for a website or product... I am working on it though! I'll get back to you as soon as I figure it out.

    ReplyDelete
  5. I've been playing around with my personal albums and every setting I have on Facebook and I don't think it's possible to use this method for a personal page. Sorry...

    ReplyDelete
  6. ok, thank you. i will just have to make the photo album not part of my personal Facebook

    ReplyDelete
  7. GREAT script! Thanks so much for posting this info!

    ReplyDelete
  8. great script!!! How can I make my photos look at their actual size. At facebook they look bigger but with this script the look smaller.

    ReplyDelete
    Replies
    1. The images you see are thumbnail images. If you click them they will open larger in a popup window. If you'd like to display your photos full size you can replace "fb.picture" with "fb.source" throughout the whole code. If you'd like to re-size them from there you can manually set their size by inserting "height:##px;" (replacing ## with actual pixel height) just before "margin:5px;padding:0px;etc...". Sorry it took so long to get back to you. If you need any additional help email me@digitalbrittany.com and let me know exactly what your looking for. I can edit the code and send it to you.

      Delete
    2. is this for change size of the thumbs? i wanna make them a bit bigger

      Delete
  9. I'm getting a syntax error on the FBfetch1, FBfetch2 scripts towards the end of your code in Dreamweaver. Any idea why?

    ReplyDelete
  10. Did you try to make this work with colorbox? Or someother lightbox instead of the popup? Just wondered, I'm trying and it doesn't seem to be happy

    ReplyDelete
  11. Thanks for the script :) its working for me :p

    ReplyDelete
  12. how can I get it to open on a light box??? could a add a div to put a like button under each photo??'

    ReplyDelete
  13. Marco, u can put the code in from this site http://developers.facebook.com/docs/reference/plugins/like/

    ReplyDelete
  14. Hey Britney, is it possible to change it so that when they click on a photo it opens up the actual page for the photo, that way they can still comment and like it as they usually would?

    Thanks

    ReplyDelete
  15. This is amazing to me! I tried integrating this script to work with jQuery Lightbox, but I couldn't get it to work. I think it's a DOM issue or something. Can you help give some advice on this? Thanks!

    ReplyDelete
  16. Is there any way to have photos show in descending order? Also any way to limit how many photos show?

    ReplyDelete
    Replies
    1. Just in case you hadn't figured it out or haven't been replied to, the limit is found at the end of this line, as you can see I've already edited it to '1' for a website I'm building.

      function fbFetch1(){
      var url = "https://graph.facebook.com/" + id1 + "/photos&callback=?&limit=1";

      Delete
  17. You are genius!!! You saved me hours of work. Thank you very much.

    ReplyDelete
  18. AWESOME CODE! Just 2 problems... Is there any way the Pop-up window size can automatically open to the actual full size of each photo instead of 1 set size pop-up?
    And also, is there Any way for the photos to have a LEFT and RIGHT arrow to flick through?? This would be the biggest thing most websites would need and then this code would be perfect.
    Even better if there's a way for the Comment/Like options to be under the photo in the popup.. but maybe that's asking too much?? ;)

    Let me know if anyone has any idea.

    Keep up the great coding. Look forward to your thoughts...

    ReplyDelete
  19. OR to open with my lightbox/colorbox Popup style?... That would be a dream code..

    ReplyDelete
  20. It would be good if the all Album IDs are fetched automatically using the Page ID and are then displayed in a dropdown list. This way we can see the photos of one album at a time.

    ReplyDelete
  21. If you could let me know your thoughts on the most common 2 problems above, that would be great Brittany!!! Love your work.

    ReplyDelete
  22. Thank you everyone for all your comments. I'm going to try and get back to all of you in this one comment. First, I made a brief attempt to get it to work with Lightbox when I first created the code, but was unable to get it to function. Second, It is possible to integrate it more with FB using like buttons, commenting, etc. However, my use was to pull from FB leaving no indication of where it was coming from. My website was for all the people who where not on Facebook, not for the FB users. There are a lot of ways to improve and alter this code. Unfortunately, I don't have the time at the moment.

    ReplyDelete
  23. Thanks for the reply Brittany :)

    That makes sense. Any chance you are able to add these 2 things to the pop-up photo that would benefit the experience for everyone's users.

    1) Is there any way the Pop-up window size can automatically open to the actual full size of each photo instead of 1 set size pop-up?

    2) And also is there any way for the photos to have a Left and Right arrow to flick through? This would be the biggest thing most websites would need and then this code would be perfect.

    Cheers! :)

    ReplyDelete
  24. Thank you very much. Great work ;)

    ReplyDelete
  25. This is a fantastic piece of code, and it features on two of my published websites, and I am working it into another website.

    Quick question, can you use this code to access "photos of [page name]" as I am using this code to make the background of the website, so that when a new photo is added it becomes the background of the website.

    I would ask the owner if she would try and post into a specific album but I know she will forget.

    Failing this, is there a way to make it pick randomly from a selected album?

    ReplyDelete
    Replies
    1. I think this is one of the privacy restrictions that requires an access token in order to view, so it won't work with this code. How about pulling the latest wall photo?

      Delete
  26. Thank you for the great script but is there any way to add comment or show comment for each photo?

    ReplyDelete
  27. Hey, this is awesome! Is there a way I can change the width of all the thumbnails in a group? I know they center, so is there a way I could say limit 10 and adjust the width to be 5 wide and two rows of 5 thumbs? :) Whenever I try and adjust the width it stops working :/

    ReplyDelete
    Replies
    1. There isn't a way to specify an actual grid layout like X Columns by X Rows, but you can get it to work by messing around with a few things.

      1) You can change how many photos are pulled by changing "limit=0" to the number you want. If you want a 5x2 grid, then start by changing this number to 10, so you'll only make 10 photos visible.

      2) To specify the width of each photo you'll need to add a line to the code. Where you see "style='margin:5px;..." you can add a width property such as: "style='width:150px;margin:5px;...". Increase and decrease the width to suit your needs. Eventually you'll get the grid you want.

      If you're pulling from multiple albums you'll need to make these changes multiple times (Once for each album). Also keep in mind if you only want a max of 10 photos and your pulling from 3 albums, then you're going to have to break it up unevenly somewhere. Maybe 3 photos from album A & B, and 4 from album C, totaling 10 photos from all.

      Glad you like it. If you need any more help let me know.

      Delete
  28. Dear Brittany, thank you so much for your great work! It has been very simple to paste the code to the website and it all worked on the first attempt.

    What do you think, is it possible to add the picture-description as well? I want to create an fb-album with my sorority's members and the name of each girl under the picture. It would be quite helpful to embed this fb-album as a member-gallery into the website because the upload via facebook is much more easier and can be done by me or one of the other fanpage-admins so I don't have to do all the work by myself everytime another girl joines our sorority.

    Please apologize my bad English, I'm from Germany ;)

    ReplyDelete
  29. Is there a way to add a title to separate each album so that they don't just all run together? Maybe a way to specify H2 tags at the head of each album?

    ReplyDelete
    Replies
    1. If you want to separate the albums with a title you can edit the ---> html += ""; <--- line following each function fbFetch#(). There will be one for each album. Just add whatever you like in the quotes.

      Delete
  30. How do I get rid of the made by Brittany part. I give you lots of credit for great code but my website is a professional site and cant have that on there

    ReplyDelete
    Replies
    1. It's just a link at the end of the code and is easily removed. I would suggest that you pay a professional to do your website for you if your still unsure how or why the link is there. They can provide you with paid service options providing no reference to the original developers. However, they will place their own accreditation on your page and this is all part of the proper etiquette of website design.

      Delete
  31. thanks a ton for your code, I have managed to extend it slightly to obtain all the albums from a facebook page and to display it, without a limit on the number of albums

    ReplyDelete
    Replies
    1. Great! The possibilities to the code are nearly endless. I only wanted it to do a very limited bit, so I intentionally limited it. It's great to her others expanding it to meet their needs.

      Delete
  32. I have a similar code that I now use with Flickr. It has more of a light box style to it. Although I no longer use the Facebook code myself, if there is enough interest, I would be willing to alter it to the overlay style image rather than the physical popup. Reply if your interested:
    http://www.digitalbrittany.com/2012/08/flickr-website-photo-gallery.html

    ReplyDelete
  33. YES! I would love an updated version of the Facebook code. I do a website for animal rescue and they also have a Facebook page that is updated almost daily. This would be a tremendous time saver in getting these adoptable animals posted more quickly on the web site. THANK YOU!

    ReplyDelete
  34. Hmmm...anyone been able to tweak this code to work with the latest and greatest of Facebook changes? Just realized my site's photo album is down.

    ReplyDelete
  35. So are ours, on multiple pages. HELP anyone?

    ReplyDelete
  36. hey i am not getting this, can someone tell me how it is work, bcoz i have put my facebook album id but still not display any pic of album.

    so plz tell me on ramuware@gmail.com

    ReplyDelete
    Replies
    1. As of December 2012 this code no longer functions due to Facebook API updates. It remains on the website for others who may want to alter or restore it. I won't be making any updates or changes. Sorry.

      Delete

There is nothing like stating your opinion and I'd love to hear it, so leave me a comment!