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!