Выводим твиты на любом сайте с помощью jQuery » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

20.04.2015
Без рубрики

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





                $(window).load(function() {
                        $('#twitter').jtwt({
                             username: 'yourusername', // имя в twitter
                             count: 5,  //число выводимых твитов
                             image_size: 24 // размер аватарки
                        });
                });

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

Настройки 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 от Twitter, поэтому вы можете выполнять поисковые запросы вместо отображения последних твитов пользователей. Чтобы использовать эту функцию, необходимо просто добавить параметр запроса с соответствующим поисковым запросом. В этом случае у вас будут выводится твиты по результатам поиска. При этом нет необходимости указывать ник пользователя твиттера, нужно просто указать запрос через хештег, например #webdesign. Если вы указали имя пользователя в username, то Jtwt.js просто перезапишет его с данным запросом, то есть найдет твиты в этом аккаунте отвечающие запросу и выведет их на всеобщее обозрение.

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

564 Просмотров

Благодарностей: 0

0