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

Выводим твиты на любом сайте с помощью 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 »

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

 

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

4 комментария
  1. Андрей says:

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

    Ответить
  2. Рейтер says:

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

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru