Скрипт лучших твитов

twitter статитика widget
Твиттер - благодатная почва для материала статей. Чего только для него не придумали: и кнопки и виджеты и автопостинг.
Вчера я задумался, а есть ли на свете скрипт, который бы выводил на отдельной странице список-статистику самых козырных постов, исходя из количества твитов и рейтинга самого сервиса.
И такой скрипт нашёлся.


Можете оценить его в действии (повторы в заголовках происходили до оптимизации заголовков title в шаблоне):


Демо посмотрели, а теперь ход установки:
1) Ставим, если ещё не стоит в блоге, ссылку на библиотеку jQuery
2) Заводим статическую страницу в блоге
3) Копируем на неё в html режиме редактора ↓

Ссылку на скрипт:
<script src="http://popular-on-twitter.googlecode.com/files/jquery.popular-on-twitter-1.0.min.js" type="text/javascript"></script>
Если не лень, то лучше скачайте скрипт, переложите на свой хостинг и пропишите в ссылке путь к захостенному скрипту. Это на всякий случай.

Стили:
<style type="text/css">
/* ul list */
ul.pot{
padding:0;
margin:0;
}
ul.pot li{
border-bottom:silver 1px solid;
float:left;
margin:1px 0 1px 0;
padding:2px;
list-style-type:none;
/* height:50px; */
width:100%;
overflow:hidden;
}
/* link span */
ul.pot span.pot-url{
display:block;
font-weight:bold;
}
ul.pot span.pot-url a{
text-decoration:none;
}
ul.pot span.pot-url a:hover{
text-decoration:underline;
}

/* tweet content */
ul.pot span.pot-tweet{
color:#333
}

/* link meta : tweets, score,.. line */
ul.pot span.pot-meta {
color:#006699;
display:block;
font-size:90%;
margin:3px 0 0;
}
ul.pot span.pot-meta a{
color:#006699;
text-decoration:none;
}
ul.pot span.pot-meta a:hover{
text-decoration:underline;
}
/* tweeter username span */
ul.pot span.pot-tweeter{
padding:0 2px;
}
/* tweets count span */
ul.pot span.pot-tweets{
padding:0 2px;
}
/* score span */
ul.pot span.pot-score{
padding:0 2px;
}

/* customize @user links */
ul.pot a.pot-at { }
/* customize #hashtags links */
ul.pot a.pot-hashtag { }
</style>

И вслед за стилями html код:
<div class="popular-on-twitter" options="{
site:'http://ваш-блог-трололо'
,show_n:0
,n:5
,animate:'height'
,tweeter_text:''
,show_tweet:1
}">
данные загружаются..</div>
Где:
site - сюда вписать url своего блога
tweeter_text:'' - текст перед "x tweets x scores"
show_n:0 - включает автообновление виджета
n:5 - выводить количество (5) ссылок за один раз

Источник.

Комментариев нет:

Отправить комментарий