1. Gets photo albums and photos of a facebook fan page (using Facebook PHP SDK andFQL).
2. Display these photos to a webpage (assuming it is your website.).
3. Use jQuery Lightbox to make awesome images presentation.
 |
| Show your facebook photos to your website |
This technique has the following Advantages:
1. You save your server disk space.
2. You got instant photo manager (facebook photos)
3. You save bandwidth since the photos shown in your website are loaded from facebook's repository.
4. Please add your comment if you know other advantages.
Risks:
1. When facebook is down (Well, I never encounter facebook was down)
2. Facebook is not responsible if you lost your data. (Read section 15 of their terms)
3. Please add your comment if you know other disadvantages or risks.
2. Our index.php well have the following code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>The Code Of A Ninja Dummy Page Images</title>
</head>
<body>
<div style='font-size: 16px; font-weight: bold; margin: 0 0 10px 0;'>
This album is synchronized with this
<a href='https://www.facebook.com/pages/COAN-Dummy-Page/221167777906963?sk=photos'>
Dummy Page Album
</a>
</div>
<?php
//include the facebook PHP SDK
require 'fb-sdk/src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'change_this_to_your_app_id',
'secret' => 'change_this_to_your_app_secret',
'cookie' => true, // enable optional cookie support
));
//defining action index
isset( $_REQUEST['action'] ) ? $action = $_REQUEST['action'] : $action = "";
//if there's no action requested
if( $action == ''){
echo "<p>COAN Dummy Page Albums</p>";
//Do the FQL to select the albums of my Dummy page
//The ID of my Dummy page is 221167777906963
//which also specifies the owner of the album
//To get the ID of the owner, just look at the URL
//I got https://www.facebook.com/pages/COAN-Dummy-Page/221167777906963
//In case you don't see it, browse one of its albums and
//get the number after the last dot
//I got https://www.facebook.com/media/set/?set=a.221168737906867.68636.221167777906963
$fql = "SELECT aid, cover_pid, name FROM album WHERE owner=221167777906963";
$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $facebook->api($param);
foreach( $fqlResult as $keys => $values ){
//we will do another query
//to get album cover
$fql2 = "select src from photo where pid = '" . $values['cover_pid'] . "'";
$param2 = array(
'method' => 'fql.query',
'query' => $fql2,
'callback' => ''
);
$fqlResult2 = $facebook->api($param2);
foreach( $fqlResult2 as $keys2 => $values2){
$album_cover = $values2['src'];
}
echo "<div style='padding: 10px; width: 150px; height: 170px; float: left;'>";
echo "<a href='index.php?action=list_pics&aid=" . $values['aid'] . "&name=" . $values['name'] . "'>";
echo "<img src='$album_cover' border='1'>";
echo "</a><br />";
echo $values['name'];
echo "</div>";
}
}
//when the user clicked an album
//it will show or list all the pictures
//on that album
if( $action == 'list_pics'){
isset( $_GET['name'] ) ? $album_name = $_GET['name'] : $album_name = "";
echo "<div><a href='index.php'>Back To Albums</a> | Album Name: <b>" . $album_name . "</b></div>";
$fql = "SELECT pid, src, src_small, src_big, caption FROM photo WHERE aid = '" . $_REQUEST['aid'] ."' ORDER BY created DESC";
$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $facebook->api($param);
//so that jQuery lightbox will pop up
//once the image was clicked
echo "<div id='gallery'>";
foreach( $fqlResult as $keys => $values ){
if( $values['caption'] == '' ){
$caption = "";
}else{
$caption = $values['caption'];
}
echo "<div style='padding: 10px; width: 150px; height: 170px; float: left;'>";
echo "<a href=\"" . $values['src_big'] . "\" title=\"" . $caption . "\">";
echo "<img src='" . $values['src'] . "' style='border: medium solid #ffffff;' />";
echo "</a>";
echo "</div>";
}
echo "</div>";
}
?>
<!-- jQuery lightbox include script -->
<script type="text/javascript" src="jQuery-lightbox/js/jquery.js"></script>
<script type="text/javascript" src="jQuery-lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<!-- END JLIGHTBOX -->
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>The Code Of A Ninja Dummy Page Images</title>
</head>
<body>
<div style='font-size: 16px; font-weight: bold; margin: 0 0 10px 0;'>
This album is synchronized with this
<a href='https://www.facebook.com/pages/COAN-Dummy-Page/221167777906963?sk=photos'>
Dummy Page Album
</a>
</div>
<?php
//include the facebook PHP SDK
require 'fb-sdk/src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'change_this_to_your_app_id',
'secret' => 'change_this_to_your_app_secret',
'cookie' => true, // enable optional cookie support
));
//defining action index
isset( $_REQUEST['action'] ) ? $action = $_REQUEST['action'] : $action = "";
//if there's no action requested
if( $action == ''){
echo "<p>COAN Dummy Page Albums</p>";
//Do the FQL to select the albums of my Dummy page
//The ID of my Dummy page is 221167777906963
//which also specifies the owner of the album
//To get the ID of the owner, just look at the URL
//I got https://www.facebook.com/pages/COAN-Dummy-Page/221167777906963
//In case you don't see it, browse one of its albums and
//get the number after the last dot
//I got https://www.facebook.com/media/set/?set=a.221168737906867.68636.221167777906963
$fql = "SELECT aid, cover_pid, name FROM album WHERE owner=221167777906963";
$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $facebook->api($param);
foreach( $fqlResult as $keys => $values ){
//we will do another query
//to get album cover
$fql2 = "select src from photo where pid = '" . $values['cover_pid'] . "'";
$param2 = array(
'method' => 'fql.query',
'query' => $fql2,
'callback' => ''
);
$fqlResult2 = $facebook->api($param2);
foreach( $fqlResult2 as $keys2 => $values2){
$album_cover = $values2['src'];
}
echo "<div style='padding: 10px; width: 150px; height: 170px; float: left;'>";
echo "<a href='index.php?action=list_pics&aid=" . $values['aid'] . "&name=" . $values['name'] . "'>";
echo "<img src='$album_cover' border='1'>";
echo "</a><br />";
echo $values['name'];
echo "</div>";
}
}
//when the user clicked an album
//it will show or list all the pictures
//on that album
if( $action == 'list_pics'){
isset( $_GET['name'] ) ? $album_name = $_GET['name'] : $album_name = "";
echo "<div><a href='index.php'>Back To Albums</a> | Album Name: <b>" . $album_name . "</b></div>";
$fql = "SELECT pid, src, src_small, src_big, caption FROM photo WHERE aid = '" . $_REQUEST['aid'] ."' ORDER BY created DESC";
$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $facebook->api($param);
//so that jQuery lightbox will pop up
//once the image was clicked
echo "<div id='gallery'>";
foreach( $fqlResult as $keys => $values ){
if( $values['caption'] == '' ){
$caption = "";
}else{
$caption = $values['caption'];
}
echo "<div style='padding: 10px; width: 150px; height: 170px; float: left;'>";
echo "<a href=\"" . $values['src_big'] . "\" title=\"" . $caption . "\">";
echo "<img src='" . $values['src'] . "' style='border: medium solid #ffffff;' />";
echo "</a>";
echo "</div>";
}
echo "</div>";
}
?>
<!-- jQuery lightbox include script -->
<script type="text/javascript" src="jQuery-lightbox/js/jquery.js"></script>
<script type="text/javascript" src="jQuery-lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<!-- END JLIGHTBOX -->
</body>
</html>
There are lots of other album information that you can retrieve. Not only album information, but also other information visible on facebook. Just check the availabe tables that you can query on facebook. Facebook Query Language (FQL) is of great help too since we are already familiar with SQL. We don't have much to study. :)
That's it! :)
0 comments:
Post a Comment