CJB Interactive website design
our website design blog from cjb – i

Building a facebook gallery in own website

We were looking for a way to integrate a facebook gallery into a clients website, so that they could update the gallery on there facebook page and that be transfered to the gallery on their own website. The way of approaching this was by using the facebook graph api. This allows you to get information from a facebook page and into your own website. The first thing to do is look at facebook's api page, which is here: http://developers.facebook.com/docs/reference/api/ You will need to login to facebook to be able to see the api page. The next thing you need is the id of the gallery [theid], this can be found in the url of the gallery. There are a few numbers but the one that you want is normall after the "a." and the "." before the user id. If you copy that then use the following url: https://graph.facebook.com/[theid]/photos This should give you a list of the photos in an array. The trick is then to use the array in either JSON or php as below,

$jsonurl = "https://graph.facebook.com/[theid]/photos";
$json = file_get_contents($jsonurl,0,null,null);
$json_output = json_decode($json);

$json_output = json_decode($json, true);

echo '<pre>';
echo '</pre>';

echo $json_output['data'][0]['images']['0']['source'];

Or if you want to use javascript an example would be:
<!DOCTYPE html>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
<body onLoad="fbFetch()">

function fbFetch(){
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?'
to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/198234086888111/photos?limit=5&callback=?";

//Use jQuery getJSON method to fetch the data from the url and then create our unordered list 
with the relevant data.
var html = "<ul>";

//loop through and within data array's retrieve the message variable.
html += "<li><img alt='"+ fb.from.name +"' height='" + fb.height + "' width='" +
fb.width + "' src='" + fb.picture + "'/></li><div style='clear:both;'>&nbsp;</div>";

html += "</ul>";

//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').animate({opacity:1}, 500);


That's a quick guide to using images but you can use other things as well using the technique above but replacing the photos in the call url with other facebook calls such as:
feed The Page's wall No access token required An Array of Post objects
picture The Page's profile picture No access token required Returns a HTTP 302 with the URL of the user's profile picture
tagged The photos, videos, and posts in which the Page has been tagged No access token required An heterogeneous array of Photo, Video or Post objects
links The Page's posted links No access token required An array of link objects
photos The Page's uploaded photos No access token required An array of Photo objects
groups Groups the Page belongs to No access token required An array containing group id, version, name and unread fields
albums The photo albums the Page has uploaded No access token required An array of Album objects
statuses The Page's status updates No access token required An array of Status message objects
videos The videos the Page has uploaded No access token required An array of Video objects
notes The Page's notes No access token required An array of Note objects
posts The Page's own posts No access token required An array of Post objects
events The events the Page is attending No access token required An array containing event id, name, start_time, end_time, location and rsvp_status
checkins Checkins made by friends of the current session user Requires friends_checkins permissions An array of Checkin objects

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader.

No comments yet.

Sorry, the comment form is closed at this time.