Лучшие статьи категории «Твиттер»

Подписка

Красивая лента упоминаний о сайте на jQuery

Каждый день в твиттере появляются миллионы новых сообщений, ретвиттов и упоминаний. И всегда интересно знать, сколько сообщений из этого миллиона адресовано тебе или твоему блогу. В прошлых статях из рубрики «Twitter API» мы рассказывали о том, как создавать различные ленты и выводить сообщения любых пользователей. Сегодня вы узнаете, как реализовать не менее изящную по красоте и функционалу ленту, но с упоминаниями о сайте или какой-либо странице.

В ленте или списке будут отображаться аватары и сообщения пользователей, рассказавшие своим фолловерам о страницах вашего проекта. Внешний вид блока мы напишем с помощью HTML и CSS, добавив несколько свойств из третьей версии этого языка, а сам скрипт, выводящий всю информацию, будет написан на jQuery.

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

Этап 1 — XHTML

1
2
3
4
5
6
7
<div id="twitter">
	<h1>Лента упоминаний о сайте</h1>
	<!-- Контейнер с названием сайта -->
	<div id="top"><h2></h2></div>
	<!-- Контейнер для вывода упоминаний -->
	<div id="womtec"></div>
</div>

На первом этапе создадим блок с заголовком, названием сайта (адрес выводится скриптом, поэтому оставляем тег h2 пустым) и контейнером для вывода информации о упоминаниях.

Этап 2 — CSS

Теперь напишем стили, чтобы наш блок приобрел красивый внешней вид.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
* { margin:0; padding:0; }
a { text-decoration:none; border-bottom:1px solid #000; color:#000; }
a:hover { border-bottom:none; color:#666; }
 
/* Внешний вид для блока, созданного на первом этапе */
#twitter { width:450px; margin:40px auto; }
#twitter h1 { padding-bottom:40px; font-size:2.5em; line-height:35px; text-align:center; }
#top { width:340px; height:45px; margin:0px auto; background:url(topbar.png) repeat-x; position:relative; -moz-border-radius:6px 6px 0 0; -khtml-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; border-radius:6px 6px 0 0; }
#top h2 { color:#fff; font-size:16px; padding-top:13px; text-transform:uppercase; text-shadow:2px 1px 6px #333; text-align:center; }
#womtec { width:340px; margin:0px auto; padding:5px 0; background:#fff; -moz-border-radius:0 0 6px 6px; -khtml-border-radius:0 0 6px 6px; -webkit-border-radius:0 0 6px 6px; border-radius:0 0 6px 6px; overflow:hidden; }
 
/* Внешний вид контейнера с упоминаниями */
.tweet { float:left; text-align:left; font-size:0.9em; color:#eee; }
.tweet a { border:none; }
.tweet img { margin:5px 10px; }
.tweet .pointer { display:none; position:absolute; left:-9999px; margin:35px 0 0 8px; border-top:0; border-left:10px solid transparent;  border-right:10px solid transparent; border-bottom:10px solid #000; opacity:0.4; z-index:999; }
.tweet .message { width:280px; position:absolute; z-index:999; left:-9999px; background-color:#222; opacity:0.8; padding:5px; text-shadow:1px 1px 0 #000; -moz-border-radius:0 0 6px 6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; margin-top:35px; }

Класс tweet используется для контейнера с упоминаниями. Поменять имя класса или имена других внутренних стилей на свои можно в файле script. При этом не забудьте изменить названия на аналогичные в файле, код которого мы написали выше.

Этап 3 — jQuery

Для вывода используется Topsy API. Его использование позволяет находить и показывать сообщения за все время их жизни, в отличии от Twitter API, который может «потерять» некоторые твитты.

После подключения библиотеки jQuery и скрипта, необходимо указать адрес сайта, сообщения о котором мы хотим прочитать. Для этого, в основной файл, добавляем следующий код:

1
2
3
4
5
6
7
<script type="text/javascript">
$(document).ready(function() {
	var site = 'womtec.ru';
	$('#womtec').boastful({ location: 'http://'+site+'/' });
	$('#top h2').text(site);
});
</script>

Здесь задается имя сайта и id элемента для вывода сообщений. Если необходимо показывать упоминания для всех страниц блога — разместите код на каждой странице сайта, а вместо строк 3-5 напишите:

$('#womtec').boastful();

Теперь рассмотрим файл script, отвечающий за вывод аватаров, сообщений и поиска упоминаний. В нем для нас есть только 2 интересные строчки. Первая — вывод сообщения, если оно не найдено (это сообщение можно изменить, если написанный нами текст вам не подходит) и вторая — ограничение на количество выводимых упоминаний (в нашем примере эта цифра равна пяти). В тексте исходного файла мы добавили комментарии, которые помогут быстрее разобраться и найти нужные строки кода.

На этом все. Теперь, вы сможете самостоятельно добавить красивый список сообщений о вашей статье или сайте.

Смотреть пример | Скачать файлы

Категория: Твиттер Рубрики: , , Автор: Илья Федотов (G+)


Комментарии (5)

Hvost / 29 Июнь 2011 в 11:17

Супер! Я просто в восторге от Вашего сайта. Все ясно доступно и понятно, а самое главное, что ну очень полезно!

Web-master / 29 Июнь 2011 в 22:38

Какой-то явно спамерский комментарий (: Здесь вообще-то о ленте упоминаний на jQuery шла речь. Дима, привет.

Viktor37 / 11 Сентябрь 2011 в 00:19

Ага, есть такие товарищи, которые совсем нам блогерам не товарищи. У меня повысился спам на 460% за период с конца августа по сегодня.

Илья Федотов / 11 Сентябрь 2011 в 10:11

Viktor37, эту проблему можно быстро решить поставив несколько плагинов или сделать «фокус» с формой для комментарием. В категории «WordPress» есть статья как раз на эту тему.

Turbonet / 7 Март 2012 в 12:04

Да, неплохой код, использовал его на блоге, так как твиттером не пользуюсь.

Добавить новый комментарий

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

Популярные статьи

Комментарии

  • Кек: Ни один из сервисов не работает.
  • Alex: На самом деле все конечно правильно написано, но для России...
  • Анна: Несколько советов о том, как самому придумать логотип есть...
  • Agen Sabung: Great web site you have here. It’s hard to find excellent writing like yours these days. I really...
  • Павел Тимощенко: Аналогично скриню картинки для некоторых...
  • Зенков Андрей: Учитывая, что иконки служат для подсказки тем,...
  • Зенков Андрей: Дизайнер должен ответственно подойти к...
  • Оля: DizGraf, вот отличный русскоязычный бесплатный фотобанк.

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus