Лучшие статьи категории «Твиттер»

Подписка

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

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

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

1
2
3
4
<div id="twitter">
	<h1><a href="http://twitter.com/womtec">@womtec</a></h1>
 	<ul id="twitter_update_list"></ul>
</div>

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

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

1
2
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/womtec.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

И изменяем 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» где собраны более сложные и функциональные примеры.

Смотреть пример

Категория: Твиттер Рубрики: , , Автор: Илья Федотов (G+)


Комментарии (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 '<a href="'+url+'" rel="nofollow">'+url+'</a>';

Жизнь – путешествие / 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: marie@viuu.co.uk

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

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

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

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

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

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

1
2
3
<style type="text/css">
...
</style>

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

1
<link rel="stylesheet" href="style.css" media="screen" />

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

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

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

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

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

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

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

Популярные статьи

Комментарии

  • Кек: Ни один из сервисов не работает.
  • Alex: На самом деле все конечно правильно написано, но для России...
  • Анна: Несколько советов о том, как самому придумать логотип есть...
  • Agen Sabung: Great web site you have here. It’s hard to find excellent writing like yours these days. I really...
  • Павел Тимощенко: Аналогично скриню картинки для некоторых...
  • Зенков Андрей: Учитывая, что иконки служат для подсказки тем,...
  • Зенков Андрей: Дизайнер должен ответственно подойти к...
  • Оля: DizGraf, вот отличный русскоязычный бесплатный фотобанк.

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus