我正在使用facebook提供的graph-api。版本是3.1.0。 我的代码工作正常但它显示了用户的所有图像而不管相册。
我想更改我的代码，以便用户只能看到他/她选择的相册的图像。
我的意思是图像应以专辑方式显示。
我的代码如下：
的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>
有人可以帮我吗？
注意：它还会出现类似的脚本错误：＆＃34;阻止加载混合活动内容＆＃34; http://connect.facebook.net/en_US/all.js＆＃34;和＆＃34; ReferenceError：FB未定义 FB.init（{＆＃34;
更新
在关闭标记之前，我在代码中添加了一个函数。 Tha功能如下：
<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>
该功能正常，但我没有得到所需的输出。 它正在获取不在我的相册中的图像。并没有得到相册中的图像。
答案 0 :(得分：1)
使用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");
});
}
答案 1 :(得分：0)
这可以作为你的答案，但更多的是我的评论，但它很长，这就是我在这里发布的原因
在你的代码的这一部分，你已经拥有了你想要的东西。第一个循环遍历所有专辑，因此您可以使用album.name显示专辑，然后您可以传递ID（无论您想要的是，如点击链接），以显示相应的照片。
点击此处查看我对您的代码的评论：
<?php
$albums = $facebook->api("/me/albums"); //This fetches all the albums
foreach($albums['data'] as $album){ //This loops every available album
//Here you can get the name of the album
//by $album['name']
//and id by $album['id']
//You can have links here
echo '<a href="#" onclick="showAlbum('.$album['id'].')">'.$album['name'].'</a>';
}
?>
这是javascript函数：
<script>
function showAlbum(albumId){
// get all photos for album
//use Js SDK here not the php SDK to load the images
//If you want to still use the php sdk then make an ajax call
//to the file which can return images of specific album by id
}
</script>