<RCNEIL ⁄>

  • About
  • Work
  • Blog
  • Contact

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    =   &quot;SELECT pid, src, src_small, src_big, caption FROM photo WHERE aid = '221168737906867_68636'  ORDER BY created DESC&quot;;<br />
$param  =   array(<br />
'method'    =&gt; 'fql.query',<br />
'query'     =&gt; $fql,<br />
'callback'  =&gt; ''<br />
);<br />
$fqlResult   =   $facebook-&gt;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 &quot;&lt;div id='gallery'&gt;&quot;;<br />
foreach( $fqlResult as $keys =&gt; $values ){<br />
if( $values['caption'] == '' ){<br />
$caption = &quot;&quot;;<br />
}else{<br />
$caption = $values['caption'];<br />
}   <br />
echo &quot;&lt;a href=\&quot;&quot; . $values['src_big'] . &quot;\&quot; title=\&quot;&quot; . $caption . &quot;\&quot;&gt;&quot;;<br />
echo &quot;&lt;img src='&quot; . $values['src'] . &quot;' style='border: medium solid #ffffff;' /&gt;&quot;;<br />
echo &quot;&lt;/a&gt;&quot;; <br />
}<br />
echo &quot;&lt;/div&gt;&quot;;<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
&lt;script type=&quot;text/javascript&quot; src=&quot;jQuery-lightbox/js/jquery.js&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;jQuery-lightbox/js/jquery.lightbox-0.5.js&quot;&gt;&lt;/script&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jQuery-lightbox/css/jquery.lightbox-0.5.css&quot; media=&quot;screen&quot; /&gt;

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
&lt;script type=&quot;text/javascript&quot;&gt;<br />
$(function() {<br />
$('#gallery a').lightBox();<br />
});<br />
&lt;/script&gt;<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

    April 3, 2014 at 12:37 pm

    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

    January 18, 2014 at 1:31 pm

    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

    March 3, 2013 at 2:47 am

    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

    February 12, 2013 at 11:16 am

    It could be the album ID your calling. It could be incorrect. Try different variations of it and see how that works.

  • Nathan

    February 4, 2013 at 8:04 pm

    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

    January 9, 2013 at 10:30 pm

    Yep. Sure did. Thanks for pointing that out!

  • Peter

    January 9, 2013 at 8:40 am

    In your Example you got the album ID wrong!
    The correct aid would be: ‘221167777906963_68636’

  • Randy

    January 8, 2013 at 11:07 am

    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

    January 8, 2013 at 7:46 am

    Sorry, an empty gallery-div

  • Stijn

    January 8, 2013 at 7:29 am

    Hi, first of all: thanks for a clear tutorial. However, all i get echoed is an empty Any ideas? Thanks in advance!

  • eagles1405

    September 26, 2012 at 11:18 am

    Ditto. Please email me with a quote!

  • kingkenoah

    July 16, 2012 at 12:25 am

    I will pay you to do that on my website. send me an email.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • About
  • Work
  • Blog
  • Contact

RCNeil Development, LLC
info@rcneil.com

All Rights Reserved © 2022

  RCNeil

  • RT @wpmark: Being able to use block templates on custom post types and page template in the #WordPress block editor has been a… https://t.co/Ehza2TQH05, 8 hours ago

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.