Twitter »
Удобная твиттер лента в блоге на jQuery
В этой статье мы расскажем вам как создать блок, где будут выводиться последние сообщения из вашей твиттер-ленты или из ленты ваших друзей. Для реализации будем использовать только Jquery и CSS без создания какого-либо дополнительного кода на стороне сервера или базы данных. За счет такого подхода мы получим достаточно гибкий блок. Его легко можно внедрить в любую часть страницы, отредактировав только те стили, которые позволят получить максимальное сходство с дизайном вашего сайта.
В качестве примера сделаем блок, в котором выведем 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. А так же, специально для вас, мы выложили исходные файлы, которые вы можете скачать.








Комментарии (20) ↓
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.
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, советую поэкспериментировать с . Он так же поможет при составлении различных запросов на вывод сообщений.
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, этот недочет был только с примером кода в статье. Архив и сам пример данной ошибки не имеют. Но все равно спасибо за дополнение.