Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Выводим твиты на любом сайте с помощью jQuery

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

Сегодня мы рассмотрим один из вариантов вывода последних сообщений из твиттера любого пользователя на страницах сайтов с помощью плагина Jtwt.js. Используя Jtwt.js, вы сможете отображать последние твиты, как в боковой колонке(сайдбаре), так и в отдельном блоке, например в шапке сайта, футере или в записях блога, да где угодно, лишь бы в радость.
Jtwt.js является очень легким, всего несколько строк, но при этом очень функциональным jQuery плагином.
 

Выводим твиты на любом сайте

 

На скриншоте показан пример вывода последних твитов из моего твиттер-аккаунта @dobrovoi, в отдельном блоке на темном фоне, как на сайте авторов плагина. С помощью сопутствующего файла стилей jtwt.css, который поставляется в комплекте с плагином, вы легко можете настроить по собственному вкусу, в соответствии с общим дизайном вашего сайта.

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

 

Подключение

 
Первым делом необходимо скачать сам плагин в комплекте с  css-файлом. Затем распакуйте архив и закачайте файлы jquery.jtwt.min.js и jtwt.css к себе на сервер. Файл javascript соответственно туда где у вас тихо-мирно прописались все необходимые скрипты, чаще всего это папочка js в директории с темой (для wordpress), не суть важно, главное правильно в последствии подключить их к документу. Что касается файла jtwt.css, его вообще можно не загружать, зачем огород городить, а просто открыть в блокноте, скопировать содержимое и вставить в ваш файл стилей (style.css) все правила и свойства,  для дальнейшего оформления блока.

Все файлы загружены, теперь осталось правильно подключить их к документу. Библиотеку jQuery подгружаем из «запасников» Google, прописываем наши файлы и исполняющий js в разделе <head></head>, выглядеть все будет примерно так:
 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.jtwt.min.js"></script>
        <link rel="stylesheet" href="jtwt.css" />
        <script type="text/javascript">
                $(window).load(function() {
                        $('#twitter').jtwt({
                             username: 'yourusername', // имя в twitter
                             count: 5,  //число выводимых твитов
                             image_size: 24 // размер аватарки
                        });
                });
        </script>

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

<div id="twitter"></div>

 

Настройки javascript

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

Вот код javascript со всеми доступными настройками и небольшими комментариями:
 

$('#twitter').jtwt({
        count : 5, // Количество твитов(любое разумное число).
        username : 'yourusername', // Ник в твиттере.
        query : 'searchquery', // Поисковый запрос.
        convert_links : boolean, //Преобразует хештеги в ссылки.
        image_size : 24, // Размер аватарки (любое разумное число).
        loader_text : 'loading tweets', // Текст при загрузке твитов
        no_result : 'No tweets found' // Если твиты не найдены
});

 
Jtwt.js использует Search API от , поэтому вы можете выполнять поисковые запросы вместо отображения последних твитов пользователей. Чтобы использовать эту функцию, необходимо просто добавить параметр запроса с соответствующим поисковым запросом. В этом случае у вас будут выводится твиты по результатам поиска. При этом нет необходимости указывать ник пользователя твиттера, нужно просто указать запрос через хештег, например #webdesign. Если вы указали имя пользователя в username, то Jtwt.js просто перезапишет его с данным запросом, то есть найдет твиты в этом аккаунте отвечающие запросу и выведет их на всеобщее обозрение.
 

$('#twitter').jtwt({
        query : '#webdesign', //Выводить твиты с хештегом #webdesign
});

 
Скачать Jtwt.js »

Всех с Праздником Великой Победы!

 

Всего комментариев: 4

  • Андрей: 13 мая, 2013 в 23:59

    Спасибо за подробный урок. Как вы любите говорить: — все с чувством, с толком и с расстановкой 🙂

    Ответить
    • driver: 14 мая, 2013 в 00:01

      Очень рад, что вам пригодилось.

      Ответить
  • Рейтер: 21 июля, 2015 в 15:05

    Уже не работает. кто знает в чем может быть проблема?

    Ответить
  • Иван с Урала: 21 февраля, 2016 в 01:52

    Свой код конечно хорошо, но лучше брать оригинальный, надежнее будет.

    Ответить

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>