Получаем последний твит с twitter.com при помощи JavaScript и библиотеки jQuery
Это просто? Да!
Нам поможет язык программирования JavaScript и библиотека jQuery. Итак, суть в том, что мы запрашиваем информацию у сайта twitter.com посредством GET – запроса. Заглянув в apiwiki.twitter.com, мы найдём подходящий url для запроса. Вот необходимая страничка. Выбираем формат json. Ну а теперь объясняю на наглядном примере кода.
Для начала подкчючаем библиотеку jQuery, наример так:
И сразу в бой! Первый листинг 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
Подходим к самому концу. Хотелось бы узнать Ваше мнение по этим пунктам:
- Вам понравился материал?
- Не слишком скомкано?
- Всё ли понятно?
Либо скачать новый нормальный браузер
Комментарии(28)
Хотелось бы послушать об ошибках, если это не составит Вам большого труда!
Надеюсь на то, что на страничке примеров всё понятно :p
Через несколько десятков запросов, твиттер скажет - "Too many tweets! Please wait a moment and try again."
Какие мысли на эту тему?
С моим вариантом такого ещё не было. Я кеширую получаемые данные.
@Andriy, пожалуйста
Код который дергает последнии сообщения и вставляет их на старницу
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);
});
http://api.jquery.com/jQuery.ajax/
Пробуй не через $.getJSON, а именно через $.ajax с установкой сache в true
Не знаю все детали кеширования в 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 );
}
});
Я просто хотел указал на недостаток такого способа. А вообще статья полезная очень!
Если твиттер говорит, что мы часто обращаемся, то просто ставим задержку(если конечно это всё на одной страницы делаем).
Иначе скажите пользователю, чтобы он слишком часто страницу не обновлял
Но вот только за период использования этого метода на сайте у меня ни разу такого не было
Здесь выход такой, что добавляем обработчик на ошибку:
$.ajax({
error: function(){
$( '#status' )
.html( 'Ошибочка...' );
}
});
Ведь это у нас формат данных JSONP. Если в результате возвращается не ассоциативный массив или простой массив, то срабатывает событие error
Кстати, классно сделаны кнопки форматирования справа. Код всех кнопок сам писал чтобы обрабатывался или плагин какой для ВП?
Код форматирования сам писал в теме. Тут можно сказать, что всякие навороты на сайте сам писал, т. к. тема моего производства
[(/)code] - форматирование таких BB тегов писал в выводе комментариев.
Вывернул все предложение...
nickName = 'vjRegent', // Ваш ник в Twitter
count = 1; // Количество последних сообщений
Изменяете count на 5 и всё.