Удобная твиттер лента в блоге на jQuery

12.01.2010

В данной заметке мы поведаем вам как сделать блог, где станут выводиться заключительные известия из вашей твиттер-ленты или же из ленты ваших приятелей. Для реализации станем возьмем на вооружение лишь Jquery и CSS. За счет этого расклада мы получим довольно эластичный блог. Его просто возможно ввести в любую часть странички, отредактировав исключительно те стили, которые дадут возможность обрести предельное однообразие с дизайном вашего web-сайта.

В качестве образца создадим блог, в котором выведем 20 заключительных записей из нескольких аккаунтов, а всю работу разобьем на 3 шага.

Этап 1 — XHTML

Твитты

Вывод твиттов будет работать исключительно когда интегрирован JavaScript. Поэтому все содержимое мы станем создавать при помощи JQuery. Это позволит удостовериться, что все действует верно. В противном случае, лента просто не отобразиться.

Этап 2 — CSS

С поддержкой стилей мы сделаем дизайн нашего блога.

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; }

Этап 3 — jQuery

Для вывода заключительных записей мы возьмем на вооружение Twitter API.

Но до того как увидеть работу скрипта мы подключим все плагины и таблицы-стилей:

Здесь мы добавили 2 таблицы стилей: style.css (дизай блога, который мы прописали на втором шаге) и scroll.css (стиль для полосы прокрутки).

Затем подключили jQuery библиотеку, плагин для прокрутки колесиком мыши и плагин JScrollPane.

В заключительней строчке добавили script.js. Этот скрипт и станет выводить наши твитты.

var tweetUsers = ['womtec','GoogleRussia'];

var buildString = «»;

$(document).ready(function() {

$(‘#twitter-ticker’).slideDown(‘slow’);

for(var i=0;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 = ‘

‘+this.from_user+’

‘+relativeTime(this.created_at)+’

‘+formatTwitString(this.text)+’

‘;

container.append(str);

});

container.jScrollPane();

}

function formatTwitString(str) {

str=’ ‘+str;

str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,’$1‘);

str = str.replace(/([^\w])\@([\w\-]+)/gm,’$1@$2‘);

str = str.replace(/([^\w])\#([\w\-]+)/gm,’$1#$2‘);

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 мы подключили плагин JScrollPane. С его помощью можно легко создать удобную полосу прокрутки, а благодаря MouseWheel мы добавили к этому блогу плавную прокрутку колесиком мыши.

Чтобы изменить количество аккаунтов из которых выводятся твитты нужно поменять значения в tweetUsers. При использовании двух или более аккаунтов они будут объедены и выводиться будут только твитты за последние 7 дней. В нашем случае их количество равно 20, но в переменной TweetTick (строка 12) вы можете изменить это число на любое другое.

Так же стоит обратить внимание на то, что у твиттера есть свои ограничения на количество, подключаемых tweetUsers, пользователей. Их количество не должно превышать семи.

Заключение

На этом простом примере мы разобрали, как сделать красивую и удобную твиттер ленту для любого сайта, используя только Jquery и CSS.