Lecaw

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

Facebook API - Узнай что делают друзья / Создание API Key Facebook

August 16, 2012 679hits

Сегодня я хочу показать Вам, как выводить активность друзей из Facebook на Вашем вебсайте. Наверное каждый задавался вопросом - что делают мои друзья на Facebook? Например, какие страницы мы вместе посещаем. И сегодня мы покажем активность друзей на Вашем сайте используя Facebook API (используя fql.query) Скрипт может показывать различные каналы, такие как: обновление статуса, посещенные ссылки, заметки, фото, видео и т.д. То есть все что расположено в 'потоковой' таблице FQL. Итак, давайте приступим.

Исходные файлы

 ДЕМО

 

Создаем API Key Facebook

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

Далее выбираем имя нашего приложения и нажимаем Продолжить:

Теперь, обратите внимание на блок Basic Info, мы должны ввести параметры нашего приложения и URL параметры сайта:

Теперь всё, нажимаем сохранить настройки и начинаем писать код !

Шаг 1. PHP Facebook API

Откройте блокнот, сохраните его под названием 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 - Узнай что делают друзья | Lecaw Tutorials</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.7.1");
</script>
<script type="text/javascript" src="/js/jsrender.js"></script> <!-- define template for our units -->
<script id="facebookTemplate" type="text/x-jsrender">
<div id="{{:post_id}}" class="fbf">
{{if actor_id}}
<img src="https://graph.facebook.com/{{:actor_id}}/picture" />
{{/if}}
<div>
{{if description}}
<p><a href="#">{{:description}}</a> <span>(Type: {{:type}})</span></p>
{{/if}}
{{if message}}
<p><a href="#">{{:message}}</a> <span>(Type: {{:type}})</span></p>
{{/if}}
</div>
</div>
</script>
</head>
<body>
<header>
<h2>Facebook API - Узнай что делают друзья</h2>
<a href="#" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<img src="/facebook.png" class="facebook" alt="facebook" /> <div id="fb-root"></div>
<center>
<h1>Authorization step:</h1>
<div id="user-info"></div>
<button id="fb-auth">Пожалуйста авторизуйтесь</button>
</center> <div id="results"></div> <script>
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');
var iPid = 0;
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
button.innerHTML = 'Выйти'; // получить статус друзей
iPid = response.id;
if (iPid > 0) {
FB.api({ // call fql.query
method : 'fql.query',
query : "SELECT post_id, actor_id, type, description, permalink, message FROM stream WHERE filter_key in (SELECT filter_key FROM stream_filter WHERE uid = me() AND type = 'newsfeed') AND type != '347'"
}, function(response) { // элементы действующие на шаблон 'facebookTemplate'??
$('#results').html(
$('#facebookTemplate').render(response)
);
});
}
}); 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:'read_stream'});
}
}
} // запускается один раз с появлением в онлайн и меняется каждый раз после изменения статуса
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-код:

<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="results"></div>

Элемент ‘user-info’ выводит на экран друзей, которые меняют статус. Также вы можете видеть здесь те же элементы авторизации какие мы делали в предыдущем пункте (Facebook API – получение списка друзей). Обратите внимание на JavaScript код получения списка активных друзей:

// получить статус друзей
iPid = response.id;
if (iPid > 0) {
FB.api({ // call fql.query
method : 'fql.query',
query : "SELECT post_id, actor_id, type, description, permalink, message FROM stream WHERE filter_key in (SELECT filter_key FROM stream_filter WHERE uid = me() AND type = 'newsfeed') AND type != '347'" }, function(response) { // элементы действующие на шаблон 'facebookTemplate'
$('#results').html(
$('#facebookTemplate').render(response)
);
});
}

Можете спросить меня, почему я фильтровал тип #347 – просто он не содержит ничего интересного, это тип на любителя. Кроме того, не забывайте, что мы снова пользуемся библиотекой JsRender для увеличения уровня генерации заключительного кода HTML, точно также как на сайте - продвижение сайтов в поисковых системах.

Шаг 2. CSS

Для завершения я использовал следующие стили:

#results {
    margin: 0 auto;
    overflow: hidden;
    width: 550px;
}
.fbf {
    background-color: #F7F7F7;
    border: 1px solid #EEEEEE;
    border-radius: 5px 5px 5px 5px;
    clear: left;
    font-size: 1em;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 5px 10px 5px 5px;
}
.fbf img {
    float: left;
    margin-right: 10px;
}
.fbf p {
    margin-bottom: 5px;
    overflow: hidden;
    text-align: left;
}
.fbf a:link, .fbf a:visited, .fbf a:focus, .fbf a:hover, .fbf a:active {
    color: #006699;
    font-size: 12px;
    font-weight: bold;
}
.fbf p span {
    float: right;
    font-size: 11px;
}

Заключение

Я надеюсь, что код работает правильно. Если имеются какие-либо предложения о дальнейших идеях для статей – буду рад их выслушать. Удачи в работе!

 

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

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(2 голосов)

Оставить комментарий