Интегрируем Facebook на свой сайт

Facebook JavaScript SDK открывает доступ ко всем функциям Graph API из JavaScript, а также предоставляет отличный набор для аутентификации и совместного использования материалов. В данном уроке мы покажем вам, как можно использовать SDK на вашем сайте, добавив к нему несколько новых функций.

Что будет сделано в данном уроке?

Мы покажем, как добавить кнопку аутентификации пользователя Facebook на свой сайт и предоставлять в совместное использование различные материалы в ленте новостей Facebook.

Предварительные установки

Чтобы использовать Facebook JavaScript SDK нужно иметь ID приложения. То есть нужно зарегистрировать новое приложение для вашего сайта. Провести регистрацию можно здесь. Нужно правильно заполнить следующие поля, для того чтобы использовать новое приложение:

  • на закладке ‘website’ в поле ‘site url’ нужно указать адрес URL сайта, на котором хранится приложение
  • на закладке ‘facebook integration’ нужно в поле ‘Canvas URL’ также указать адрес приложения

Для вашего приложения будет генерироваться страница Facebook, вот такая. Можно персонализировать ее, добавляя описание, фотографии и так далее.

Когда пользователь будет размещать запись на своей стене из вашего приложения, Facebook будет записывать имя приложения, которое использовалось для размещения заметки. Когда другой читатель будет нажимать на ссылку, он будет перенаправлен на страницу приложения.

Наше приложение также имеет кнопку ‘Понравилось’, если посетитель нажимает на нее, то мы получаем об этом факте известие.

Включение скрипта

Чтобы использовать JavaScript Facebook SDK нужно загрузить ее на сайт. Мы делаем это асинхронно, таким образом процесс не будет блокировать другие элементы на сайте. Добавим следующий код на страницу:

<div id="fb-root"></div>
<script type="text/<span class="><!--mce:0--></script>
window.fbAsyncInit = function() {
   FB.init({appId: 'ВСТАВЬТЕ_APPLICATION_ID_ВАШЕГО ПРИЛОЖЕНИЯ_ЗДЕСЬ', status: true, cookie: true, xfbml: true});
};
(function() {
   var e = document.createElement('script');
   e.type = 'text/javascript';
   e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
   e.async = true;
   document.getElementById('fb-root').appendChild(e);
}());
</script>

Обязательно вставьте идентификатор вашего приложения!

Что мы собираемся сделать?

Мы хотим дать нашему пользователю возможность войти в Facebook прямо из нашего приложения и разместить там какую-нибудь строку.

Для начала добавим кнопку входа в Facebook. Вот код такой кнопки:

<fb:login-button autologoutlink='true'  perms='email,user_birthday,status_update,publish_stream'></fb:login-button>

Также мы регистрируем обработчики событий входа/выхода пользователя в Facebook и функцию для проверки статуса:

FB.Event.subscribe('auth.login', function(response) {
   login();
});
FB.Event.subscribe('auth.logout', function(response) {
   logout();
});
FB.getLoginStatus(function(response) {
   if (response.session) {
      greet();
   }
});

Когда пользователь входит в Facebook из нашего приложения, вызывается функция login().

Когда пользователь выходит из Facebook, вызывается функция logout().

И также имеется функция для проверки статуса пользователя: getLoginStatus(). Она вызывается при загрузке SDK для проверки состояния пользователя по отношению к Facebook. Текст на добавленной кнопке Facebook будет меняться с “Login” на “Facebook logout” в соответствии со статусом пользователя.. Функция  greet() будет вызвана, если пользователь при входе на пробную страницу уже вошел в Facebook. Вот так выглядят функции login (), logout() и greet():

function login(){
	FB.api('/me', function(response) {
		 alert('Вы удачно зарегистрировались, '+response.name+"!");
	});
}
function logout(){
	alert('Вы удачно вышли из Facebook!');
}
function greet(){
	FB.api('/me', function(response) {
		alert('Добро пожаловать, '+response.name+"!");
	});
}


Функция login сохраняет имя пользователя из ответа, который получен от Facebook и выводит сообщение на экран. Функции logout и greet также выводят сообщения на экран.

Данный код позволяет пользователю входит и выходит из своего аккаунта на Facebook прямо из нашего приложения! В случае, если пользователь пользуется своим аккаунтом Facebook в момент посещения нашего приложения, он будет соответствующим образом поприветствован.

Теперь посмотрим, что еще можно сделать !

Добавим возможность добавлять сообщение в ленту новостей

Добавим текстовое поле, содержание которого будет размещаться помещаться в ленту новостей в Facebook.

Добавим к коду нашей страницы следующие строки:

<span style="font-size: large;">Содержание сообщения</span>
<input id="status" size="60" type="text" value="Демонстрационное приложение для сайта RUSELLER.COM" />
<br/><a href='#' onclick='setStatus(); return false;'>Разместить в ленте новостей Facebook!</a>

Здесь формируется несколько элементов для демонстрации возможностей работы с Facebook. При нажатии на ссылку будет вызываться функция setStatus(), которая будет будет размещать содержание текстового поля в ленту новостей в аккаунт Facebook:

function setStatus(){
		
	// Проверяем, зарегистрировался ли пользовательы:
	FB.getLoginStatus(function(response) {
	if (response.session) {
		new_status = document.getElementById('status').value;
		FB.api(
		{
			method: 'status.set',
			status: new_status
		},
		function(response) {
			if (response == 0){
				alert('Ваш статус Facebook не обновлен. Установите права для обновления статуса.');
			}
			else{
				alert('Ваш статус Facebook обновлен');
			}
		}
	);
	} else {
			alert('Сначала зарегистрируейтесь :)');
	}
	});		
}

Сначала мы проверяем, вошел ли пользователь в Facebook. Для этого используется функция getLoginStatus() из SDK. Если пользователь не вошел в Facebook, мы выводим сообщение для него о том, что ему надо зарегистрироваться, чтобы размещать сообщения в ленту новостей.

Если пользователь вошел, то мы берем содержимое поля ‘status’ и с помощью метода status.set из SDK устанавливаем для статуса пользователя в Facebook новое значение. После того, как статус установлен, мы выводим сообщение о завершении операции пользователю.

Добавляем блок ‘Like’ на страницу

Внизу нашей демонстрационной страницы размещается блок "Like". В нем выводится информация о том, сколько пользователей Facebook отметили наше приложение. Чтобы добавить данный блок нужно вставить в код всего одну строку:

<fb:like-box profile_id="ВСТАВЬТЕ_APPLICATION_ID_ВАШЕГО ПРИЛОЖЕНИЯ_ЗДЕСЬ" stream="false" header="false"></fb:like-box>

Несколько идей о том, как использовать

Растущая популярность Facebook требует серьезного подхода к данной возможности. Пользователям будет удобно использовать один аккаунт для регистрации на нескольких ресурсах. Кроме того, приложение может размещать сообщения в ленте новостей на Facеbook (конечно же с согласия пользователей), которые будут видны всем друзьям посетителя.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.1stwebdesigner.com/tutorials/facebook-integrate/
Перевел: Сергей Фастунов
Урок создан: 2 Октября 2010
Просмотров: 55381
Правила перепечатки


5 последних уроков рубрики "Разное"

^ Наверх ^