Получаем последний твит с twitter.com при помощи JavaScript и библиотеки jQuery

Среда, 6 января 2010 года, 16:00. Напечатано в категориях AJAX, JavaScript, Twitter28

twitterЭто просто? Да!

Нам поможет язык программирования JavaScript и библиотека jQuery. Итак, суть в том, что мы запрашиваем информацию у сайта twitter.com посредством GET – запроса. Заглянув в apiwiki.twitter.com, мы найдём подходящий url для запроса. Вот необходимая страничка. Выбираем формат json. Ну а теперь объясняю на наглядном примере кода.

Для начала подкчючаем библиотеку jQuery, наример так:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

И сразу в бой! Первый листинг JavaScript кода:

// Назначаем основные переменные
var
  nickName = 'vjRegent', // Ваш ник в Twitter
  count = 1; // Количество последних сообщений
// Создаём AJAX запрос
$.ajax(
  {
    // Создаём url
    url: 'http://twitter.com/status/user_timeline/'
      + nickName + '.json?count=' + count,
    // Формат получаемых данных
    dataType: 'jsonp',
    // При успешном получении данных запускаем функцию
    success: function( obj ){
      // Показываем последний твит
      alert( obj[ 0 ].text );
    }
  }
);

Надеюсь, вы испробовали кнопку “Запустить код!”?)
Хорошо, давайте посмотрим, что Вы недавно чирикнули в своём микроблоге!)
В следующем листинге жмите кнопку “Запустить код!”.

// Назначаем основные переменные
var
  nickName = prompt( 'Введите Ваш ник в Twitter' ), // Ваш ник в Twitter
  count = 1; // Количество последних сообщений
// Создаём AJAX запрос
$.ajax(
  {
    // Создаём url
    url: 'http://twitter.com/status/user_timeline/'
      + nickName + '.json?count=' + count,
    // Формат получаемых данных
    dataType: 'jsonp',
    // При успешном получении данных запускаем функцию
    success: function( obj ){
      // Показываем последний твит
      alert( obj[ 0 ].text );
    }
  }
);

И в конце концов давайте всё это преобразуем в плагин для jQuery без лишних слов! Но с полезными пояснениями :)

/*
 * gTwitter plugin for jQuery
 * Version 0.0.1
 *
 * Copyright (c) 2010 Александр Кузнецов aka Regent(http://vl.vg/)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://docs.jquery.com/License
 *
 */

window.jQuery ? (
  function( $ ){
    $.fn.gTwitter = function( nickName, fixLink ){
      var
        // Ваш ник в Twitter
        nickName = nickName != '' ? nickName : false,
        // Править ссылки и ники в настоящие ссылки?
        fixLink = fixLink == false ? false : true;
      $( this )
      .each(
        function(){
          var $this = $( this );
          $.ajax(
            {
              // Создаём url
              url: 'http://twitter.com/status/user_timeline/' + nickName + '.json?count=1',
              // Формат получаемых данных
              dataType: 'jsonp',
              // При успешном получении данных запускаем функцию
              success: function( obj ){
                // Показываем последний твит
                var text = obj[ 0 ].text;
                if( fixLink )
                  text = text
                  // Правим ссылки на настоящие
                  .replace( /(http:\/\/(?:[^\s]{4,}))/, '<a href="$1" target="_blank">$1</a>' )
                  // Правим обращения на ссылки
                  .replace( /^(?:@([^ ]+))/, '<a href="http://twitter.com/$1" target="_blank">@$1</a>' );
                $this
                .html( text );
              }
            }
          );     
        }
      )
    };
    // Автостарт
    $(
      function(){
        $( '[class^="gtwitter_"]' )
        .each(
          function(){
            var
              $this = $( this ),
              nickName = $this.attr( 'class' ).match( /gtwitter_([^\s]+|[^\s]+$)/ );
            if( nickName )
              $this
              .gTwitter( nickName[ 1 ] );
          }
        );
      }
    );
  }
)( jQuery ) : '';

И сразу полезные ссылки:
Страничка gTwitter + примеры
Скачать плагин

