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,<?php $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>'; print_r($json_output); echo '</pre>'; echo $json_output['data'][0]['images']['0']['source']; ?>Or if you want to use javascript an example would be:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script>
</head>
<body onLoad="fbFetch()">
<div>Loading...</div>
<script>
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.
$.getJSON(url,function(json){
var html = "<ul>";
//loop through and within data array's retrieve the message variable.
$.each(json.data,function(i,fb){
html += "<li><img alt='"+ fb.from.name +"' height='" + fb.height + "' width='" +
fb.width + "' src='" + fb.picture + "'/></li><div style='clear:both;'> </div>";
});
html += "</ul>";
//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity:1}, 500);
});
};
</script>
</body>
</html>
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.