13.05.13, 23:15
0 комментарий
  Уроки

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

Существует немало различных способов отображения твитов на сайтах и блогах. Для 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 в разделе , выглядеть все будет примерно так:

  	<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 от Twitter, поэтому вы можете выполнять поисковые запросы вместо отображения последних твитов пользователей. Чтобы использовать эту функцию, необходимо просто добавить параметр запроса с соответствующим поисковым запросом. В этом случае у вас будут выводится твиты по результатам поиска. При этом нет необходимости указывать ник пользователя твиттера, нужно просто указать запрос через хештег, например #webdesign. Если вы указали имя пользователя в username, то Jtwt.js просто перезапишет его с данным запросом, то есть найдет твиты в этом аккаунте отвечающие запросу и выведет их на всеобщее обозрение.
  $('#twitter').jtwt({
	query : '#webdesign', //Выводить твиты с хештегом #webdesign
});

СКАЧАТЬ

Вес файла
9.42 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204