2011-01-12 13 views
6

Questa è una domanda molto sciocca. Sono un principiante con Facebook Javascript SDK. Così sto cercando di fare un'immagine del profilo utente per mostrare ho usato questo codiceCome utilizzare FB.api ('/ me/picture') per ottenere l'immagine del profilo

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

che funzionava bene, ma sto cercando di capire come utilizzare FB.api('/me/picture') per visualizzare l'immagine.

risposta

0

FB.api('/me/picture') restituirà un redirect per l'URL dell'immagine, così sarà di alcuna utilità per voi:
alt text
Il modo in cui si sta utilizzando è valida come indicato nella (sezione di lettura) documentation. Forse this è correlato ma non so se è totalmente valido o meno.

+0

è interessante. Mi chiedo a cosa serve fb.api ('me/picture')? Grazie mille per la risposta – user573451

+0

@ user573451: beh, suppongo che l'api esista per scopi lato server '$ facebook-> api ('/ me/picture');', come salvare l'immagine raw (forse?) O qualcosa del genere ... ma per quanto riguarda il lato client è la tua preoccupazione, non penso di usarlo e stai già usando il modo corretto. :-) – ifaour

12

/me/picture (o /{user id}/picture) restituisce un HTTP redirect 301 alla posizione dell'immagine in modo da poter inserire direttamente in un <img src...

Se si desidera recuperare l'URL e utilizzare da soli è necessario richiedere specificamente come campo, via:

/{user id}?fields=picture 

o

/me/?fields=picture 

È possibile includere altri campi, ma Suppongo che tu voglia solo la foto in questo momento.

+0

fa '/ me/picture' restituisce un url (o un oggetto)? Hai detto che puoi incorporarlo direttamente in un tag ' LazerSharks

+1

'/me/picture' returns a HTTP 301 redirect to the image, '?fields=picture' returns the URL as a field of the JSON response – Igy

+0

interesting... wonder why they need to provide a http 301 redirect... – LazerSharks

9

È possibile ottenere dimensioni specifiche del profilo pic così:

FB.api("/me/picture?width=180&height=180", function(response) { 

     console.log(response.data.url); 

}); 

Vedere le Facebook documentation to see what different picture sizes you can get.

e una demo completa di login a: Get Facebook Profile Picture with Javascript SDK

+1

Il tipo è utile se non vuoi specificare una dimensione precisa e vuoi solo un valore fuzzy come piccolo, normale, grande: https://developers.facebook.com/tools/explorer?method=GET&path=me%3Ffields%3Dpicture.type(normal)&version= – SilentDirge

1

Questo è sicuro colpo, ha dimostrato di essere lavorare con il grafico facebook api 2.5. Questo è l'esempio HTML Si prega di vedere le modifiche che ho apportato nella funzione FB.api().

<!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> 
Problemi correlati