2011-01-12 87 views
6

這是一個非常愚蠢的問題。我是一個Facebook的Javascript SDK的初學者。 所以我試圖使一個用戶的配置文件的圖像顯示 我用這個代碼如何使用FB.api('/ me/picture')來獲取個人資料圖片

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

它工作得很好,但我想了解如何使用FB.api('/me/picture')來顯示圖像。

回答

0

FB.api('/me/picture')將返回一個redirect到圖像URL,因此這將是沒有用的你:作爲documentation(閱讀部分)中提到
alt text
您所使用的方法是有效的。也許this是相關的,但我不知道它是否完全有效。

+0

這很有趣。我想知道fb.api('me/picture')有什麼用處?非常感謝你回覆 – user573451 2011-01-14 16:16:05

+0

@ user573451:好吧,我猜這個api存在於服務器端的目的'$ facebook-> api('/ me/picture');`,就像保存原始圖像(也許? ......但就客戶方而言,您是否擔心,我不認爲它有任何用處,並且您已經在使用正確的方式。 :-) – ifaour 2011-01-14 16:41:04

12

/me/picture(或/{user id}/picture)返回一個HTTP 301重定向到圖像位置,這樣你可以直接將其嵌入到一個<img src...

如果你要檢索的URL和你自己,你需要用它來專門要求它作爲一個現場,通過:

/{user id}?fields=picture 

/me/?fields=picture 

您可以包括其他領域也一樣,但我假設你現在只想要這張照片。

+0

`/ me/picture`是否會返回一個url(或一個對象)?你說你可以直接將它嵌入到' LazerSharks 2013-06-22 22:59:58

1

這是肯定出手,事實證明,與Facebook圖形API 2.5一起工作。 這是示例HTML請參閱我在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> 
相關問題