Организуем просмотр твиттов с помощью JQuery и twitter API

Твиттер перешел на новую версию API 1.1. данный код верен для API v1
Представленный способ получения данных будет работать при замене from на @, адрес запроса = https://api.twitter.com/1.1/search/tweets.json и теперь веб-приложение должно авторизовываться в твиттере, используя oAuth

Ни для кого не секрет, что большие сервисы, наподобие вконтакте,youtube, имеют API, которое позволяет работать с данными сайта весьма легко и удобно.
Подобное API имеет и twitter. Сегодня я предлагаю разобраться, наверное, с одной из самых важных API функций twitter, а именно с «поиском» твиттов.
Задача
Отображать настраиваемые твиты, а именно твиты определенных людей и определенных хеш-тегов.
Дополнительно описать действия «что необходимо сделать, чтобы расширить функционал» (перейти к отображению твитов предназначенных пользователю и т.д.)
Решение
Работать мы будем с одной-единственной страницей Twitter’a, а именно с http://search.twitter.com/search.json данная страница и реализует «поиск» по твитам.
Что предлагает нам данная функция?
Здесь описаны все возможности данной функции: Twitter API
Посмотрим на те возможности, которыми будем пользоваться:
После загрузки страницы, мы вызовем функцию $(document).ready, в котором определим тех пользователей и те хеш-теги, которые будем искать и создадим в html коде новый элемент – скрипт. (данный скрипт и является API Twitter)
Располагаться он будет по адресу http://search.twitter.com/search.json и принимать на вход будет параметры:

  • q – строка формата UTF-8, длиной до 1000 строк, определяет выборку твиттов. Например получить все упоминания о пользователе xnimorz можно введя в q @xnimorz.
    Получить все твитты определенного пользователя можно введя from:имяПользователя, например from:xnimorz. Чтобы произвести поиск по хеш-кодам необходимо ввести #хешКод. Например #МЭСИ. Более подробную выборку с помощью данного запроса можно посмотреть на странице с документацией (приведена выше). Если необходимо объединить несколько пользователей\\хеш-тегов и т.д. используется +OR+. Например, from:xnimorz+OR+#МЭСИ

  • callback – определяет функцию, которая будет вызвана по окончанию работы скрипта. Например, написав callbackHandler – по окончанию работы скрипта твиттера будет вызвана пользовательская функция callbackHandler c параметром, содержащим массив твиттов в формате JSON

  • rpp – определяет количество твиттов для поиска по запросу. (общее количество твиттов для выдачи).


