facebook api_Facebook API –获取朋友列表

最新推荐文章于 2021-12-24 00:08:23 发布

cukeoumuqian0413

最新推荐文章于 2021-12-24 00:08:23 发布

阅读量1.8k

点赞数

文章标签： javascript js css html web ViewUI

原文链接：https://www.script-tutorials.com/facebook-api-get-friends-list/

版权

这篇教程详细介绍了如何使用Facebook的JavaScript API创建一个应用，获取并显示用户的朋友列表。首先在Facebook创建应用获取API密钥，然后在PHP的index.php文件中设置代码，通过JavaScript处理登录/注销以及调用API获取朋友列表。最后，使用CSS美化输出结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

facebook api

Facebook API – Get friends list In our recent tutorials I told you how to import your contacts from google. Today I decided to make similar tutorial, but for facebook. I think that it can be very interesting for you to get a list of your friends. We are going to use Facebook’s API (javascript api) to build today’s example.

Facebook API –获取朋友列表在最近的教程中，我告诉了您如何从google导入联系人。今天，我决定制作类似的教程，但仅限Facebook。我认为获得您的朋友列表对您来说可能非常有趣。我们将使用Facebook的API(javascript api)构建今天的示例。

Firstly, we should create our own new application at Facebook. Please follow this link and click ‘Create New App’ button at the left top:

首先，我们应该在Facebook上创建自己的新应用程序。请点击此链接，然后点击左上角的“创建新应用”按钮：

We should select our App Name and click ‘Continue’ button. We’ve just got our own api key:

我们应该选择我们的应用名称，然后单击“继续”按钮。我们只有自己的api密钥：

Now, please pay your attention to Basic Info block, we should type our App Domains and Site URL params:

现在，请注意“基本信息”块，我们应该输入“应用程序域”和“网站URL”参数：

That’s all, click ‘Save Changes’ button, and lets start coding !

就是这样，单击“保存更改”按钮，然后开始编码！

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

步骤1. PHP (Step 1. PHP)

Now, please create an empty index.php file and put next code:

现在，请创建一个空的index.php文件并放入下一个代码：

index.php (index.php)


<?php
$sApplicationId = 'YOUR_APPLICATION_ID';
$sApplicationSecret = 'YOUR_APPLICATION_SECRET';
$iLimit = 99;
?>
<!DOCTYPE html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
    <head>
        <meta charset="utf-8" />
        <title>Facebook API - Get friends list | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>Facebook API - Get friends list</h2>
            <a href="https://www.script-tutorials.com/facebook-api-get-friends-list/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <img src="facebook.png" class="facebook" alt="facebook" />
        <center>
            <h1>Authorization step:</h1>
            <div id="user-info"></div>
            <button id="fb-auth">Please login here</button>
        </center>
        <div id="result_friends"></div>
        <div id="fb-root"></div>
        <script>
        function sortMethod(a, b) {
            var x = a.name.toLowerCase();
            var y = b.name.toLowerCase();
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        }
        window.fbAsyncInit = function() {
            FB.init({ appId: '<?= $sApplicationId ?>',
                status: true,
                cookie: true,
                xfbml: true,
                oauth: true
            });
            function updateButton(response) {
                var button = document.getElementById('fb-auth');
                if (response.authResponse) { // in case if we are logged in
                    var userInfo = document.getElementById('user-info');
                    FB.api('/me', function(response) {
                        userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
                        button.innerHTML = 'Logout';
                    });
                    // get friends
                    FB.api('/me/friends?limit=<?= $iLimit ?>', function(response) {
                        var result_holder = document.getElementById('result_friends');
                        var friend_data = response.data.sort(sortMethod);
                        var results = '';
                        for (var i = 0; i < friend_data.length; i++) {
                            results += '<div><img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">' + friend_data[i].name + '</div>';
                        }
                        // and display them at our holder element
                        result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;
                    });
                    button.onclick = function() {
                        FB.logout(function(response) {
                            window.location.reload();
                        });
                    };
                } else { // otherwise - dispay login button
                    button.onclick = function() {
                        FB.login(function(response) {
                            if (response.authResponse) {
                                window.location.reload();
                            }
                        }, {scope:'email'});
                    }
                }
            }
            // run once with current status and whenever the status changes
            FB.getLoginStatus(updateButton);
            FB.Event.subscribe('auth.statusChange', updateButton);
        };
        (function() {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        }());
        </script>
</body>
</html>


