I am using graph-api provided by facebook. The version is 3.1.0. My code is working fine but it displays all the images of user irrespective of the albums.
I want to change my code so that user can see only images of the album he/she has selected.
I mean images shall be displayed album wise.
My code below:
index.php
<?php
/**********************************************************************
* Plugin Name: Facebook Plugin *
* Plugin URI: http://www.picpixa.com/ *
* Version: 1.0 *
* Author: Ashish Shah *
* Description: Plugin To Import Images From User's Facebook Account *
* as well as post the image of personalized product to *
* his/her facebook account *
**********************************************************************/
session_start();
include_once '/home/picpixa/wp-config.php';
include_once "fbmain.php";
ini_set("display_errors",1);
?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Facebook Images</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('Images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
function loader(){
$('#load').show();
}
function loadExistingImages(){
window.opener.$('#loader_img').show();
result=null;
window.opener.$('#fileupload').each(function () {
var that = this;
$.getJSON(this.action, function (result) {
if (result && result.length) {
window.opener.$(that).fileupload('option', 'done')
.call(that, null, {result: result});
//console.log('ss='+$('.table-striped tbody').find('.btn-danger').length);
if(window.opener.$('.table-striped tbody').find('.btn-danger').length>0){
window.opener.$('.coo-images-other-buttons').show();
}else{
window.opener.$('.coo-images-other-buttons').hide();
}
}
window.opener.$('#loader_img').hide();
if (window.opener.$('.table-striped tbody tr').length > 0)
{
window.opener.$('.table_tagline').show();
}
});
});
}
</script>
<script type="text/javascript">$('#load').hide();</script>
</head>
<?php
if(isset($_POST['copy']) && $_POST['facebook'])
{
$imgArray = $_POST['facebook'];
$current_user = wp_get_current_user();
if(isset($current_user->ID) && trim($current_user->ID)!='' && trim($current_user->ID)!=0){
$extraSessionStr = 'usr-'.md5($current_user->ID).'/';
$user = $current_user->ID;
}else{
$sesstionId = session_id();
$user = $sesstionId;
$extraSessionStr = $sesstionId.'/';
}
$i=1;
foreach ($imgArray as $img)
{
//$fileName=basename($img);
$imgExt = pathinfo($img); //This will become an array with keys ('dirname','basename','extension','filename')
$imageName = "FB-image";
$fileName=$imageName.".".$imgExt['extension'];
// Read file content
$file_content = file_get_contents($img);
//Check wether the file is exists or not rename the file if exists
if(!file_exists('/home/picpixa/server/php/files/'.$extraSessionStr.$fileName)){
file_put_contents('/home/picpixa/server/php/files/'.$extraSessionStr.$fileName, $file_content);
//file_put_contents('/home/picpixa/server/php/thumbnails/'.$extraSessionStr.$fileName, $file_content);
$i++;
}
else{
//echo "Entered in else part";
while(file_exists('/home/picpixa/server/php/files/'.$extraSessionStr.$fileName)){
$fileName = (string) $imageName.$i.".".$imgExt['extension'];
//echo "Value of i: $i<br>Image name: $fileName<br>";
$i++;
}
file_put_contents('/home/picpixa/server/php/files/'.$extraSessionStr.$fileName, $file_content);
}
//Get the image size
$imgsize=get_headers($img,1);
$imgsize = number_format(($imgsize["Content-Length"]/1024),2);
/* To create thumbnail */
// Max vert or horiz resolution
$maxsize=80;
// create new Imagick object
$image = new Imagick($img); //"input_image_filename_and_location"
// Resizes to whichever is larger, width or height
if($image->getImageHeight() <= $image->getImageWidth())
{
// Resize image using the lanczos resampling algorithm based on width
$image->resizeImage($maxsize,0,Imagick::FILTER_LANCZOS,1);
}
else
{
// Resize image using the lanczos resampling algorithm based on height
$image->resizeImage(0,$maxsize,Imagick::FILTER_LANCZOS,1);
}
// Set to use jpeg compression
$image->setImageCompression(Imagick::COMPRESSION_JPEG);
// Set compression level (1 lowest quality, 100 highest quality)
$image->setImageCompressionQuality(75);
// Strip out unneeded meta data
$image->stripImage();
// Writes resultant image to output directory
$image->writeImage('/home/picpixa/server/php/thumbnails/'.$extraSessionStr.$fileName); //"output_image_filename_and_location"
// Destroys Imagick object, freeing allocated resources in the process
$image->destroy();
}
?>
<script type="text/javascript">
//window.opener.$("#fileupload").append(div);
window.opener.$('tbody.files').find('tr').remove();
loadExistingImages();
</script>
<?php
echo "<h2>The selected images have been moved.<br></h2>";
echo "<h3>Please click on \"Proceed With Uploaded Images\" button to Proceed OR ";
echo "Click on the \"Upload More Images\" Button to upload more images.</h3>";
?>
<div class="modal-footer">
<input type='button' name='continue' value='Upload More Images' class='btn btn-primary' onclick='loader(); window.location.href="index.php";'>
<input type='button' name='closeWindow' value='Proceed With Uploaded Images' class='btn btn-primary' onClick="window.close();">
</div>
<?php
die();
}
elseif (isset($_POST['copy']))
{
echo "<h2>You have not selected any image(s) to move.</h2><br><br>";
echo "<h3>Please click on \"Close\" button to Close the window OR ";
echo "Click on the \"Upload Images\" Button to upload images.</h3>";
?>
<div class="modal-footer">
<input type='button' name='continue' value='Upload More Images' class='btn btn-primary' onclick='loader(); window.location.href="index.php";'>
<input type='button' name='closeWindow' value='Close' class='btn btn-primary' onClick="window.close();">
</div>
<?php
die();
}
?>
<script type="text/javascript">
function streamPublish(name, description, hrefTitle, hrefLink, userPrompt) {
FB.ui({method: 'feed',
message: userPrompt,
link: hrefLink,
caption: hrefTitle,
picture: ''
});
//http://developers.facebook.com/docs/reference/dialogs/feed/
}
function publishStream() {
streamPublish("Stream Publish", 'Checkout personalized products at www.picpixa.com. I found some of them are just awesome!', 'Checkout www.picpixa.com', 'http://www.picpixa.com', "Personalized Products");
}
</script>
<style type="text/css">
.box{
margin: 5px;
border: 1px solid #60729b;
padding: 5px;
width: 500px;
height: 200px;
overflow:auto;
background-color: #e6ebf8;
}
</style>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: '',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
</script>
<body>
<div id="load" class="loader"></div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="modal-footer">
<?php
echo "User: $user";
if (!$user) { ?>
<h1>You have to login using Facebook Login Button to see your uploaded images.</h1>
<a class='btn btn-primary' href="<?= $loginUrl ?>" onClick='loader()'><img src="Images/login.png"></a>
<?php } //else { ?>
<!-- <a class='btn btn-primary' href="<?= $logoutUrl ?>" onClick='loader()'><img src="Images/logout.png"></a>-->
<?php //} ?>
</div>
<!-- all time check if user session is valid or not -->
<?php if ($user) { ?>
<form method="post" action="index.php">
<div class="modal-body">
<!-- Data retrived from user profile are shown here -->
<?php
$i=0;
$showBtn=false;
$albums = $facebook->api("/me/albums");
foreach($albums['data'] as $album){
// get all photos for album
$photos = $facebook->api("/{$album['id']}/photos");
foreach($photos['data'] as $photo){
/* if($i%5 == 0)
{
echo "</tr>";
echo "<tr>";
}*/
?>
<div class="baby_img">
<input type="checkbox" id="facebook_<?=$i;?>" name="facebook[]" value="<?php echo $photo['source']?>" class="styled" />
<img src="<?php echo $photo['source']?>" width = "150px" height = "150px" class="img-responsive"/>
</div>
<?php
$i++;
$showBtn=true;
}
}
?>
</div>
<div class="clearfix"></div>
<div class="modal-footer">
<?php
if($showBtn){
echo"<input type='submit' name='copy' value='Copy Selected Files' class='btn btn-primary' onclick='loader()'>";
}
?>
<input type='button' name='closeWindow' value='Close This Window' class='btn btn-primary' onClick="window.close();">
</div>
</form>
<?php } ?>
</div>
</div>
</div>
</body>
</html>
can anyone help me please?
Note: It also gives script error of like: "Blocked loading mixed active content "http://connect.facebook.net/en_US/all.js" and "ReferenceError: FB is not defined FB.init({"
Update:
I have added one function to my code before closing the tag. Tha functio is as following:
<script type="text/javascript">
function showAlbum(albumId){
alert('Album Id'+albumId);
var fbhtml = '';
<?php
$albmId = albumId;
// get all photos for album
$i=0;
$photos = $facebook->api("/".$albmId."/photos");
foreach($photos['data'] as $photo){ ?>
fbhtml += '<div class="baby_img">';
fbhtml += '<input type="checkbox" id="facebook_<?php echo $i; ?>" name="facebook[]" value="<?php echo $photo["source"]; ?>" class="styled" />';
fbhtml += '<img src="<?php echo $photo["source"]; ?>" class="img-responsive" style="width:100px !important; height:100px !important;" />';
fbhtml += '</div>';
<?php
$i++;
$showBtn=true;
}
?>
$('#fbhtmlImage').html(fbhtml);
}
</script>
the function is working but I am not getting the desired output. It is getting the images which are not in my album. And not getting the images which are in the album.
solved using ajax
function showAlbum(albumId){
var fbhtml = '';
$.ajax({
type: "GET",
url: "fbphotos.php",
data: { albumId: albumId }
}).done(function(response) {
var response = jQuery.parseJSON(response );
if(response['data'].length>0)
{
for(var x=0; x<response['data'].length; x++){
fbhtml += '<div class="baby_img">';
fbhtml += '<input type="checkbox" id="facebook_'+x+'" name="facebook[]" value="'+response['data'][x]['source']+'" class="styled" />';
fbhtml += '<img src="'+response['data'][x]['source']+'" class="img-responsive" style="width:100px !important; height:100px !important;" />';
fbhtml += '</div>';
}
}
else
{
fbhtml = 'There are no image(s) in this album.';
}
$('#fbhtmlImage').html(fbhtml);
$('#fbmodal-footer').show();
$(".loader").fadeOut("slow");
});
}