A Simple How To Embed Facebook Photos Into A Website
June 26, 2012
First, let me say that this tutorial will cover how to embed Facebook photos into your website, blog, or whatever else you wish. It is for one album, not all of your photos. You can, of course, always repeat the process several times to include multiple albums. There was a tutorial created by Mike Dalisay here, which is a little more involved and allows for navigation.
I wanted to simplify the process to call ALL photos in an album of a Facebook page/person.
Things that are required:
- The ability to use PHP
- A Facebook App ID and Secret Key
- Facebook PHP SDK, an API for calling Facebook data. That is an overview or you can direct download that from Github here.
- Your photos need to be public, no limitations.
- JQuery Lightbox, so we can have a nice look to our photos.
Get your page ready, make sure it is a .php page.
Step 1 – Call the Facebook PHP SDK, Create Facebook Query
Once you have uploaded the correct ‘src’ folder (that is all you need from Facebook PHP SDK), call it through PHP.
|
1 |
< ?php require 'fb-sdk/src/facebook.php'; |
Don’t close your PHP tag. Follow that by creating a new APP index to communicate with Facebook. Be sure to place your APP-ID and APP-SECRET where it specifies in the code.
|
1 2 3 4 5 |
$facebook = new Facebook(array(<br /> 'appId' => 'YOUR-APP-ID-HERE',<br /> 'secret' => 'YOUR-APP-SECRET-HERE',<br /> 'cookie' => true, // enable optional cookie support<br /> )); |
Now, each Facebook photo album has a unique ID # that you have to get. Aren’t sure how to get it? Go to Facebook, go to your photos, click on the album, then look at the URL. The URL should now have a bunch of numbers in it.
It should look like this
|
1 |
www.facebook.com/media/set/?set=a.221167777906963.68636.221167777906963 |
Well, your ID is the first two strings of numbers separated by a period, so – www.facebook.com/media/set/?set=a.221167777906963.68636.221167777906963 – in red is your ID.
You need to take that whole string, but replace the period with an underscore, so it should end up being – 221167777906963_68636 – and now you have something you can use in your Facebook query.
|
1 2 3 4 5 6 7 |
$fql = "SELECT pid, src, src_small, src_big, caption FROM photo WHERE aid = '221168737906867_68636' ORDER BY created DESC";<br /> $param = array(<br /> 'method' => 'fql.query',<br /> 'query' => $fql,<br /> 'callback' => ''<br /> );<br /> $fqlResult = $facebook->api($param);<br /> |
Remember to replace WHERE aid=”” with your unique album ID.
What you are doing is essentially creating a statement to grab the picture ID, the source, the small thumb, the full image, and caption from that album, and order it by the date created.
Step 2 – Output the results of your query
Remember, your PHP tag should still be open. We aren’t finished yet. We have all the data from your album, but we’d like to output the thumbs now, as links, so you can click and view them.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
echo "<div id='gallery'>";<br /> foreach( $fqlResult as $keys => $values ){<br /> if( $values['caption'] == '' ){<br /> $caption = "";<br /> }else{<br /> $caption = $values['caption'];<br /> } <br /> echo "<a href=\"" . $values['src_big'] . "\" title=\"" . $caption . "\">";<br /> echo "<img src='" . $values['src'] . "' style='border: medium solid #ffffff;' />";<br /> echo "</a>"; <br /> }<br /> echo "</div>";<br /> |
Let’s go through this line by line and explain what is happening. First, we are wrapping the output in a div, only for the purposes of later identifying it for the JQuery. We are calling that “gallery”.
Then, we are saying, foreach of the pictures , create a link to the large image, place the image of the thumb within the link, and then close the link. When the foreach loop is over, close the “gallery” div.
Now, you may close your PHP tag.
|
1 |
?> |
Step 3 – Include a JQuery lightbox to make it look nice
Remember that JQuery Lightbox I had you grab? Well, let’s use it to have a nice effect to the image gallery!
First, call the files…
|
1 2 3 |
<script type="text/javascript" src="jQuery-lightbox/js/jquery.js"></script><br /> <script type="text/javascript" src="jQuery-lightbox/js/jquery.lightbox-0.5.js"></script><br /> <link rel="stylesheet" type="text/css" href="jQuery-lightbox/css/jquery.lightbox-0.5.css" media="screen" /> |
Please not that the file names may be different. The versions tend to be updated.
Then, create a script to place the Lightbox effect on the images…
|
1 2 3 4 5 |
<script type="text/javascript"><br /> $(function() {<br /> $('#gallery a').lightBox();<br /> });<br /> </script><br /> |
Since we made a DIV tag around the foreach loop, all of the images will be in that div, so all of the links within will take the Lightbox() effect.
That should be it! Again, if you are look to expand on this or some more functionality, please view this great tutorial by Mike Dalisay here.
Troubleshooting
There was an issue I had with the headers being sent twice through the ‘facebook.php’ file included in the Facebook PHP SDK ‘src’ files. I simply commented out Line 37 in the file to look like this:
|
1 |
//session_start(); |
Sometimes, it does help to convert your file in your favorite text editor to UTF-8 WITHOUT BOM as well.
Happy coding!
12 Comments
Amanda
Hello
I am having some problems installing this, it’s probably because I am very new at this, and don’t quite know what Im doing….
For starters, I can’t get anything to show up, but right now, my main concern is the line:
$fqlResult = $facebook->api($param);
If I do not comment it out then nothing loads after it (not the closing div gallery tag, or any code after)
When I do comment it out, the gallery div finished loading (along with the rest of the site) but obviously nothing with in the div tag.
Right now I am just lost on what the problem even is.
mPi87
Thank you so much! This works. Can you please also show us how to embed all the photo albums at once like facebookgalleria.com, as oppose to just one album? Thanks!
Kareem Farag
Hey thanks for the great tutorial , but as it’s written in facebook documentation
if we had this album link
http://www.facebook.com/media/set/?set=a.10150146071791729.324257.20531316728
so the required id is “20531316728_324257”
please check this
http://developers.facebook.com/docs/reference/fql/photo/
Randy
It could be the album ID your calling. It could be incorrect. Try different variations of it and see how that works.
Nathan
This is great, but I can’t get it to work with any album except yours. I’ve tried several albums from the page I want to use, and the photos are definitely public. I tried an album from Coca-Cola’s Facebook page as well. Do you have any idea why I might be having this issue? I thought it was just album privacy but I’m not so sure.
Thanks for your tutorial and any help you can offer.
RCNeil
Yep. Sure did. Thanks for pointing that out!
Peter
In your Example you got the album ID wrong!
The correct aid would be: ‘221167777906963_68636’
Randy
The most common issue is typically that the photos aren’t public. They have to be able to be seen by anyone. Make sure they aren’t marked private.
Stijn
Sorry, an empty gallery-div
Stijn
Hi, first of all: thanks for a clear tutorial. However, all i get echoed is an empty Any ideas? Thanks in advance!
eagles1405
Ditto. Please email me with a quote!
kingkenoah
I will pay you to do that on my website. send me an email.