Lecaw

Учимся создавать Web-сайты

Facebook API – получение списка друзей

August 8, 2012 129hits

В недавнем руководстве я рассказал вам, как импортировать контакты из Google. Сегодня я решил сделать подобный урок с facebook. Мы собираемся использовать API Facebook, (JavaScript API) для создания нашего примера.

ДЕМО Исходные файлы

 

 

Во-первых, мы должны создать наше собственное приложение на Facebook. Пожалуйста, пройдите по этой ссылке и нажмите кнопку "Создать приложение" в левом углу:

Мы должны ввести Имя приложения и нажать кнопку 'Continue'. Мы только что получили наш собственный ключ API:

facebook api

Теперь, обратите внимание на основные блоки информации, мы должны ввести наш домен App и параметры URL:

facebook api

Шаг 1. 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 - Получение списка друзей</h2>
<a href="http://lecaw.ru/index/categories/veb-dizajn/item/252-facebook-api.html" 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) { // в случае если не вошли в систему
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';
}); // получение списка друзей
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>';
} // вывод на экран
result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;
});
button.onclick = function() {
FB.logout(function(response) {
window.location.reload();
});
};
} else { // в противном случае – кнопка входа
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
window.location.reload();
}
}, {scope:'email'});
}
}
} // выполняется один раз с текущим статусом и каждый раз, когда статус изменяется
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>

Теперь, добавьте 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>

Мы выведем на экран короткую информацию о зарегистрированном пользователе в элементе 'user-info'. Кнопка (id=fb-auth) будет использоваться в качестве кнопки Login/Logout. И наконец, мы выведем на экран список друзей из нашего Facebook в последнем отделении (id=result_friends).

Теперь, пожалуйста, ознакомьтесь с нашим кодом JavaScript. В начале мы проводим инициализацию объекта FB нашего приложения, после того, как мы добавим обработчик события для нашей кнопки входа / выхода. Если мы не вошли в систему - скрипт предложит вам войти в систему. Если бы мы вошли в систему, скрипт вызовет метод API / свою страничку / друзья, чтобы получить список наших друзей. Как вы видите - мы используем пределы (по умолчанию 99), чтобы избежать очень больших списков. Как только мы получим его, мы отобразим их на экране.

Шаг 2. CSS

Теперь настало время стилизовать наш код.

#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;
}

ДЕМО Исходные файлы

Дополнительная информация

RATTING:
(0 голосов)

Медиа