2011-01-12 17 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')は、画像URLにredirectを返しますので、それはあなたのために役に立たないだろう:documentation(読取部)で述べたように、使用している
alt text
方法が有効です。たぶんthisが関係しているかもしれませんが、それが完全に有効かどうかわかりません。

+0

興味深いです。 fb.api( 'me/picture')の使い方は何ですか?返信のためにありがとうございます – user573451

+0

@ user573451:まあ、私は、サーバ側の目的のために '$ facebook-> api( '/ me/picture');'のように、生のイメージ(多分? ...クライアント側があなたの懸念事項である限り、私はそれを使用することは考えておらず、すでに正しい方法を使用しています。 :-) – ifaour

12

/me/picture(または/{user id}/picture)は、あなたがURLを取得し、それを自分で使用する場合は、具体的としてそれを要求する必要が<img src...

に直接埋め込むことができますので、301は画像の場所にHTTPリダイレクトを返しますフィールドは、経由:

/{user id}?fields=picture 

または

/me/?fields=picture 

あなたも他のフィールドを含めることができますが、私は今あなたが写真をほしいと思っています。

+0

'/ me/picture'はURL(またはオブジェクト)を返しますか?あなたはそれを ' 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

あなたにも、プロファイルPICの特定のサイズを取得することができます:

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

     console.log(response.data.url); 

}); 

Facebook documentation to see what different picture sizes you can getを参照してください。で

、ログインして完全なデモ:Get Facebook Profile Picture with Javascript SDK

+1

正確なサイズを指定する必要がなく、小さく、普通、大などのファジー値が必要な場合は、タイプは便利です。 https://developers.facebook.com/tools/explorer?method=GET&path=me%3Ffields%3Dpicture.type(normal)&version= – SilentDirge

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> 
関連する問題