2011-01-12 15 views
6

To bardzo głupie pytanie. Jestem początkującym z Facebook SDK. Więc staram się zrobić zdjęcie z profilu użytkownika, aby pokazać Kiedyś ten kodJak używać FB.api ("/ me/picture"), aby uzyskać obraz profilu

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

który pracował w porządku, ale staram się zrozumieć, jak korzystać FB.api('/me/picture') pokazać obraz.

Odpowiedz

0

FB.api('/me/picture') zwróci redirect do adresu URL obrazu, więc to będzie bezużyteczna dla Ciebie:
alt text
Sposób używasz jest ważne, jak wspomniano w punkcie (czytanie) documentation. Może this jest spokrewniony, ale nie wiem, czy to jest całkowicie poprawne czy nie.

+0

To interesujące. Zastanawiam się, jaki jest pożytek z fb.api ("me/picture")? Dziękuję bardzo za odpowiedź – user573451

+0

@ user573451: cóż, myślę, że api istnieje dla celów po stronie serwera '$ facebook-> api ('/ me/picture');', jak zapisywanie surowego obrazu (może?) Czy coś ... ale jeśli chodzi o stronę klienta, nie myślę o tym, żeby się do tego przyzwyczaić i już używasz poprawnej metody. :-) – ifaour

12

/me/picture (lub /{user id}/picture) zwraca HTTP 301 przekierować do lokalizacji obrazu, dzięki czemu można umieścić go bezpośrednio do <img src...

Jeśli chcesz pobrać adres URL i użyć go samemu trzeba specjalnie poprosić go jako pole, poprzez:

/{user id}?fields=picture 

lub

/me/?fields=picture 

Możesz dołączyć inne pola też, ale Zakładam, że właśnie chcesz teraz zdjęcie.

+0

czy '/ me/picture' zwraca adres URL (lub obiekt)? Powiedziałeś, że możesz umieścić go bezpośrednio w tagu ' 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

można uzyskać konkretne rozmiary pic profilu, a także:

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

     console.log(response.data.url); 

}); 

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

i kompletny demo login na stronie: Get Facebook Profile Picture with Javascript SDK

+1

Typ jest przydatny, jeśli nie chcesz określać dokładnego rozmiaru i chcesz uzyskać wartości rozmyte, takie jak małe, normalne, duże: https://developers.facebook.com/tools/explorer?method=GET&path=me%3Ffields%3Dpicture.type(normal)&version= – SilentDirge

1

to z pewnością strzał okazał się pracować z Facebook API wykres 2.5. To jest przykładowy HTML Zobacz zmiany, które wprowadziłem w funkcji 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> 
Powiązane problemy