Back to Top
Font size: +

Вывод последней записи из твиттера

На многих сайтах вы могли видеть блок с выводом последних записей из твиттера. Это достаточно удобное и полезное дополнение к сайту или блогу. Сейчас существует большое количество таких плагинов для популярных движков типа WordPress, Drupal, LiveStreet и других. Но как сделать такой вывод без применения плагина, например, на сайте, который работает не на одной из выше перечисленных cms? Об этом мы и расскажем вам в этой статье. Для демонстрации мы создадим отдельную страницу, на которой будем выводить последнюю запись из нашего твиттера.

Начнем с написания простого HTML:

1
2
3
4

@womtec

    Создаем заголовок (в нем пишем адрес нашего твиттера) и список с идентификатором twitter_update_list (внутри этого списка будет выводиться наше последнее сообщение), предварительно заключив все в тег div с идентификатором twitter.

    После html-кода добавляем javascript:

    1
    2
    
     

    И изменяем 2 параметра: вместо womtec пишем свое имя в твиттере, а для переменной count указываем количество выводимых твиттов (у нас это значение равно единице).

    Теперь, чтобы страница приняла более приятный вид, добавляем CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    body { background: #474269 url(top.jpg) repeat-x; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
     
    #twitter { width: 405px; margin: 100px auto; }
     
    #twitter h1 a { display: block; margin: 0 0 15px 0; font-size: 90px; color:#fff; text-decoration: none; }
    #twitter h1 a:hover { color:#7869D0; }
     
    #twitter ul { list-style: none; padding: 0 0 0 100px; background: #474269 url(pic.png) 0 10% no-repeat; }
    #twitter ul li { padding: 20px; margin-bottom: 10px; background:#fff; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
    #twitter ul li a { font: italic 14px/30px Georgia, Times, Serif; color: #7869D0; text-decoration: none; }
    #twitter ul li a:hover { color: #7869D0; text-decoration: underline; }
     
    #twitter ul li span { display:block; font: 22px/30px "Trebuchet MS", Arial, Sans-Serif; color: #000; }			
    #twitter ul li span a {	font: 22px/30px "Trebuchet MS", Arial, Sans-Serif; }

    Вот и все. Надеемся, что на этом простом примере вы поняли как сделать вывод последней записи. Если же, вдруг, у вас возник вопрос, не стесняйтесь, задавайте его в комментариях. Так же обязательно зайдите в рубрику «Twitter API» где собраны более сложные и функциональные примеры.

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

    Добавить новый комментарий

    ZeroXor / 23 Декабрь 2009 в 18:47

    Спасибо за материал! Все собирался разобраться с тем, как делать что-то подобное, в общем, покопать API Twitter’а, да все руки никак не доходили. А вот эту заметочку обязательно использую и поставлю такую штуку себе в блог.

    Hexli / 23 Январь 2010 в 02:48

    А можно выводить запись без ссылки типа «7 days ago»?
    Т.е. просто текст.

    Илья Федотов / 23 Январь 2010 в 10:43

    Hexli, конечно можно. Например так: скачайте js-файл blogger.js к себе на компьютер, откройте его и замените этот кусок кода:

    1
    2
    3
    4
    
    if (delta < 60) { return 'less than a minute ago'; }
    else if(delta < 120) { return 'about a minute ago'; }
    ...
    else { return (parseInt(delta / 86400)).toString() + ' days ago'; }

    на вот такой:

    1
    2
    
    if (delta < 0) { return ''; }
    else { return ''; }

    P.S. И не забудьте поменять путь к этому js-файлу.

    Ю.Б. / 27 Январь 2010 в 14:34

    Спасибо! То что доктор прописал. А то я пробовал тулить твиттеровский виджет — ну очень громоздко получалось.

    Knopka / 8 Июль 2010 в 06:54

    Подскажи тоже, но для хэш-тегов. Нужно вывести ленту хэш-тега. Плиз.

    Илья Федотов / 8 Июль 2010 в 09:37

    Knopka, данный пример подходит только для отображения небольшого количества твиттов одного пользователя. Чтобы выводить сообщения лентой, посмотрите другой пример — создание твиттер ленты. А в комментариях к той статье как раз разобран способ вывода твиттов по определенному хэш-тегу.

    Knopka / 8 Июль 2010 в 10:06

    Огромное спасибо.

    Жизнь - путешествие / 29 Сентябрь 2010 в 13:27

    Вот. Как раз то, что надо. Искал как убрать дату. А ссылки будут отображаться как ссылки или не будут? И @никнеймы как будут отображаться?

    Илья Федотов / 29 Сентябрь 2010 в 14:16

    Жизнь – путешествие, ссылки, как и имена пользователей, будут отображаться и вести на указанный сайт и страницу @автора соответственно.

    Жизнь – путешествие / 29 Сентябрь 2010 в 14:28

    А убрать можно, поменяв какой-то кусок кода в скрипте?

    Илья Федотов / 29 Сентябрь 2010 в 15:06

    Жизнь – путешествие, в файле blogger.js отредактируйте строки 6 и 8.

    return ''+url+'';

    Жизнь – путешествие / 29 Сентябрь 2010 в 21:26

    Работает. Спасибо (:

    Еще такой вопрос, может знаете. Можно ли убрать из выводимых твиттов, мои реплаи? А то глуповато выглядит. В фейсбуке приложение для вывода твиттов именно так работает.

    Skforussia / 29 Ноябрь 2010 в 15:16

    Спасибо за код, очень пригодился.

    Marie / 7 Апрель 2011 в 19:18

    Hi, We have developed a new wordpress plugin and we are looking for people to beta-test it. The plugin is about wordpress/twitter and you can check it at both links [1, 2]. You can also email us at: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

    Дмитрий / 29 Май 2011 в 21:46

    Долго искал, как добавить мои твитты на сайт в выпадающем меню к моей теме. Спасибо Вам!

    Angy / 25 Январь 2012 в 11:17

    Я не могу понять, для приятного вида куда вставлять css? Поподробнее можно пожалуйста.

    Илья Федотов / 25 Январь 2012 в 11:35

    Angy, css можно добавить либо в заголовок сайта, окружив его специальными тегами (этот способ используется в примере):

    1
    2
    3
    

    либо подключить как отдельный файл (style.css), предварительно создав его и скопировав в него стили. Код ниже размещается так же в заголовке сайта:

    1
    

    P.S. Рекомендую посмотреть код примера, он поможет Вам быстрее разобраться в уроке.

    Володя / 14 Май 2012 в 14:28

    Господа, а как сделать авторефреш этого блочка при добавлении твита?

    Илья Федотов / 17 Май 2012 в 11:19

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

    Комментирование этой статьи закрыто ...

    Креативные логотипы. Часть 1