Как использовать FB.api ('/ me / picture'), чтобы получить изображение профиля - PullRequest
7 голосов
/ 13 января 2011

Это очень глупый вопрос. Я новичок в Facebook Javascript SDK. Поэтому я пытаюсь сделать изображение профиля пользователя, чтобы показать Я использовал этот код

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'), чтобы показать изображение.

Ответы [ 5 ]

14 голосов
/ 25 октября 2011

/me/picture (или /{user id}/picture) возвращает перенаправление HTTP 301 в местоположение изображения, чтобы вы могли вставить его непосредственно в <img src...

Если вы хотите получить URL-адрес и использовать его самостоятельно, вам нужно специально запросить его как поле, используя:

 /{user id}?fields=picture

или

 /me/?fields=picture

Вы также можете включить другие поля, но я предполагаю, что вы просто хотите фотографию прямо сейчас.

9 голосов
/ 05 апреля 2013

Вы также можете получить определенные размеры изображения профиля:

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

        console.log(response.data.url);

});  

См. Документацию Facebook, чтобы узнать, какие размеры изображения вы можете получить .

И полное демо с логином по адресу: Получить изображение профиля Facebook с Javascript SDK

1 голос
/ 02 сентября 2016

Это верный выстрел, Оказалось, что работает с Facebook Graph 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>
0 голосов
/ 15 сентября 2018

Я получаю изображение профиля Facebook Все размеры

Размеры профиля изображения

значение = 24 32 40 50 60 74 80 86 100 111 120 130 148 160 200 240 320 480 720 960 1440

CURL

https://graph.facebook.com/v3.1/me?fields=picture.width(value).height(2000)&access_token={}
0 голосов
/ 13 января 2011

FB.api('/me/picture') вернет перенаправление на URL изображения, так что оно будет бесполезно для вас:
alt text
Способ, которым вы пользуетесь, действителен, как указано в документации (раздел «Чтение»). Может быть это связано, но я не знаю, полностью ли это или нет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...