Twitter »
Вывод последней записи из твиттера
На многих сайтах вы могли видеть блок с выводом последних записей из твиттера. Это достаточно удобное и полезное дополнение к сайту или блогу. Сейчас существует большое количество таких плагинов для популярных движков типа WordPress, Drupal, LiveStreet и других. Но как сделать такой вывод без применения плагина, например, на сайте, который работает не на одной из выше перечисленных cms? Об этом мы и расскажем вам в этой статье.
Прежде чем преступить к разработке выделим другие, более сложные и функциональные плагины, рассмотренные в других статьях на нашем сайте:
- Лента сообщений с прокруткой для сайта на jQuery.
- Список упоминаний (mention) о вас или ваших последователях на jQuery.
- Лента упоминаний о сайте в целом или какой-либо отдельной странице.
Итак, перейдем непосредственно к выводу последней записи. Для демонстрации мы создадим отдельную страницу, на которой будем выводить последнюю запись из нашего твиттера.
Начнем с написания простого 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; } |
Вот и все. Надеемся, что на этом простом примере вы поняли как сделать вывод последней записи. Если же, вдруг, у вас возник вопрос, не стесняйтесь, задавайте его в комментариях.
Комментарии (17) ↓
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
Огромное спасибо.
Жизнь - путешествие / 29 Сентябрь 2010 в 13:27
Вот. Как раз то, что надо. Искал как убрать дату. А ссылки будут отображаться как ссылки или не будут? И @никнеймы как будут отображаться?
Илья Федотов / 29 Сентябрь 2010 в 14:16
Жизнь – путешествие, ссылки, как и имена пользователей, будут отображаться и вести на указанный сайт и страницу @автора соответственно.
Жизнь – путешествие / 29 Сентябрь 2010 в 14:28
А убрать можно, поменяв какой-то кусок кода в скрипте?
Илья Федотов / 29 Сентябрь 2010 в 15:06
Жизнь – путешествие, в файле blogger.js отредактируйте строки 6 и 8.
Жизнь – путешествие / 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 можно добавить либо в заголовок сайта, окружив его специальными тегами (этот способ используется в примере):
либо подключить как отдельный файл (style.css), предварительно создав его и скопировав в него стили. Код ниже размещается так же в заголовке сайта:
P.S. Рекомендую посмотреть код примера, он поможет Вам быстрее разобраться в уроке.