Приступаем к кодированию
Первой функцией определим импорт скрипта после события загрузки страницы - $(document).ready.
Так как создание скрипта мы разобрали, приведу откомментированный код данной функции:
  1. function importSearch() {
  2. //получаем данные
  3.    var t = $(''#tags'').attr(''value'');
  4.    var tweetTags = [];
  5.    var item = '''';
  6.    //разделяем данные по пробелу, добавляем в массив
  7.    for (var i = 0 ; i < t.length; i++) {
  8.      if (t[i] != '' '' ) item += t[i];
  9.      else {
  10.         tweetTags.push(item);
  11.         item = '''';
  12.      }
  13.    }
  14.    tweetTags.push(item);
  15.   
  16.    var request = '''';
  17. //заносим все элементы в одну строку, добавляя from, если необходимо
  18.    for (var i = 0 ; i < tweetTags.length; i++)
  19.    {
  20.      if (i != 0 ) request += ''+OR+'';
  21.      if (tweetTags[i][0] != ''#'' )
  22.         request += ''from:'' + tweetTags[i];
  23.       else
  24.       {
  25.         request += ''%23 ''
  26.          for (var index = 1 ; index < tweetTags[i].length; index++)
  27.             request += tweetTags[i][index];
  28.       }
  29.    }
  30.    //импортируем скрипт
  31.    var newScript = document.createElement(''script'');   
  32.    newScript.setAttribute("type" , "text/javascript" );
  33.    newScript.setAttribute("src" , "http://search.twitter.com/search.json?q=" + request + "&callback=tweetResponse&rpp=40" );
  34.    //Вставляем
  35.    document.getElementsByTagName("head" )[0].appendChild(newScript);
  36. }
  37. $(document).ready(function( )
  38. {//вызываем функцию импорта
  39.    importSearch();
  40. });

This code was highlighted with code.xnim.ru

Здесь данные для запроса получаем с текстового поля, в которое вводим пользователя, которого хотим читать без символа @ (только логин) и хеш-теги в формате #хешТег разделяются логины\\хеш-теги пробелом.
Теперь, когда скрипт импортирован, начинается его работа. Скрипт возвратит набор твиттов в формате JSON и вызовет функцию tweetResponse. Данная функция должна обрабатывать полученные твитты.
Обработка JSON на JavaScript + JQuery
На данном этапе набор данных формата JSON уже получен. Нашим следующим действием является обработка каждого твитта (элемента массива JSON формата) и создание на его основе html кода для отображения.
Функция после вызова очистит поле (которое могло быть занято чем-то) и с помощью JQuery.each(function(item)) будет «собирать» твитт.
Каждый твитт будет состоять из:
  • Имя пользователя

  • Картинка (аватар) пользователя

  • Текст твитта

  • Время отправки твитта

Усложним задачу, определив, что полученный в конце скрипт должен будет правильно форматировать твитт, а именно – строить все гиперссылки на другие сайты и ссылки на хеш-теги и логины пользователя.
Для форматирования твитта воспользуемся регулярными выражениями. Обрабатывать будем следующие случаи:
  • http и https гиперссылки включают в себя – символы, точки и слешы.

  • Логин пользователя – символ @ и символы

  • Хеш-тег – символ # и символы

Так как твиттер, как правило, выводит информацию о времени твиттах как:
  • Несколько секунд назад

  • Минуту назад

И т.д., то введем функцию, которая будет аналогично обрабатывать время отправки твитта.
На вход данная функция принимает время отправки твитта, затем получает настоящее время и находит их разность. (разность получаем в минутах и затем можем обработать результат «на любой вкус и цвет»)
Теперь приведу код данных функций:
  1. //Обрабатываем ответ
  2. function tweetResponse(result) {
  3.    var container=$(''#tweet-container'');
  4.    container.html('''');   
  5.    //Каждый элемент массива представляем в виде html кода:
  6.    $(result.results).each(function (item) {
  7.       var str = (''    <div class="tweetBox" >\\
  8.           <div class="avatar" > <a href="http://twitter.com/''+this.from_user+''" target="_blank" > <img src="''+this.profile_image_url+''" alt="''+this.from_user+''" / > </a > </div >\\
  9.           <div class="user" > <a href="http://twitter.com/''+this.from_user+''" target="_blank" >''+this.from_user+'' </a > </div >\\
  10.           <div class="time" >''+relativeTime(this.created_at)+'' </div >\\
  11.           <div class="txt" >'' + formatTweet(this.text) + '' </div >\\
  12.      '');
  13.       //добавляем в html
  14.    container.append(str);   
  15.    });   
  16.    
  17. }
  18. //Форматируем твитт
  19. function formatTweet(str) {
  20.    str='' '' +str;
  21.    //http ссылки
  22.    str = str.replace(/((https?):\\/\\/([-\\w\\.]+)+(:\\d+)?(\\/([\\w/_\\.]*(\\?\\S+)?)?)?)/gm,'' <a href="$1" target="_blank" >$1 </a >'');
  23.    //логины
  24.    str = str.replace(/([^\\w])\\@([\\w\\-]+)/gm,''$1@ <a href="http://twitter.com/$2" target="_blank" >$2 </a >'');
  25.    //\\хеш-теги
  26.    str = str.replace(/([^\\w])\\#([а-я,А-Я,a-z,A-Z,\\-]+)/gm,''$1 <a href="http://twitter.com/search?q=%23 $2" target="_blank" >#$2 </a >'');
  27.    return str;
  28. }
  29. //Время обновления
  30. function relativeTime(pastTime) {   
  31.    var tweetTime = Date.parse(pastTime);
  32.    var curDate = new Date( );
  33.    var currentStamp = curDate.getTime();   
  34.    var difference = parseInt((currentStamp - tweetTime)/1000 );
  35.    if( difference < 0 ) return false;
  36.    if( difference <= 5 ) return "Только что" ;
  37.    if( difference <= 20 ) return "Несколько секунд назад" ;
  38.    if( difference <= 60 ) return "Минуту назад" ;
  39.    if( difference < 3600 ) return parseInt(difference/60 )+" минут назад" ;
  40.    if( difference <= 1 .5*3600 ) return "час назад" ;
  41.    if( difference < 23 .5*3600 ) return Math.round(difference/3600 )+" часов назад" ;
  42.    if( difference < 1 .5*24 *3600 ) return "День назад" ;   
  43.    var dateArr = pastTime.split('' '' );
  44.    return dateArr[4].replace(/\\:\\d+$/,'''')+'' ''+dateArr[2]+'' '' +dateArr[1]+(dateArr[3]!=curDate.getFullYear()?'' '' +dateArr[3]:'''');
  45. }

This code was highlighted with code.xnim.ru


И в конце – пример работы данной функции:


Обновить

2013-02-11