14 мая 2011 Красивая лента упоминаний о сайте на jQueryКаждый день в твиттере появляются миллионы новых сообщений, ретвиттов и упоминаний. И всегда интересно знать, сколько сообщений из этого миллиона адресовано тебе или твоему блогу. В прошлых статях из рубрики «Twitter API» мы рассказывали о том, как создавать различные ленты и выводить сообщения любых пользователей. Сегодня вы узнаете, как реализовать не менее изящную по красоте и функционалу ленту, но с упоминаниями о сайте или какой-либо странице. В ленте или списке будут отображаться аватары и сообщения пользователей, рассказавшие своим фолловерам о страницах вашего проекта. Внешний вид блока мы напишем с помощью HTML и CSS, добавив несколько свойств из третьей версии этого языка, а сам скрипт, выводящий всю информацию, будет написан на jQuery. Т.к скрипт получился очень простым и легким в понимании и адаптации к любой веб-странице, многие могут пропустить пошаговое руководство по использованию и сразу скачать архив со всеми файлами. Ссылку на него, а так же на рабочий пример мы указали в конце статьи. Для остальных мы расскажем, как создать отдельную страницу с красивой лентой упоминаний о любом сайте. Этап 1 — XHTML
На первом этапе создадим блок с заголовком, названием сайта (адрес выводится скриптом, поэтому оставляем тег h2 пустым) и контейнером для вывода информации о упоминаниях. Этап 2 — CSSТеперь напишем стили, чтобы наш блок приобрел красивый внешней вид.
Класс tweet используется для контейнера с упоминаниями. Поменять имя класса или имена других внутренних стилей на свои можно в файле script. При этом не забудьте изменить названия на аналогичные в файле, код которого мы написали выше. Этап 3 — jQueryДля вывода используется Topsy API. Его использование позволяет находить и показывать сообщения за все время их жизни, в отличии от Twitter API, который может «потерять» некоторые твитты. После подключения библиотеки jQuery и скрипта, необходимо указать адрес сайта, сообщения о котором мы хотим прочитать. Для этого, в основной файл, добавляем следующий код:
Здесь задается имя сайта и id элемента для вывода сообщений. Если необходимо показывать упоминания для всех страниц блога — разместите код на каждой странице сайта, а вместо строк 3-5 напишите: $('#womtec').boastful(); Теперь рассмотрим файл script, отвечающий за вывод аватаров, сообщений и поиска упоминаний. В нем для нас есть только 2 интересные строчки. Первая — вывод сообщения, если оно не найдено (это сообщение можно изменить, если написанный нами текст вам не подходит) и вторая — ограничение на количество выводимых упоминаний (в нашем примере эта цифра равна пяти). В тексте исходного файла мы добавили комментарии, которые помогут быстрее разобраться и найти нужные строки кода. На этом все. Теперь, вы сможете самостоятельно добавить красивый список сообщений о вашей статье или сайте. Добавить новый комментарий |
ПоискПопулярные статьи
Комментарии
ДрузьяНашли ошибку? |
Комментарии (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
Да, неплохой код, использовал его на блоге, так как твиттером не пользуюсь.