2011-01-12 203 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> 
相关问题