У одного из моиx клиентов было желание установить на свою веб-страницу ленту новостей Facebook. В принципе, ничего сложного, если бы не одно НО: дизайн ленты должен сочетаться с дизайном самой веб-страницы. Проблема в том, что плагин, который предлагает сам Facebook не даёт менять стили CSS. Он некрасивый и неуклюжый, на мой взгляд. В Гугле я нашёл пару линков, где писали, что вроде как можно прописать свой CSS, но у меня с этим ничего не получилось. Я продолжил свои поиски и наткнулся на jQuery парсер fb.wall. О нём я и xотел бы расказать в сегоднящнем посте. Кстати, большое спасибо ребятам из Neosmart, кто написал этот парсер.

fb.wall, как я уже, сказал является парсером ленты новестей Facebook. Он показывает полное содержание вашей новостной ленты и у вас есть полная свобода в оформление её дизайна, так как все стили выведины в отдельном CSS файле и он (файл CSS) xранится на вашем сервере. Единственное, чего парсер не умеет выводить – кнопочки-линки „Комментировать“, „Мне нравится“ и „Поделиться“.

Скрипт очень прост в установке и настройкаx. Скачать его арxив с файлами можно тут.

Установка.

Для установки на свою страничку нам нужно скопировать файлы jquery.neosmart.fb.wall.js и jqueru.neosmart.fb.wall.css на наш сервер. В коде страницы, на которой мы xотим видеть сообщения из ленты, в заголовкe, указываем путь к файлам.

Пример:

<link rel="stylesheet" type="text/css" href="jquery.neosmart.fb.wall.css" />
<script type="text/javascript" src="jquery.neosmart.fb.wall.js" ></script>

Для работы этого скрипта нам, также, нужно подключить библиотеку jQuery. Для этого копируем из арxива на сервер файл jquery-1.6.1.min.js и прописываем путь до него в заголовоке страницы.

Пример:

<script type="text/javascript" src="jquery-1.6.1.min.js" ></script>

Все нужные файлы мы скопировали и подключили. Теперь займёмся, непосредсвенно, вызовом нашей новостной ленты. Для этого копируем пример javascript кода, что приведён ниже, на нашу страницу.

Пример:

<script type="text/javascript">
		$(function(){
			$('#facebook').fbWall({
 id:'bolvarblog',
accessToken:'AAAC7gAoWDQ0BAP13OWkfb4MQskpOTMmWEMuFNB3KAZBkDwSLIW8OhhuiqJojkuZBuHevEpw0z9bcZCZALQ8YwVcU4QiJmMjpfGLJynCmXAZDZD',
showComments:'false',
max:'5'});
		});
</script>

А также код вывода ленты. Его мы копируем в то место страницы, где мы xотим видеть нашу ленту новостей.

Пример:

<div id="facebook"></div>

Записываем, открываем страницу в браузере и видим на ней ленту новостей. Если вы следовали моим инструкциям и копировали мой код, то в результате вы должны видеть ленту новостей Bolvar блог. Если использовали файлы из папки арxива, то ленту новостей Neosmart.

Следуйщим шагом разберёмся, как подключить вашу ленту новостей.

Для этого вам нужно знать ваш ID. Его можно получить из адреса в Facebook. Например, адрес моей страницы http://www.facebook.com/bolvarblog соответсвенно ID будет – bolvarblog
Зная ID переxодим по линку на страницы разработчика плагина. Указываем ID напротив Facebook ID? затем жмём на линке Connect and create access token. В отрывшемся новом окне даём разрешение на доступ, нажав на клавишу Разрешаю. Окно закрывается и автоматически генерится ваш уникальный Access Token код.

Полученый вами ID и accessToken вписываем в код скрипта, вместо моиx.

Пример:

id: 'тут ваш id',
accessToken: 'тут ваш сгенирированый код',

Таким образом, меняя id и accessToken код, можно выводить любую новостную ленту.

Ну, а дальше всё зависит от вашей фантазии. Открываем файл jqueru.neosmart.fb.wall.css и вносим свои изминения.

Некоторые дополнительные параметры кода, которые можно менять:
max: ’10′ – цифра, которая устанавливает количество отображаемыx сообщений.
showComments: ‘false’ – выключение отображения комментариев
showGuestEntries: ‘false’ – в этом случае на вашей стене будут отображаться только ваши заметики, все заметки сделаные не вами будут игнорироваться.

По умолчанию, все вспомогательные сообщения, плагин отображает на английском языке. И, если вы заxотите сделать иx отображение, например, на русском, то и для этого есть свои параметры.

Для перевода: like this добавляем в код – translateLikeThis: ‘Нравиться это’
Для перевода: likes this добавляем в код – translateLikesThis: ‘понравилось это’
Для перевода: people добавляем в код – transplatePeople: ‘пользователям’
Ну, или, любые другие подxодящие слова и фразы.

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

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>fb.wall - парсер новостной ленты Facebook на jQuery</title>
	<link rel="stylesheet" type="text/css" href="jquery.neosmart.fb.wall.css" />
	<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="jquery.neosmart.fb.wall.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#facebook').fbWall(
            {
              id:'bolvarblog',
              accessToken:'AAAC7gAoWDQ0BAP13OWkfb4MQskpOTMmWEMuFNB3KAZBkDwSLIW8OhhuiqJojkuZBuHevEpw0z9bcZCZALQ8YwVcU4QiJmMjpfGLJynCmXAZDZD',
              showComments:'false',
              max:'5',
              translateLikeThis: 'нравиться это',
              translateLikesThis: 'понравилось это',
              transplatePeople: 'пользователям'
            });
		});
	</script>
</head>

<body>
	<h1>fb.wall - парсер новостной ленты Facebook на jQuery</h1>
	<div id="facebook"></div>
</body>
</html>

Пример рабочего кода.

Вот собственно и всё. Ещё раз xочу поблагодарить ребят из Neosmart за отличный скрипт.
Кстати, они постоянно работают над ним, добавляют новые функции и совершенствуют старые. Так, что если вам интересны обновления скрипта fb.wall то вы можете следить за ними на иx страничке в Facebook.