After the first version of Facebook Album Script, I am here with its second and extended version. This album script allows you to embed user’s Facebook albums in your site in an easy and elegant manner. Here are the prime features of the script:
1. All albums listing
2. Show photos in fancy popup (no separate page to view photos)
3. Next-Previous Pagination
4. AJAX enabled
5. Show comments for each photo
6. Show likes for user comments
7. Fast performance for smooth user experience
1. All albums listing
2. Show photos in fancy popup (no separate page to view photos)
3. Next-Previous Pagination
4. AJAX enabled
5. Show comments for each photo
6. Show likes for user comments
7. Fast performance for smooth user experience
Don’t wait. Try it here.
Step by step code explained:
1. Create config file for basic Facebook configuration.
<?php
error_reporting(E_ERROR);
ini_set('display_errors', '1');
ini_set('max_execution_time','100');
require_once 'library/facebook.php';
try{
$app_id = "your_app_id";
$app_secret = "your_app_secret";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
if(is_null($facebook->getUser()))
{
header("Location:{$facebook->getLoginUrl(array('req_perms' => 'user_status,publish_stream,user_photos,user_likes,user_location,offline_access,user_photo_video_tags'))}");
exit;
}
$me = $facebook->api('/me');
}catch(Exception $e){
echo $e->getMessage();
echo '<p>Please try clearing your browser cookies or <a href="http://demos.frnzzz.com/fbAlbum/fbAlbum_v2.0/index.php.php">click here</a>.</p>';
die;
}
?>
2. Main markup file
<?php
require_once 'config.php';
?>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="comments.js"></script>
<title>WebSpeaks.in | Access facebook Albums on your site using PHP</title>
<script type="text/javascript">
jQuery(document).ready(function(){
});
</script>
</head>
<body>
<div id="main">
<?php
echo '<p class="hd">My Albums</p>';
try {
$albums = $facebook->api('/me/albums');
if(!empty($albums['data'])) {
foreach($albums['data'] as $album) {
$cover = "https://graph.facebook.com/{$album['id']}/picture?type=album&access_token={$facebook->getAccessToken()}";
echo '<div class="alb_cover" id="',$album['id'],'" title="',$album['name'],'">';
echo '<a href="javascript:;"><div class="cover_photo"><img src="',$cover,'" /></div></a>';
echo '<a href="javascript:;">'.'<div class="alb_title">',$album['name'],'</div></a>';
echo '</div>';
}
}
} catch (FacebookApiException $e) {
error_log($e);
var_dump($e);
}
?>
</div>
<div id="backgroundPopup"></div>
<div id="popupContact">
<table align="center">
<tr id="popup_head">
<td colspan="3"><a id="popupContactClose">Close</a></td>
</tr>
<tr>
<td><div id="prev" class="nextPrev"><a href="javascript:void(0)">«</a></div></td>
<td><div id="picHolder"></div></td>
<td><div id="next" class="nextPrev"><a href="javascript:void(0)">»</a></div></td>
</tr>
<tr>
<td colspan="3" class="commentsTd">
<div id="commentsHolder">
<table align="center" class="new_comment_table">
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
3. jQuery file that performs some magic
jQuery(document).ready(function()
{
var loaded = [];
var albums = [];
var album_id;
var cur_pic = 0;
var alb_name = '';
jQuery('div.alb_cover a').click(function(){
album_id = jQuery(this).parent().attr('id');
var cover_photo = jQuery(this).parent().find('div.cover_photo');
var cover = cover_photo.html();
var cover_height = cover_photo.css('height');
var cover_width = cover_photo.css('width');
alb_name = jQuery(this).parent().attr('title');
if ( !loaded[album_id] ) {
albums[album_id] = [];
jQuery.ajax({
'url':'ajax.php',
'dataType': 'json',
'data':'album_id=' + album_id,
'type':'POST',
'async':false,
'beforeSend': function(){
cover_photo.html('<img src="http://static.ak.connect.facebook.com/images/loaders/indicator_white_large.gif" />');
cover_photo.css({"height": cover_height,"width": cover_width});
},
'success':function(data){
loaded[album_id] = true;
albums[album_id] = data;
cover_photo.html(cover);
loadNextImage(album_id, 0);
}
});
}
centerPopup();
loadPopup();
});
function loadNextImage(album_id, step){
jQuery('div.alb_count').empty();
var next_pic = 0;
if(step == 0){
next_pic = 0;
}else if(step == 'next'){
next_pic = parseInt(cur_pic, 10)+1;
if(next_pic >= albums[album_id].length){
next_pic = 0;
}
}else{
next_pic = parseInt(cur_pic, 10)-1;
if(next_pic < 0){
next_pic = albums[album_id].length - 1;
}
}
cur_pic = next_pic;
jQuery('#picHolder').html('<img src="'+albums[album_id][next_pic]['source']+'" />');
loadComments(album_id);
}
function loadComments(album_id){
var comment_table = jQuery('#commentsHolder').find('table.new_comment_table');
comment_table.empty();
var ntr = '<div class="alb_count">Album:' + alb_name + ' ' + parseInt(cur_pic+1) +' of '+albums[album_id].length+'</div>';
if(albums[album_id][cur_pic]['name'] != ''){
ntr = albums[album_id][cur_pic]['name'] + ntr;
}
comment_table.append('<tr><td class="pic_name">' + ntr + '</td></tr>');
var comments = albums[album_id][cur_pic]['comments'];
if ( comments.length > 0 ){
for (var x in comments){
var from_id = comments[x]['from']['id'];
var from_name = comments[x]['from']['name'];
var msg = comments[x]['message'];
var time = comments[x]['created_time'].substring(0,10) + ' ' + comments[x]['created_time'].substring(11,19);
var likes = parseInt(comments[x]['likes'], 10);
if(likes > 0){
if(likes > 1){
var person = 'persons';
}else{
var person = 'person';
}
var likeHtm = '<img src="facebook_like_icon.png" />' + '<div class="count">' + likes + ' ' + person +'</div>';
}else{
var likeHtm = '';
}
var ctr = '<tr class="new_comment_row">';
ctr += '<td class="new_comment_text"><a class="prof_name" target="_blank" href="http://facebook.com/profile.php?id='+from_id+'">'+from_name+':</a> <span class="msg">'+msg+'</span><br><div class="comment_time">'+time+'</div><div class="comment_likes">'+likeHtm+'</div>';
ctr += '</td></tr>';
comment_table.append(ctr);
}
}
}
jQuery("#next").click(function(){
loadNextImage(album_id, 'next');
});
jQuery("#prev").click(function(){
loadNextImage(album_id, 'prev');
});
jQuery("#popupContactClose, .c_btn").click(function()
{
disablePopup();
});
jQuery(document).keypress(function(e){
if(e.keyCode==27)//Disable popup on pressing `ESC`
{
disablePopup();
}
});
function loadPopup(){
jQuery("#backgroundPopup").css({"opacity": "0.7"});
jQuery("#backgroundPopup").fadeIn("fast");
jQuery("#popupContact").fadeIn("slow");
}
function disablePopup(){
jQuery("#backgroundPopup").fadeOut("slow");
jQuery("#popupContact").fadeOut("slow");
}
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = jQuery("#popupContact").height();
var popupWidth = jQuery("#popupContact").width();
jQuery("#popupContact").css({"left": windowWidth/2-popupWidth/2});
jQuery("#popupContact").css({"position": "absolute",/*"top": windowHeight/2-popupHeight/2,*/"left": windowWidth/2-popupWidth/2});
jQuery("#backgroundPopup").css({"height": windowHeight});
}
function ifExists(str){
if(str=='undefined' || typeof(str)=='undefined' || str==''){
return false;
}else{
return true;
}
}
});
4. AJAX file
<?php
if( !isset($_REQUEST['album_id']) )
die("No direct access allowed!");
ini_set('max_execution_time','100');
$album_id = $_REQUEST['album_id'];
require_once '../library/facebook.php';
try{
$app_id = "your_app_id";
$app_secret = "your_app_secret";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
if(is_null($facebook->getUser()))
{
// header("Location:{$facebook->getLoginUrl(array('req_perms' => 'user_status,publish_stream,user_photos,user_likes,user_location,user_photo_video_tags'))}");
// exit;
}
$me = $facebook->api('/me');
}catch(Exception $e){
echo $e->getMessage();
die;
}
if($me){
try {
$params['fields'] = 'name,source,comments';
$params = http_build_query($params, null, '&');
$photos = $facebook->api("/$album_id/photos?$params");
$i = 0;
$album = array();
foreach( $photos['data'] as $photo ){
$album[$i] = array();
$album[$i]['photo_id'] = $photo['id'];
if(isset($photo['name'])){
$album[$i]['name'] = $photo['name'];
}else{
$album[$i]['name'] = '';
}
$album[$i]['source'] = $photo['source'];
if(isset($photo['from'])){
$album[$i]['from'] = $photo['from'];
}else{
$album[$i]['from'] = '';
}
$album[$i]['created_time'] = $photo['created_time'];
if(isset($photo['comments'])){
$album[$i]['comments'] = $photo['comments']['data'];
}else{
$album[$i]['comments'] = '';
}
if(isset($photo['likes'])){
$album[$i]['likes'] = $photo['likes'];
}else{
$album[$i]['likes'] = '';
}
$i++;
}
echo json_encode($album);
} catch (FacebookApiException $e) {
echo '<pre>';print_r($e);echo '</pre>';
$user = null;
}
} else {
echo 'User not found';
}
?>
5. CSS file for styling the application
body{font-family: "lucida grande",tahoma,verdana,arial,sans-serif;color:#3B5998;font-size:11px;}
a{
text-decoration:none;
}
div.alb_cover{
float: left;
margin:20px;
padding:5px;
}
div.cover_photo{
min-width:80px;
min-height:100px;
padding:7px;
text-align:center;
border: 1px solid #ECECEC;
}
div.cover_photo:hover{
border:1px solid #3B5998;
}
div.alb_title{
padding: 3px 0 0 0;
color:#3B5998!important;
}
#popupContact *{
border:0pt none;
margin:0pt;
padding:0pt;
text-align:left;
}
#popupContact body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
margin:0pt;
height:100%;
}
#popupContact a{
cursor: pointer;
text-decoration:none;
font-size:10px;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#FFFFFF;
z-index:1;
}
#popupContact{
background-color:#F9F9F9;
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
min-height:402px;
max-width: 960px;
min-width: 787px;
padding: 12px;
border:10px solid #FFFFFF;
z-index:2;
top: 10px;
overflow:hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 5px 3px rgba(0, 0, 0, 0.05), 0 5px 4px -3px rgba(0, 0, 0, 0.06);
}
#popupContactClose{
line-height:14px;
right:6px;
top:4px;
position:absolute;
display:block;
color:#000000;
}
#picHolder{
text-align:center;
max-width: 960px;
min-width: 740px;
}
#popup_head{
color:#333333!important;
text-align:center!important;
}
div.nextPrev a{
font-size: 24px!important;
font-weight: bold;
text-align:center;
color:#333333!important;
}
#commentsHolder{
overflow-y: auto;
margin-left:18px;
}
.new_comment_table{
clear:left;
overflow:hidden;
padding:5px 0 4px 5px;
font-size:11px;
margin:1px 0 0 25px;
}
.new_comment_table div.alb_count{
color:#333333;
float:right;
}
.new_comment_table td.pic_name{
padding:5px 0 5px 5px!important;
width:380px;
}
td.commentsTd{
border-top: 1px groove #333333;
padding: 10px 0 5px 0;
}
.new_comment_row{
background-color:#ECEFF5;
line-height: 16px;
padding:3px;
}
.new_comment_text{
width:300px;
margin-top:2px;
vertical-align:top;
border-bottom: 1px solid #D2D9E7;
padding: 5px 5px 4px!important;
}
.new_comment_text a.prof_name{
color:#3B5998;
font-weight: bold;
}
.new_comment_text span.msg{
color:#333333;
}
.comment_time{
color:#808080;
font-size:9px;
float:left;
}
.comment_likes{
color:#808080;
font-size:9px;
float:right;
}
.comment_likes img{
padding: 0 5px 0 0;
vertical-align:middle;
}
.comment_likes div.count{
padding: 0 5px 0 0!important;
float:right;
}
Thats all to make our application running on your site. Will be back with version 3 of this script. Till then enjoy it:)
How can I install this script? changed my appid + appsecret but is does’nt work get a blank page?
@Daniel, The script is to be used as it is. Please check if all paths are given right. Spacially the Facebook libraray file. Try printing the exact errors.
I’ve installed the script so out of the zip file but with php error on it still being blank “http://www.efusion.eu/fbAlbum/fbAlbum_v2.0/index.php”
@Daniel
In config.php at line 6 please change the line as:
From:
require_once ‘../library/facebook.php’;
To:
require_once ‘library/facebook.php’;
This may be possible cause.
is it also possible to get the fotos of an public facebook page where I am the owner? http://www.facebook.com/FightSceneNL
we use your given script but this show the error .
i m using your demo http://demos.frnzzz.com/fbAlbum/photos.php it also show the error can you give me right info and script what is the issue.
the error are “API Error Code: 100
API Error Description: Invalid parameter
Error Message: Please migrate to OAuth2 and use new /dialog/oauth endpoint. return_session is no longer available.”