<?php
$sApplicationId = 'YOUR_APPLICATION_ID';
$sApplicationSecret = 'YOUR_APPLICATION_SECRET';
$iLimit = 99;
?>
<!DOCTYPE html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
    <head>
        <meta charset="utf-8" />
        <title>Facebook API - Get friends list | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>Facebook API - Get friends list</h2>
            <a href="https://www.script-tutorials.com/facebook-api-get-friends-list/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <img src="facebook.png" class="facebook" alt="facebook" />
        <center>
            <h1>Authorization step:</h1>
            <div id="user-info"></div>
            <button id="fb-auth">Please login here</button>
        </center>
        <div id="result_friends"></div>
        <div id="fb-root"></div>
        <script>
        function sortMethod(a, b) {
            var x = a.name.toLowerCase();
            var y = b.name.toLowerCase();
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        }
        window.fbAsyncInit = function() {
            FB.init({ appId: '<?= $sApplicationId ?>',
                status: true,
                cookie: true,
                xfbml: true,
                oauth: true
            });
            function updateButton(response) {
                var button = document.getElementById('fb-auth');
                if (response.authResponse) { // in case if we are logged in
                    var userInfo = document.getElementById('user-info');
                    FB.api('/me', function(response) {
                        userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
                        button.innerHTML = 'Logout';
                    });
                    // get friends
                    FB.api('/me/friends?limit=<?= $iLimit ?>', function(response) {
                        var result_holder = document.getElementById('result_friends');
                        var friend_data = response.data.sort(sortMethod);
                        var results = '';
                        for (var i = 0; i < friend_data.length; i++) {
                            results += '<div><img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">' + friend_data[i].name + '</div>';
                        }
                        // and display them at our holder element
                        result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;
                    });
                    button.onclick = function() {
                        FB.logout(function(response) {
                            window.location.reload();
                        });
                    };
                } else { // otherwise - dispay login button
                    button.onclick = function() {
                        FB.login(function(response) {
                            if (response.authResponse) {
                                window.location.reload();
                            }
                        }, {scope:'email'});
                    }
                }
            }
            // run once with current status and whenever the status changes
            FB.getLoginStatus(updateButton);
            FB.Event.subscribe('auth.statusChange', updateButton);
        };
        (function() {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        }());
        </script>
</body>
</html>

Now, please pur your application id (and secret) in the beginning of our code, and only after lets review our rest code. In the beginning I prepared a small html code:

现在，请在我们的代码的开头，并且在让我们检查其余的代码之后，再购买您的应用程序ID(和密码)。在开始时，我准备了一个小的html代码：


<center>
    <h1>Authorization step:</h1>
    <div id="user-info"></div>
    <button id="fb-auth">Please login here</button>
</center>
<div id="result_friends"></div>
<div id="fb-root"></div>


<center>
    <h1>Authorization step:</h1>
    <div id="user-info"></div>
    <button id="fb-auth">Please login here</button>
</center>
<div id="result_friends"></div>
<div id="fb-root"></div>

We will display short info about logged in member in ‘user-info’ element. The button (id=fb-auth) will be used as Login/Logout button. And finally, we will display our facebook’s friends in the last one div (id=result_friends).

我们将在“ user-info”元素中显示有关已登录成员的简短信息。该按钮(id = fb-auth)将用作“登录/注销”按钮。最后，我们将在最后一个div(id = result_friends)中显示我们Facebook的朋友。

Now please review our JavaScript code. In the beginning we perform initialization of FB object with our application id. After, we add event handler to our Login/Logout button. We we are not logged in – the script will ask you to login (with your account credentials). If we are logged in, the script will evoke API method /me/friends in order to get a list of our friends. As you can see – we use limits (99 by default) to avoid very long listings. Once we get it (our friends) we display them on the screen.

现在，请查看我们JavaScript代码。首先，我们使用应用程序ID执行FB对象的初始化。之后，我们将事件处理程序添加到“登录/注销”按钮。我们尚未登录–脚本将要求您登录(使用您的帐户凭据)。如果我们登录，该脚本将调用API方法/ me / friends以获得我们的朋友列表。如您所见–我们使用限制(默认情况下为99)来避免列表过长。一旦获得(我们的朋友)，我们就会在屏幕上显示它们。

步骤2. CSS (Step 2. CSS)

In order to stylize our output I used next styles:

为了风格化我们的输出，我使用了以下样式：


#result_friends {
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
}
#result_friends h2 {
    text-align: center;
}
#result_friends div {
    border: 1px solid #888;
    box-shadow: 3px 3px 0 #000;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 5px;
    width: 275px;
}
#result_friends img {
    float: left;
    margin-right: 10px;
}


#result_friends {
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
}
#result_friends h2 {
    text-align: center;
}
#result_friends div {
    border: 1px solid #888;
    box-shadow: 3px 3px 0 #000;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 5px;
    width: 275px;
}
#result_friends img {
    float: left;
    margin-right: 10px;
}

现场演示

结论 (Conclusion)

I hope that everything is clean in today’s code. If you have any suggestions about further ideas for articles – you are welcome to share them with us. Good luck in your work!

我希望今天的代码中的所有内容都是干净的。如果您对文章的进一步建议有任何建议，欢迎与我们分享。祝您工作顺利！