如何使用FB.api('/me/picture')获取头像

发布于 2024-10-11 21:26:33 字数 393 浏览 2 评论 0原文

这是一个非常愚蠢的问题。我是 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') 来显示图像。

原文

This is a very silly question. I'm a beginner with facebook Javascript SDK.
So I'm trying to make a the user's profile image to show
I used this code

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

which worked fine, but I'm trying to understand how to use FB.api('/me/picture') to show the image.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

中性美 2024-10-18 21:26:33

/me/picture（或 /{user id}/picture）返回到图像位置的 HTTP 301 重定向，以便您可以将其直接嵌入到 < img src...

如果您想检索 URL 并自己使用它，您需要将其作为字段专门请求，通过 :

 /{user id}?fields=picture

或

 /me/?fields=picture

您也可以包含其他字段，但我假设您只想要照片现在。

/me/picture (or /{user id}/picture) returns an HTTP 301 redirect to the image location so you can embed it directly into an <img src...

If you want to retrieve the URL and use it yourself you need to specifically request it as a field, via :

 /{user id}?fields=picture

 /me/?fields=picture

You can include other fields too, but I'm assuming you just want the photo right now.

回复收藏 0 原文

难得心□动 2024-10-18 21:26:33

您还可以获得个人资料图片的具体尺寸：

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

        console.log(response.data.url);

});

请参阅 Facebook 文档，了解您需要的不同图片尺寸可以获得。

完整演示请登录：获取 Facebook 个人资料图片JavaScript SDK

You can get specific sizes of the profile pic as well:

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

        console.log(response.data.url);

});

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

And a complete demo with login at: Get Facebook Profile Picture with Javascript SDK

回复收藏 0 原文

本宫微胖 2024-10-18 21:26:33

这是肯定的，事实证明可以与 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>

This is sure shot, Proved to be working with facebook graph api 2.5.
This is the sample HTML Please see the changes I have made in FB.api() function.

 <!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 原文

三生殊途 2024-10-18 21:26:33

我获取 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={}

I get the Facebook profile picture All sizes

Profile Picture Sizes

value =
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 原文

梦纸 2024-10-18 21:26:33

FB.api('/me/picture') 将返回重定向到图像 URL，因此它对您没有任何用处：
替代文字
您使用的方式是有效的，如文档（阅读部分）中所述。也许这相关，但我不知道它是否完全有效或不。

回复收藏 0 原文

~没有更多了~

关于作者

卖梦商人

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

如何使用FB.api('/me/picture')获取头像

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

玍銹的英雄夢

我不会写诗

十六岁半

浸婚纱

qq_kJ6XkX

旧伤还要旧人安

友情链接

如何使用FB.api('/me/picture')获取头像

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

玍銹的英雄夢

我不会写诗

十六岁半

浸婚纱

qq_kJ6XkX

旧伤还要旧人安

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。