Сегодня вряд ли у кого-то вызывает сомнения популярность твиттера, и многие блоггеры размещают в сайдбаре ленту сообщений с этого сервиса. Вообще, это хорошая идея, особенно если тематика сообщений в твиттере совпадает с тематикой блога, но её можно развить.
Думаю, вы уже фолловите людей, интересны которых совпадают с вашими, точнее с тематикой вашего блога. Думаю, посетителям будет гораздо интереснее читать тематические твиты, а не только ваши собственные. Кроме того, в этом случае виджет с твитами будет чаще обновляться.
Сделать это несложно. Добавляем подходящие twitter-ленты в отдельный список и публикуем его ленту. В этой статье я покажу, как создать такой виджет с помощью JavaScript.
Сразу даю ссылки на пример и архив с исходниками.
Source
Примечание. Скорее всего, подобные возможности есть в существующих twitter плагинах, но собственное решение всегда легче настраивать 🙂 , к тому же, сделать нужно совсем немного.
Для начала немного теории.
Получение списка твитов.
Как вы, наверное, знаете twitter предоставляет разработчикам довольно неплохой API для работы с сервисом. Им мы и воспользуемся. Потребуется всего одна функция GET list statuses. Она возвращает список твитов выбранного списка.
Принцип её работы следующий. Нужно отправить обычный GET запрос вида.
http://api.twitter.com/1/user/lists/list_id/statuses.format
где user – имя пользователя, который создал список;
list_id – название списка;
format – формат возвращаемых данных (доступны три варианта: xml, json и atom).
Например, запрос для получения моего списка webdev будет выглядеть так.
http://api.twitter.com/1/simplecoding/lists/webdev/statuses.json
Здесь simplecoding – имя пользователя (т.е. мой аккаунт в твиттере), а webdev – название списка. Т.к. работать мы будем на JS, то удобнее всего использовать json формат. Но вручную просматривать полученные данные удобнее в xml, т.к. большинство браузеров позволяет сворачивать xml теги. Так или иначе, если вы планируете работать с твиттером, просмотреть эти данные будет интересно.
Переходим к созданию виджета.
Чтобы виджет было удобно использовать на разных сайтах, я решил написать плагин к jQuery, который будет получать список твитов и вставлять их в указанный контейнер (например, тег div). Оформление виджета сделаем с помощью CSS.
Создаём страницу, на которой будет находиться виджет.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My Twitter List</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>My Twitter List</h1>
<div id="mylist"></div>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="twitterlist.jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#mylist').twitterList();
});
</script>
</body>
</html>
Для виджета мы создали тег div (строка 10), затем подключили файлы библиотеки jQuery и нашего плагина (twitterlist.jquery.js, строки 11, 12).
Запуск плагина выполняется с помощью метода twitterList(). В параметрах этого метода можно указать имя пользователя и название списка, твиты из которого нужно показать. Например
twitterList({'user':'maxsite', 'list':'bloggers'})
Рассмотрим сам плагин
(function($) {
$.fn.twitterList = function(settings) {
//дефолтные настройки
var config = {
'user' : 'simplecoding'
,'list' : 'webdev'
};
//применяем настройки, указанные пользователем
if (settings) $.extend(config, settings);
//сохраняем указатель на блок, в который нужно вставить твиты
var twitterBlock = this;
//получаем список твитов
//шаблон для поиска ссылок в твитах
var pattern = /(http\S+)/gi;
$.getJSON('http://api.twitter.com/1/' + config.user + '/lists/' + config.list + '/statuses.json?per_page=10&callback=?'
, function(twites) {
//добавляем твиты в блок на странице
$.each(twites, function(i, tweet) {
//добавляем к ссылкам тег a
var text = tweet.text.replace(pattern, '<a href="$1">$1</a>');
//создаём тег div с текущим твитом...
var curTweet = $('<div class="tweet">' + text + '</div>');
//...вставляем его в список
curTweet.appendTo(twitterBlock);
});
}
);
};
})(jQuery);
Если вы никогда не писали плагинов для jQuery и не использовали JSONP, то этот код вызовет вопросы. Поэтому я очень советую прежде чем приниматься за этот пример прочитать две статьи: Создаем плагин для jQuery и XSS с использованием JSONP и jQuery или любые другие материалы на эти темы.
Здесь мы только кратко рассмотрим, что происходит при запуске плагина.
1) Сохраняем параметры, указанные пользователем в хеше config.
2) Сохраняем имя блока, в который нужно вставлять твиты в переменной twitterBlock.
3) Создаём регулярное выражение для поиска ссылок в твитах. Твиты мы получим в виде обычного текста, поэтому вставлять теги <a> нужно будет самостоятельно.
4) Отправляем запрос серверу твиттера. Тут к запросу мы добавили два параметра: per_page=10 (количество твитов, которые мы хотим показать) и callback=? (имя функции, которой будут переданы полученные данные). Вместо знака вопроса jQuery подставит сгенерированное имя функции. Саму функцию мы объявляем во втором параметре метода getJSON.
5) Формируем список твитов. Эта операция выполняется в анонимной функции (строки 18-27), которая будет вызвана сразу после получения данных от twitter'а. Мы получим массив объектами, которые содержат данные каждого твита.
В данном случае нам нужно только вывести текст твита (он находится в атрибуте text) и сформировать ссылки. В нашем случае получить текст можно с помощь tweet.text, а создать ссылки – с помощью
replace(pattern, '<a href="$1">$1</a>'),
вместо $1 будет подставлена ссылка (совпадение с первой маской в регулярном выражении).
Вставку твита в список выполняем с помощью метода appendTo (строка 26).
Всё! Плагин работает. Естественно, функциональность виджета минимальная, но её несложно расширить. Например, можно добавить фотографии пользователей, ссылки на их ники и т.п. (всю эту информацию мы получаем в массиве с данными твитов).
Кроме того, возможно, вы захотите сделать фильтрацию твитов по каким-нибудь ключевым словам. Ограничений практически нет.
Я планирую продолжить эту тему, поэтому буду рад любым советам, пожеланиям и идеям!
До встречи!
Полезные ссылки.
На нашем портале вы найдёте полезные инструменты, которые помогут выбрать недвижимость, а также интересные статьи и объявления.
Попали в незнакомый город и боитесь заблудиться? В такой ситуации вам пригодятся GPS навигаторы от ведущих мировых производителей.
В вашей квартире старые окна и вы мёрзнете зимой? Решить проблему поможет установка пластиковых окон. Они не только сохранят тепло, но и защитят от шума.
