How to save facebook user gallery image from url to directory? - php

Question

I am using this code to save user gallery images on my website.First when user logged in then all gallery images loads and when user will select any image then i need to save that image in a directory. This is my code. Image is saveing with the name but image size is zero.
$file = file_get_contents('https://graph.facebook.com/[Fb-Photo-ID]/picture?width=378&height=378&access_token=[Access-Token]');
$img = file_put_contents($target_dir['path'].'/'."facebook3.jpg",$file);
This is code of image gallery.
<script>
/**
* This is the getPhoto library
*/
function makeFacebookPhotoURL( id, accessToken ) {
//alert(id);
return 'https://graph.facebook.com/v2.6/' + id + '/picture?access_token=' + accessToken;
}
function login( callback ) {
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
if (callback) {
callback(response);
}
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'publish_actions,user_location,user_photos,email'} );
}
function getAlbums( callback ) {
FB.api(
'/me/albums',
{fields: 'id,cover_photo'},
function(albumResponse) {
console.log( ' got albums ' );
if (callback) {
callback(albumResponse);
console.log(albumResponse);
}
}
);
}
function getPhotosForAlbumId( albumId, callback ) {
//alert(albumId);
console.log(albumId);
FB.api(
'/'+albumId+'/photos',
{fields: 'id'},
function(albumPhotosResponse) {
console.log( ' got photos for album ' + albumId );
if (callback) {
callback( albumId, albumPhotosResponse );
}
}
);
}
function getLikesForPhotoId( photoId, callback ) {
FB.api(
'/'+albumId+'/photos/'+photoId+'/likes',
{},
function(photoLikesResponse) {
console.log(photoLikesResponse);
if (callback) {
callback( photoId, photoLikesResponse );
}
}
);
}
function getPhotos(callback) {
var allPhotos = [];
var accessToken = '';
login(function(loginResponse) {
accessToken = loginResponse.authResponse.accessToken || '';
//console.log(accessToken);
getAlbums(function(albumResponse) {
var i, album, deferreds = {}, listOfDeferreds = [];
for (i = 0; i < albumResponse.data.length; i++) {
album = albumResponse.data[i];
deferreds[album.id] = $.Deferred();
listOfDeferreds.push( deferreds[album.id] );
getPhotosForAlbumId( album.id, function( albumId, albumPhotosResponse ) {
var i, facebookPhoto;
for (i = 0; i < albumPhotosResponse.data.length; i++) {
facebookPhoto = albumPhotosResponse.data[i];
allPhotos.push({
/* 'id' : facebookPhoto.id,
'added' : facebookPhoto.created_time, */
'url' : makeFacebookPhotoURL( facebookPhoto.id, accessToken )
});
}
deferreds[albumId].resolve();
});
}
$.when.apply($, listOfDeferreds ).then( function() {
if (callback) {
callback( allPhotos );
}
}, function( error ) {
if (callback) {
callback( allPhotos, error );
}
});
});
});
}
</script>
<script>
/**
* This is the bootstrap / app script
*/
// wait for DOM and facebook auth
var docReady = $.Deferred();
var facebookReady = $.Deferred();
$(document).ready(docReady.resolve);
window.fbAsyncInit = function() {
FB.init({
appId : '00000000000',
channelUrl : '//conor.lavos.local/channel.html',
status : true,
cookie : true,
xfbml : true
});
facebookReady.resolve();
};
$.when(docReady, facebookReady).then(function() {
if (typeof getPhotos !== 'undefined') {
getPhotos( function( photos ) {
//console.log(photos);
var str= JSON.stringify(photos);
var contact=jQuery.parseJSON(str);
$.each( photos, function( index, value ){
$.each( value, function( index1, value1 ){
console.log(value);
//console.log( index1+value1);
//console.log( index1+value1);
//console.log( index1+value1);
$("#images").append('<img height="100" width="150" src='+value1+' />');
$("a.myimg img").click(function()
{
var imgSrc = $(this).attr('src');
$("#fbimg").val(imgSrc);
});
});
});
});
}
});
</script>

Answer 1

The problem is that you are using FB API in incorrect way.
You should have version of your API request
check access_token -> whether it has correct wright ( user_photos )
in such way of request you won't receive image content. You can receive only link on static image.
So only after receiving of image - you can save it
Your link should be like :
https://graph.facebook.com/v2.6/[photo_Id]/picture?access_token=[access_token_with_wrights]
this will return JSON data kind of :
{
"data": {
"is_silhouette": false,
"url": "https://scontent.xx.fbcdn.net/[image_url]"
}
}
read more here and you can add additional params for thumbs ( aka "images" )
UPDATE
so in your way it would be like :
$jsonstring = json_decode(file_get_contents("https://graph.facebook.com/v2.6/[photo_Id]?fields=picture,images&access_token=[access_token_with_wrights]
"));
$file = file_get_contents($jsonstring['images'][0]['source']) /* chose your size */
$img = file_put_contents($target_dir['path'].'/'."facebook3.jpg",$file);
OR use FB PHP SDK
UPDATE #2
If you received static link to image from JS => just use it, not the graphApi request. It means that you can SEND ALREADY RECEIVED LINKS to server side. And they should be like https://scontent.xx.fbcdn.net/XXXXXX and after receiving them on server side you can just use them. and make
$file = file_get_contents("https://scontent.xx.fbcdn.net/");
But link should not be on http://graph.facebook.com!
UPDATE 3
Yes, it's correct request ( from question ).
JS code for images with static path:
FB.api(
'/' + albumId + '/photos',
{ fields: 'id,images' }, /* main is images array in response */
function ( albumPhotosResponse ) {
console.log( ' got photos for album ' + albumId );
if ( callback ) {
callback( albumId, albumPhotosResponse );
}
} );
parse the path for image from there.