неділя , Листопад 19 2017

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

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



Існує чимало різних способів відображення твітів на сайтах і блогах. Для WordPress наприклад, є своя купка спеціальних плагінів. Та й народні умільці з числа противників великої кількості плагінів, не дрімають, покопавшись у wordpress, явили пару-трійку рішень виведення твітів без використання плагінів. 
Не знаю, чи це сприяє розкрутці твіттер акаунту, чи це просто модна фішка, але людям подобається тема, а значить варто розглядати всі нові та цікаві варіанти виконання.

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

Ashampoo_Snap_2013.05.16_20h58m04s_001_

На скріні показаний приклад виведення останніх твітів з офіційного сайту Jtwt.js а ось самн він jtwt.hrbor.comЗа допомогою допоміжного файлу стилів jtwt.css, який додається до комплекту з плагіном, ви легко можете налаштувати за власним смаком, відповідно до загального дизайну вашого сайту.

Отже, давайте докладніше розглянемо саме підключення плагіна, а так само деякі його настройки, яких, до речі сказати, зовсім небагато.

Підключення плагіну Jtwt.js

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

Всі файли завантажені, тепер залишилося правильно підключити їх до документу. Бібліотеку jQuery підкдлючаєм з Google, прописуємо наші файли в розділі <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>

На завершення створимо контейнер з класом twitter, за допомогою якого ми зможемо надалі визначати відображення віджета і формувати його зовнішній вигляд в CSS.

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

Налаштування самого плагіну

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
});
Завантажити


Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers