Twitter »
Удобная твиттер лента в блоге на jQuery
В этой статье вы узнаете как создать блок, где будут выводиться последние сообщения из вашей твиттер-ленты или из ленты ваших друзей. Для реализации будем использовать только Jquery и CSS без создания какого-либо дополнительного кода на стороне сервера или базы данных. За счет такого подхода мы получим достаточно гибкий блок. Его легко можно внедрить в любую часть страницы, отредактировав только те стили, которые позволят получить максимальное сходство с дизайном вашего сайта.
Такой же подход будет использоваться при реализации других примеров, прочитать о которых вы можете в следующих статьях:
- Список упоминаний (mention) о вас или ваших фолловерах на jQuery.
- Лента упоминаний о сайте в целом или какой-либо странице.
Но вернемся к твиттер-ленте. Итак …
В качестве примера сделаем блок, в котором выведем 20 последних записей из нескольких аккаунтов, а всю работу разобьем на 3 этапа.
Этап 1 — XHTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="twitter-ticker"> <!-- Контейнер для заголовка и иконки --> <div id="top-bar"> <div id="twitIcon"><img src="img/womtec.png" width="64" height="64" alt="Twitter" /></div> <h2 class="tut">Твитты</h2> </div> <!-- Контейнер с картиной загрузки, которая исчезает после загрузки твиттов --> <div id="tweet-container"> <img id="loading" src="img/loading.gif" width="16" height="11" alt="Loading" /> </div> <!-- Контейнер для вывода твиттов --> <div id="scroll"></div> </div> |
Вывод твиттов будет работать только когда включен JavaScript. Поэтому все содержимое мы будем показывать с помощью JQuery. Это позволит убедиться, что все работает правильно. В противном случае, лента просто не отобразиться.
Этап 2 — CSS
С помощью стилей мы создадим внешний вид нашего блока.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | body, h2, p, ul, li, ol { margin:0; padding:0; } body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; font-size:13px; background:url(img/top.jpg) repeat-x #474269; } p { padding-top:7px; } a,a:visited { color:#00bbff; text-decoration:none; outline:none; } a:hover { text-decoration:underline; } h2.tut { color:#fff; font-size:16px; text-transform:uppercase; padding:12px 0 0 58px; } #main { text-align:center; width:420px; margin:40px auto; } #twitter-ticker { width:200px; height:300px; color:#666; display:none; text-align:left; margin:40px auto 20px; background:url(img/slick.png) no-repeat #f5f5f5; } #tweet-container { height:230px; width:auto; overflow:hidden; } #twiticon { position:absolute; top:-25px; left:-10px; width:64px; height:64px; } #top-bar { height:45px; border-bottom:1px solid white; position:relative; margin-bottom:8px; background:url(img/topbar.png) repeat-x; } #loading { margin:100px 95px; } .tweet { border:1px solid #f0f0f0; width:auto; overflow:hidden; margin:8px 8px 0; padding:5px; background:url(img/transparent.png); } .tweet:first-child { margin-top:0; } .tweet .avatar,.tweet .user,.tweet .time { float:left; } .tweet .time { display:block; width:70%; font-size:13px; color:#aaa; white-space:nowrap; } .tweet .avatar img { width:36px; height:36px; border:1px solid #eee; margin:0 5px 5px 0; } .tweet .txt { clear:both; } .tweet .user { font-weight:bold; } |
А специально для IE6 добавим небольшой код, который поможет корректно отображать png картинки в этом браузере.
1 2 3 4 5 6 7 | <!--[if lt IE 7]> <style type="text/css"> div.tweet { background:none; border:none; } div#twitIcon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/womtec.png, sizingMethod=crop); } div#twitIcon img { display:none; } </style> < ![endif]--> |
Этап 3 — jQuery
Для вывода последних записей мы будет использовать Twitter API. Такой способ позволит получить данные без использования какого-либо кода на стороне сервера и без использования базы данных.
Но прежде чем рассмотреть работу скрипта мы подключим все плагины и таблицы-стилей:
1 2 3 4 5 6 7 8 | <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="scroll/scroll.css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="scroll/jquery.mousewheel.js"></script> <script type="text/javascript" src="scroll/jScrollPane.js"></script> <script type="text/javascript" src="script.js"></script> |
Здесь мы добавили две таблицы стилей: style.css (внешний вид блока, который мы написали на втором этапе) и scroll.css (стиль для полосы прокрутки).
Затем подключили jQuery библиотеку, плагин для прокрутки колесиком мыши и плагин JScrollPane.
В последней строке добавили script.js. Этот скрипт и будет выводить наши твитты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | var tweetUsers = ['womtec','GoogleRussia']; var buildString = ""; $(document).ready(function() { $('#twitter-ticker').slideDown('slow'); for(var i=0;i < tweetUsers.length;i++) { if(i!=0) buildString+='+OR+'; buildString+='from:'+tweetUsers[i]; } var fileref = document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=20"); document.getElementsByTagName("head")[0].appendChild(fileref); }); function TweetTick(ob) { var container=$('#tweet-container'); container.html(''); $(ob.results).each(function(el) { var str = ' <div class="tweet">\ <div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\ <div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\ <div class="time">'+relativeTime(this.created_at)+'</div>\ <div class="txt">'+formatTwitString(this.text)+'</div>\ '; container.append(str); }); container.jScrollPane(); } function formatTwitString(str) { str=' '+str; str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>'); str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>'); str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>'); return str; } function relativeTime(pastTime) { var origStamp = Date.parse(pastTime); var curDate = new Date(); var currentStamp = curDate.getTime(); var difference = parseInt((currentStamp - origStamp)/1000); if(difference < 0) return false; if(difference <= 5) return "Just now"; if(difference <= 20) return "Seconds ago"; if(difference <= 60) return "A minute ago"; if(difference < 3600) return parseInt(difference/60)+" minutes ago"; if(difference <= 1.5*3600) return "One hour ago"; if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago"; if(difference < 1.5*24*3600) return "One day ago"; var dateArr = pastTime.split(' '); return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:''); } |
В строке с номером 29 мы подключили плагин . С его помощью можно легко создать удобную полосу прокрутки, а благодаря MouseWheel мы добавили к этому блоку плавную прокрутку колесиком мыши.
Чтобы изменить количество аккаунтов из которых выводятся твитты нужно поменять значения в массиве tweetUsers. При использовании двух или более аккаунтов они будут объедены и выводиться будут только твитты за последние 7 дней. В нашем случае их количество равно 20, но в переменной TweetTick (строка 12) вы можете изменить это число на любое другое.
Так же стоит обратить внимание на то, что у твиттера есть свои ограничения на количество, подключаемых в массиве tweetUsers, пользователей. Их количество не должно превышать семи.
Заключение
На этом простом примере мы разобрали, как сделать красивую и удобную твиттер ленту для любого сайта, используя только Jquery и CSS. А так же, специально для вас, мы выложили исходные файлы, которые вы можете скачать.
Комментарии (46) ↓
Magir / 20 Февраль 2010 в 21:28
Толково, спасибо ) Люблю технические посты, и писать и читать )
Wellness / 21 Февраль 2010 в 13:33
Весьма разумно!
Yaroslav.CH / 21 Февраль 2010 в 23:24
Илья, отличный материал — большое спасибо!
АлексZ / 22 Февраль 2010 в 09:54
Супер, осталось оформить в виде плагина для WordPress.
Илья Федотов / 22 Февраль 2010 в 12:41
АлексZ, вряд ли мы возьмемся за создание плагина. Ведь для WordPress есть отличные плагины по выводу сообщений твиттера. Один из них — это News Tweet. Если хотите добавить в блог твиттер ленту, то стоит обратить внимание именно на News Tweet.
Regent / 23 Февраль 2010 в 11:19
А зачем создавать тег script, когда в jq есть getJSON?
Илья Федотов / 23 Февраль 2010 в 12:56
Regent, jQuery отличная вещь при манипуляциях с DOM, AJAX и всем остальным. Но иногда использование старого доброго JS не менее интересно, чем написание на jQuery (:
Sdxp / 23 Февраль 2010 в 13:51
Отличная заметочка.
Regent / 23 Февраль 2010 в 15:12
Возможно! Но зачем изобретать грабли опять, а не использовать уже изобретённые?
Да ещё и к тому же код уменьшится.
Кстати, здесь вообще можно jq не использовать (:
Kapel / 25 Февраль 2010 в 17:52
А есть ли способ трансляции сообщений по определенному слову (хэш-тегу), причем только от пользователей из списка Following?
Илья Федотов / 25 Февраль 2010 в 21:42
Kapel, есть возможность трансляции по хэш-тегу. Для этого удалите строки 6-9, а в строке 12 допиши по какому слову или признаку искать. Например:
При таком запросе мы увидим 20 записей на русском языке в которых есть хэш-тег #apple.
Что касается трансляции именно из списка following, советую поэкспериментировать с search.twitter.com. Он так же поможет при составлении различных запросов на вывод сообщений.
Pando / 2 Март 2010 в 20:37
Пошаговая инструкция всегда дружелюбна к читателям! Спасибо, что разжевано до мелочей!
Сережка / 25 Март 2010 в 09:09
Разобрал все. Мало кто так умеет. Спасибо.
Muzabbar / 1 Май 2010 в 00:44
Прикрутил у себя на сайте трансляции. Но вот незадача, хотелось бы выводить твиттов больше, чем от 7-ми аккаунтов. Вот почему-то тут — это реализовано. Подскажите как?
Илья Федотов / 1 Май 2010 в 10:22
Muzabbar, попробуйте удалить строки 6-9, а в 12 заменить запрос:
на запрос типа:
где, перечислите всех пользователей, твитты которых необходимо показывать.
Muzabbar / 1 Май 2010 в 15:32
Помогло, но несильно. Удалось добавить еще одного пользователя, т.о. их стало 8, а не 7. Но насколько я понимаю, это ограничение из-за ограничения самого твиттера на поиск, т.е. на search.json. Я не программер, потому не знаю как реализовать. Но можно ли к 12-ой строке как-то добавить еще один запрос на 8 пользователей. Тогда получится выводить уже для 16-ти пользователей.
Илья Федотов / 1 Май 2010 в 16:21
Muzabbar, у меня получилось добавить максимум 9 пользователей. Для данного способа — это предел. А добавление еще одного массива с пользователями и его вывода никакого результата не даст. Будет выводиться последний написанный запрос.
Muzabbar / 1 Май 2010 в 16:51
А как же тогда сделано по той ссылке, что я приводил? Если посмотреть у них исходный код, то там видно, что они тоже пользуются jquery.
Freakachoo / 5 Июль 2010 в 17:27
Извините, у вас ошибка в коде вот тут:
Переменная tweetusers должна писаться так же, как объявлялась tweetUsers (ошибку выдал фаербаг в FF, с ней не работало). Спасибо за скрипт.
Илья Федотов / 5 Июль 2010 в 17:54
Freakachoo, этот недочет был только с примером кода в статье. Архив и сам пример данной ошибки не имеют. Но все равно спасибо за дополнение.
Kst / 23 Август 2010 в 17:12
Отличный и красивый скрипт. Но почему недавно зарегистрированные в твиттере не выводятся?
Илья Федотов / 23 Август 2010 в 17:39
Kst, возможно проблема в том, что твитты недавно зарегистрированного пользователя были сделаны очень давно или их еще нет. А т.к. при выводе у ленты есть ограничение по времени, сообщения в нее не попадают. Еще один вариант — в ленте слишком много пользователей с большим количеством твиттов. Из-за этого твитты некоторых пользователей (у которых их мало) не выводятся.
Kst / 24 Август 2010 в 02:24
Спасибо за ответ. Я делал так — добавляю одного пользователя, зареган около месяца, твитты есть, но они не отображаются. Меняю на другого, который зареган около года, его твитты выводятся, но почему-то не самые последние, а только за 19 часов назад. Tе которые добавлены 2 часа назад, 1 час назад и меньше — не выводятся. Если добавляю твиттер гугла, то все нормально, видны самые последние твиты. Мистика какая-то.
Kst / 24 Август 2010 в 02:41
Вообще, кажется, что проблема в search.twitter.com, а может и в технологии вывода. Я так понимаю именно через него выводятся твитты? Т.к. если в поиске вводить юзера, у которого выводились твитты по скрипту за 19 часов, в поиске находятся именно твитты за 19 часов, а не те, что раньше.
Илья Федотов / 24 Август 2010 в 09:35
Kst, вы верно поняли суть проблемы. Она напрямую связана с API твиттера, у которого существенных лимит на вывод + свои внутренние неполадки.
Попробуйте создать список с пользователями, сообщения которых будите транслировать и сделайте вывод списка. Для этого удалите строки 6-9, а в 12 замените запрос на:
"http://twitter.com/name/lists/listname/statuses.json?callback=TweetTick&rpp=20"Где name — имя пользователя, а listname — имя списка этого пользователя.
Kst / 24 Август 2010 в 10:27
Создал список и назвал его «tweet», теперь висит на «Загрузка».
Илья Федотов / 24 Август 2010 в 11:43
Kst, для корректного отображения списков в запросе нужен http (пример изменен). В нем же &rpp=20 — необязательный параметр (ограничение количества выводимых твиттов). Если твитты не отображаются, то это связано с неполадками в API.
Kst / 24 Август 2010 в 15:36
Эх, все сделал как написали, твитты так и не появились. Как еще можно реализовать вывод? В инете много скриптов встречал, но этот приглянулся своей красивостью и простотой установки ):
Илья Федотов / 24 Август 2010 в 16:15
Kst, на нашем сайте разобран пример вывода последнего сообщения. Изменив несколько параметров в скрипте и отредактировав стили можно сделать ленту для одного пользователя.
Kst / 25 Август 2010 в 02:43
Спасибо, прикрутил тот, все работает, жаль аватарок нет, да и вообще мало что настроишь под себя.
Nomadru / 21 Ноябрь 2010 в 15:23
А как вместо твитов пользователя сделать вывод определённого канала? Например #ru
Илья Федотов / 21 Ноябрь 2010 в 16:48
Nomadru, внимательно прочитайте комментарии к статье!
Nomadru / 22 Ноябрь 2010 в 09:02
А если адаптировать под вывод этого скрипта? Я изменил css-файл и теперь у меня твит лента выводится на одну страничку. На страничке 20 твитов. Хотел с помощью этого плагина разделить их на несколько страничек. Как можно такое сделать?
Илья Федотов / 22 Ноябрь 2010 в 09:31
Nomadru, css-файл отвечает только за оформление. Чтобы сделать постраничную навигацию необходимо отредактировать файл script.
Nomadru / 22 Ноябрь 2010 в 14:02
Вот это, правильно, сделать и не получается ):
Whiteman / 25 Февраль 2011 в 22:59
А можно что-нибудь придумать, чтобы перезагружать фид, не перезагружая страницу?
Fedorsm / 1 Март 2011 в 21:59
Отличный скрипт, а авто вывод без перезагрузки страницы реально ли сделать?
Илья Федотов / 10 Март 2011 в 21:23
Whiteman, Fedorsm, для данного скрипта сделать вывод без перезагрузки возможно, но придется написать еще не одну строчку кода. Так же нельзя забывать и о том, что твиттер накладывает различные ограничения, такие как лимит запросов от одного сайта, количество отображаемых пользователей и другие.
Евгений / 16 Март 2011 в 11:56
Для этого добавьте пример с сайта codething. У меня получилось примерно следующее (пример для тэгов):
Mila / 31 Май 2011 в 17:29
Все скачала и установила на сайт, но почему то выводится только 2 последних твитта, хотя в скрипте указано 20. Что делать, как это можно исправить? Помогите, пожалуйста.
Илья Федотов / 31 Май 2011 в 17:42
Mila, всего скорее причина во временном ограничении. API Твиттера позволяет выводить сообщения только за последние 7-5 дней.
Максим / 16 Август 2011 в 12:49
Всем привет. У меня такая проблема. Встроил этот скрипт к себе на сайт, всё отлично выводиться, но возникает проблема. Я добавляю новый пост в твиттере, потом редактирую или удаляю его, а он все равно показывает мне эти посты в твиттер ленте и линки указываются уже на несуществующую страницу. Не могу понять почему. Подскажите пожалуйста! Пробовал другие виджеты, там такого глюка нету.
Илья Федотов / 16 Август 2011 в 13:10
Максим, скрипт обрабатывает сообщения из твиттера не сразу и иногда ему нужно несколько минут, чтобы данные полностью обновились.
P.S. Проверили пример из статьи добавив, а затем удалив тестовое сообщение. Лента обновилась, сообщение исчезло.
Ihizgil / 21 Август 2011 в 18:53
Здравствуйте! А как сделать так, чтобы вывести все твитты одного пользователя?
Илья Федотов / 21 Август 2011 в 19:21
Ihizgil, этот скрипт выводит сообщения только за последние 7 дней.
Как вариант, вы можете адаптировать скрипт для вывода последнего сообщения изменив в теле html-страницы переменную count и настроив внешний вид.
Ihizgil / 21 Август 2011 в 20:00
Илья Федотов, спасибо. Правда, я ничего не понял, но это не важно (: Я буду использовать импорт из Твиттера в Фейсбук, а с Фейсбука на сайт. У ФБ не стоит ограничений.