Geek Answers Handbook

How to use FB.api ('/ me / picture') to get a profile image

This is a very stupid question. I start with the javascript SDK on facebook. So I'm trying to make a user profile picture to show I used this code

FB.api('/me', function(response) { document.getElementById('login').style.display = "block"; document.getElementById('login').innerHTML = '<img src="http://graph.facebook.com/' + response.id + '/picture" />'; });

which worked fine, but I'm trying to figure out how to use FB.api('/me/picture') to display an image.

+6
facebook facebook-graph-api
source share
4 answers

/me/picture (or /{user id}/picture ) returns an HTTP 301 redirect to the image location, so you can embed it directly in <img src...

If you want to get the URL and use it yourself, you need to request it as a field using:

  /{user id}?fields=picture

or

  /me/?fields=picture

You can include other fields, but I assume that you just want a photo right now.

+13
source share

You can also get specific pic profile sizes:

 FB.api("/me/picture?width=180&height=180", function(response) { console.log(response.data.url); });

See the Facebook documentation for what different image sizes you can get .

And a full demo with a login at: Get a Facebook profile image using the Javascript SDK

+9
source share

This is a confident shot, proven for working with the facebook api 2.5 graph. This is an example of HTML. See Changes I made to the FB.api () function.

  <!DOCTYPE html> <html> <head> <title>Facebook Login JavaScript Example</title> <meta charset="UTF-8"> </head> <body> <!-- Below we include the Login Button social plugin. This button uses the JavaScript SDK to present a graphical Login button that triggers the FB.login() function when clicked. --> <img src="" id="profileImage"/> <div id="status"> </div> </body> <script> // This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); // The response object is returned with a status field that lets the // app know the current login status of the person. // Full docs on the response object can be found in the documentation // for FB.getLoginStatus(). if (response.status === 'connected') { // Logged into your app and Facebook. testAPI(); } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } } // This function is called when someone finishes with the Login // Button. See the onlogin handler attached to it in the sample // code below. function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } window.fbAsyncInit = function() { FB.init({ appId : 'XXXXXXXXXXXX', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.5' // use graph api version 2.5 }); // Now that we've initialized the JavaScript SDK, we call //FB.getLoginStatus(). This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide. They can be: // // 1. Logged into your app ('connected') // 2. Logged into Facebook, but not your app ('not_authorized') // 3. Not logged into Facebook and can't tell if they are logged into // your app or not. // // These three cases are handled in the callback function. FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }; // Load the SDK asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // Here we run a very simple test of the Graph API after login is // successful. See statusChangeCallback() for when this call is made. function testAPI() { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); console.log('Successful login for: ' + response.id); console.log('Successful login for: ' + response.email); var im = document.getElementById("profileImage").setAttribute("src", "http://graph.facebook.com/" + response.id + "/picture?type=normal"); document.getElementById('username').innerHTML =response.name; }); } </script> </html>
+1
source share

FB.api('/me/picture') will return a redirect to the image URL, so this will be useless to you:
alt text
The method of use acts as indicated in the documentation (section "Reading"). It may be , but I don’t know if it is completely or not.

0
source share

More articles:


All Articles