И в конце статьи только не говорите, что не знаете, что такое “Twitter“! Нет!?!? Тогда смотрите краткий обзор Twitter`a ;)

Подходим к самому концу. Хотелось бы узнать Ваше мнение по этим пунктам:

  1. Вам понравился материал?
  2. Не слишком скомкано?
  3. Всё ли понятно?
Спасибо!


Комментарии(28)

Строков Денис пишет в среду, 06.01.2010 в 6:11 Ответить
Блог интересный, но в плане ведения блога, много ошибок делаешь )
Regent пишет в четверг, 07.01.2010 в 15:02 Ответить
Спасибо!)
Хотелось бы послушать об ошибках, если это не составит Вам большого труда!
ArtMen пишет в пятницу, 08.01.2010 в 14:52 Ответить
Позновательно, но без "бутылки" человеку далёкому от javaScript тяжело было для восприятия. Въехал в суть дела, только когда 4-ый раз перечитал.
Regent пишет в пятницу, 08.01.2010 в 19:48 Ответить
@ArtMen, да, видимо надо немного сменить манеру написания таких постов
Надеюсь на то, что на страничке примеров всё понятно :p
Андрей пишет в пятницу, 15.01.2010 в 23:42 Ответить
ППЦ, нормальный блог, очень понятно написано (выше). Пойду другое читать.
alexpts пишет в среду, 20.01.2010 в 15:12 Ответить
Сделал что-то аналогичное, но столкнулся с проблемой кэширования.
Через несколько десятков запросов, твиттер скажет - "Too many tweets! Please wait a moment and try again."

Какие мысли на эту тему?
Andriy пишет в среду, 20.01.2010 в 15:47 Ответить
Користні js-коди. Дякую
Regent пишет в среду, 20.01.2010 в 16:25 Ответить
@alexpts, можете привести свой код?
С моим вариантом такого ещё не было. Я кеширую получаемые данные.

@Andriy, пожалуйста
alexpts пишет в среду, 20.01.2010 в 16:31 Ответить
Каким образом вы кэшируете? После перезагрузки страницы твиттер снова дергается с сервера.

Код который дергает последнии сообщения и вставляет их на старницу

var username = "alexpts"; 
var total = 3;

$.getJSON("http://twitter.com/status/user_timeline/" + username + ".json?count=" + total + "&callback=?", function(response) {
      var twitterLast = "";
      $.each(response, function(i, tweets) {
twitterLast +="" +tweets.text+ "";
      });
      twitterLast +=""
      $("#contact").prepend(twitterLast);
    });
Regent пишет в среду, 20.01.2010 в 16:47 Ответить
@alexpts, весь прикол в том, что вызов данных формата JSONP по умолчанию не использует кеширование:
http://api.jquery.com/jQuery.ajax/
Пробуй не через $.getJSON, а именно через $.ajax с установкой сache в true
alexpts пишет в среду, 20.01.2010 в 17:24 Ответить
А что нам это даст? У нас запрос к http://twitter.com/ все равно будет. $.getJSON это разновидность того же $.ajax. Это уже недостаток javaScript. Я думаю, тут без серверной части не обойтись. Если использовать серверную часть для вывода последних твитов, то тогда javascript вообще по идеи нам не нужен уже. Это минус использования такого метода, для получения сообщений из твиттер.
Regent пишет в среду, 20.01.2010 в 17:46 Ответить
@alexpts, хотя это и запрос к twitter.com, тут всё равно браузер может кешировать результат этого GET запроса.
Не знаю все детали кеширования в jQuery.ajax, но могу сказать одно, попробуйте:

var username = "alexpts"; 
var total = 3; 
$.ajax({
  url: 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + total,
  dataType: 'jsonp',
  success: function( obj ){
    alert( obj[ 0 ].text );
  }
});      
alexpts пишет в среду, 20.01.2010 в 18:03 Ответить
Если мы перезагрузили старницу, то у нас другой объект window, все очищается. Нет в javascript кэширования вне старницы (между страницами)
Regent пишет в среду, 20.01.2010 в 18:12 Ответить
@alexpts, я показал вам, как я делаю. Почему бы вам не попробовать этот вариант? У меня на этом сайте данный вариант работает как часы.
alexpts пишет в среду, 20.01.2010 в 18:46 Ответить
Работают прекрасно оба метода, как часы! Но оба метода подвержены тому, что при частом обращении к серверу твиттера, сервер говорит, что вы часто обращаетесь, попробуйте позже. А делаем мы одно и тоже. Код ничем не отличается.

Я просто хотел указал на недостаток такого способа. А вообще статья полезная очень!
Regent пишет в среду, 20.01.2010 в 18:58 Ответить
@alexpts, а, ясно! Наверное я что то не допонял :(

Если твиттер говорит, что мы часто обращаемся, то просто ставим задержку(если конечно это всё на одной страницы делаем).

Иначе скажите пользователю, чтобы он слишком часто страницу не обновлял
alexpts пишет в среду, 20.01.2010 в 19:53 Ответить
На одной странице всего 1 обращение. Если твиттер выводится на всех старницах блога, то пользователь "шарясь" по сайту может со своего IP собрать много обращений за короткий промежуток времени. Некоторые пользователи могут просто во вкладках могут очень много ссылок открыть и возможна такая ситуация.
Regent пишет в среду, 20.01.2010 в 20:16 Ответить
@alexpts, да, такая ситуация возможна!
Но вот только за период использования этого метода на сайте у меня ни разу такого не было
Здесь выход такой, что добавляем обработчик на ошибку:

$.ajax({
  error: function(){
    $( '#status' )
    .html( 'Ошибочка...' );
  }
});
alexpts пишет в среду, 20.01.2010 в 21:50 Ответить
это я уже написал... Кстати, еще нужно проверить, что возвращается в заголовке код ошибки. Ведь в оригинале может возвращаться страница с нормальным заголовком.
Regent пишет в среду, 20.01.2010 в 21:56 Ответить
@alexpts, вот именно error при любом случае и срабатывает
Ведь это у нас формат данных JSONP. Если в результате возвращается не ассоциативный массив или простой массив, то срабатывает событие error
alexpts пишет в среду, 20.01.2010 в 22:54 Ответить
Т.е. заголовок статуса ответа точно будет 200-300?

Кстати, классно сделаны кнопки форматирования справа. Код всех кнопок сам писал чтобы обрабатывался или плагин какой для ВП?
alexpts пишет в среду, 20.01.2010 в 22:56 Ответить
всмысле не js часть, а замену [(/) code ]
Regent пишет в среду, 20.01.2010 в 22:58 Ответить
@alexpts, да, даже если при 200 ok возвращается не массив, то error

Код форматирования сам писал в теме. Тут можно сказать, что всякие навороты на сайте сам писал, т. к. тема моего производства
[(/)code] - форматирование таких BB тегов писал в выводе комментариев.
alexpts пишет в четверг, 21.01.2010 в 18:12 Ответить
Наверное не объект, а не не массив.
Вывернул все предложение...
SerguN пишет в понедельник, 01.02.2010 в 12:24 Ответить
А последние 5 записей с твиттера как получить с помощью jQuery ?
Regent пишет в понедельник, 01.02.2010 в 17:30 Ответить
@SerguN, очень легко, в втором листинге идёт подсказка в коде
var
  nickName = 'vjRegent', // Ваш ник в Twitter
  count = 1; // Количество последних сообщений

Изменяете count на 5 и всё.
http://twitter.com/status/user_timeline/nickName.json?count=5
Womtec пишет во вторник, 23.02.2010 в 13:06 Ответить
Для вывода небольшого количества записей из одного аккаунта можно использовать <a href="http://womtec.ru/2009/12/display-last-entry-of-twitter/" rel="nofollow">другой способ</a>, более легкий и понятный.
Albert пишет в понедельник, 29.03.2010 в 2:07 Ответить
Приятно читать блог!
Уведомлять меня о новых комментариях по почте
Для корректной работы отправки комментариев необходимо включить JavaScript
Либо скачать новый нормальный браузер