Twitter »
Вывод последней записи из твиттера
На многих сайтах вы могли видеть блок с выводом последних записей из твиттера. Это достаточно удобное и полезное дополнение к сайту или блогу. Сейчас существует большое количество таких плагинов для популярных движков типа 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; } |
Вот и все. Надеемся, что на этом простом примере вы поняли как сделать вывод последней записи. Если же, вдруг, у вас возник вопрос, не стесняйтесь, задавайте его в комментариях.
Комментарии (7) ↓
ZeroXor / 23 Декабрь 2009 в 18:47
Спасибо за материал! Все собирался разобраться с тем, как делать что-то подобное, в общем, покопать API Twitter’а, да все руки никак не доходили. А вот эту заметочку обязательно использую и поставлю такую штуку себе в блог.
Hexli / 23 Январь 2010 в 02:48
А можно выводить запись без ссылки типа «7 days ago»?
Т.е. просто текст.
Илья Федотов / 23 Январь 2010 в 10:43
Hexli, конечно можно. Например так: скачайте js-файл blogger.js к себе на компьютер, откройте его и замените этот кусок кода:
на вот такой:
P.S. И не забудьте поменять путь к этому js-файлу.
Ю.Б. / 27 Январь 2010 в 14:34
Спасибо! То что доктор прописал. А то я пробовал тулить твиттеровский виджет — ну очень громоздко получалось.
Knopka / 8 Июль 2010 в 06:54
Подскажи тоже, но для хэш-тегов. Нужно вывести ленту хэш-тега. Плиз.
Илья Федотов / 8 Июль 2010 в 09:37
Knopka, данный пример подходит только для отображения небольшого количества твиттов одного пользователя. Чтобы выводить сообщения лентой, посмотрите другой пример — . А в комментариях к этой статье как раз разобран способ вывода твиттов по определенному хэш-тегу.
Knopka / 8 Июль 2010 в 10:06
Огромное спасибо.