I am using ionic native facebook for facebook login in my app. All the things are working fine but the issue is when I am getting user data this profile picture of the user is giving too small. When I am getting user data there is photoURL in data but this URL is too small like 30x30. Does anyone know what is the problem or is there another option to get a profile picture?
pass image width and height picture.width(720).height(720)
to this.fb.api(dataquery, [])
fbSignup() {
const dataquery = "me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)";
this.fb.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
this.fb.api(dataquery, []).then(profile => {
this.userData = { email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name'] }
console.log("User Data :" + JSON.stringify(response))
});
});
}
I solve it by adding this /picture?height=500 in photoUrl
Example : photoUrl = "https://graph.facebook.com/" + facebookUserId + "/picture?height=500"
Related
I am a newbie and am attempting to display an image that is from my Github profile vs hardcoding it into the HTML. Currently, I have coded the following and the object is being displayed in my Javascript console.
const APIURL = 'https://api.github.com/users/'
getUser('JetimLee')
async function getUser(username) {
try {
const {
data
} = await axios(APIURL + username)
console.log(data)
} catch (err) {
console.log(err)
}
}
My question is - how do I get the image from the profile to be displayed? Thank you so much in advance!
You have an avatar_url field, set it's value as source of an image tag in your html.
Example:
const data = await axios('link');
const imgTag = document.getElementById('git-user-id');
imgTag.setAttribute('src', data.avatar_url);
I'm developing ionic 2 app. I'm trying to get high quality image and then resize it to avatar photo.
My code:
_FBUserProfile() {
return new Promise((resolve, reject) => {
Facebook.api('me?fields=id,name,email,first_name,last_name,picture.width(600).height(600).as(picture_small),picture.width(360).height(360).as(picture_large)', [])
.then((profileData) => {
console.log(JSON.stringify(profileData));
return resolve(profileData);
}, (err) => {
console.log(JSON.stringify(err));
return reject(err);
});
});
}
But, the photo isn't good quality, since I guess I did something wrong with the resize in this line:
picture.width(600).height(600).as(picture_small),picture.width(360).height(360).as(picture_large)', [])
How can I get good quality of the photo?
If you want to get the public profile picture of the user and you know the user id from the api call then use this url for picture
profileData.picture="https://graph.facebook.com/"+profileData.id+"/picture?width=1024&height=1024";
You've got a couple of solutions, like using type large
id,name,email,first_name,last_name,picture.type(large)
As explained here: https://developers.facebook.com/docs/graph-api/reference/user/picture/
I have implemented a pure javascript function for sharing canvas content to an user's facebook wall. The implementation works, but the problem is:
Facebook does not approve the app, stating after review:
"publish_actions on Web - Your app's users must enter all content
in the user message field. Don't auto-populate the message field with
any content, including links and hashtags, even if you allow users to
edit the content before sharing. Watch this informational video for
more information, and see Platform Policy 2.3"
Afaik, there is no way to pass a base64 object through the FB.ui feed share dialogue with client side javascript only.
Question: Any workarounds or other ways go get a client side only canvas -> facebook share implementation that is passed by the Facebook app approval process?
The current implementation is as follows:
document.getElementById('facebook-link').onclick=function(){
FB.login(function (response) {
if (response.authResponse) {
window.authToken = response.authResponse.accessToken;
PostImageToFacebook(window.authToken);
} else {
}
}, {
scope: 'publish_actions'
});
};
function PostImageToFacebook(authToken) {
var imageData = canvas.toDataURL("image/png");
try {
blob = dataURItoBlob(imageData);
}
catch (e)
{
console.log(e);
}
var fd = new FormData();
fd.append("access_token", authToken);
fd.append("source", blob);
try {
$.ajax({
url: "https://graph.facebook.com/me/photos?access_token=" + authToken,
type: "POST",
data: fd,
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("success " + data);
},
error: function (shr, status, data) {
alert.log("error " + data + " Status " + shr.status);
},
complete: function () {
console.log("Posted to facebook");
$('#facebook-link').text('Ferdig delt :)').removeClass( "inProgress" );
}
});
} catch (e) {
console.log(e);
}
}
The implementation does not append any text, making me wonder why it does not comply with the Facebook Platform Policy section 2.3.
I had the same problem in an application. Although we have chosen to use the database, I believe it has a solution to your problem.
Really has no way to share a Base64 code by FB.Ui
But as the policies of Facebook, you are not required to use it.
You can create a custom dialog window for the user to view the image that is being posted and enter/confirm the message, and posting after this action.
As the explanatory video from Facebook, the message posted by the user can not be changed, then it should be approved without problems.
This is my app.js and i am looking to diplay the user id in the URL but it doesnt work.
$scope.auth = $firebaseSimpleLogin(new Firebase(FBURL));
var userID= $scope.auth.user.id;
$scope.comments = $firebase(new Firebase(FBURL+"//users"+userID+"//Cards"));
$scope.addComment = function(e) {
if (e.keyCode != 13) {
return;
}
if ($scope.auth.user === null) {
alert("You must be logged in to leave a comment");
} else {
$scope.comments.$add({
body: $scope.newComment,
name: $scope.auth.user.name, id: $scope.auth.user.id
});
$scope.newComment = "";
e.preventDefault();
}
}
}
]);
Anyone can help me in figuring it out , what i am doing wrong there?
Thank you.
And from where do you take id ? I don`t see somehow facebook login function.
[Edit] I am playing with that just now as i am new to that too. I think you are missing
$scope.auth.$login('facebook')
This is what is working for me, where from user i am grabbing id, name and so on.
//*** FB login
$scope.fbLogin=function(){
var fbaseRef=new Firebase(FBASE)
var loginObj=$firebaseSimpleLogin(fbaseRef);
console.log("Going fbLogin")
loginObj.$login('facebook').then(function(user){
console.log("FB Login ok",user)
},function(rejection){
console.log("FB Login failes",rejection)
})
}
Is there anyway to get the full-size profile picture using any facebook api?
http://graph.facebook.com/{ID}/picture?type=large is way to small.
Thanks :)
Set either the width or height to some arbitrarily large number:
https://graph.facebook.com/username_or_id/picture?width=9999
If the width and height are the same number, the photo is cropped to a square.
I think I use the simplest method to get the full profile picture. You can get full profile picture or you can set the profile picture dimension yourself:
$facebook->api(me?fields=picture.width(800).height(800))
You can set width and height as per your need. Though Facebook doesn't return the exact size asked for, It returns the closest dimension picture available with them.
found a way:
$albums = $facebook->api('/' . $user_id . '/albums');
foreach($albums['data'] as $album){
if ($album['name'] == "Profile Pictures"){
$photos = $facebook->api('/' . $album['id'] . '/photos');
$profile_pic = $photos['data'][0]['source'];
break;
}
}
As noted above, it appears that the cover photo of the profile album is a hi-res profile picture. I would check for the album type of "profile" rather than the name though, as the name may not be consistent across different languages, but the type should be.
To reduce the number of requests / parsing, you can use this fql:
"select cover_object_id from album where type='profile' and owner = user_id"
And then you can construct the image url with:
"https://graph.facebook.com/" + cover_object_id + "/picture&type=normal&access_token=" + access_token
Looks like there is no "large" type for this image, but the "normal" one is still quite large.
As noted above, this photo may be less accessible than the public profile picture. You need the user_photos or friend_photos permission to access it.
With Javascript you can get full size profile images like this
pass your accessToken to the getface() function from your FB.init call
function getface(accessToken){
FB.api('/me/friends', function (response) {
for (id in response.data) {
var homie=response.data[id].id
FB.api(homie+'/albums?access_token='+accessToken, function (aresponse) {
for (album in aresponse.data) {
if (aresponse.data[album].name == "Profile Pictures") {
FB.api(aresponse.data[album].id + "/photos", function(aresponse) {
console.log(aresponse.data[0].images[0].source);
});
}
}
});
}
});
}
For Angular:
getUserPicture(userId) {
FB.api('/' + userId, {fields: 'picture.width(800).height(800)'}, function(response) {
console.log('getUserPicture',response);
});
}
Profile pictures are scaled down to 125x125 on the facebook sever when they're uploaded, so as far as I know you can't get pictures bigger than that. How big is the picture you're getting?