Виводимо твіти на будь-якому сайті з допомогою jQuery

37

Існує чимало різних способів відображення твітів на сайтах та блогах. Для 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 type="text/javascript" src="js/jquery.jtwt.min.js">
<link rel="stylesheet" href="jtwt.css" />
<script type="text/javascript">
$(window).load(function() {
$('#twitter').jtwt({
username: 'yourusername', // ім'я в twitter
count: 5, //число виведених твітів
image_size: 24 // розмір аватарки
});
});

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

У завершенні створимо контейнер з класом 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' // Якщо твіти не знайдені
});

$(‘#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
});

$(‘#twitter’).jtwt({
query : ‘#webdesign’, //Виводити твіти з хештегом #webdesign
});

Завантажити Jtwt.js »

Всіх з Святом Великої Перемоги!