Лучшие статьи категории «Твиттер»

Подписка

Удобная твиттер лента в блоге на jQuery

В этой статье вы узнаете как создать блок, где будут выводиться последние сообщения из вашей твиттер-ленты или из ленты ваших друзей. Для реализации будем использовать только jQuery и CSS без создания какого-либо дополнительного кода на стороне сервера или базы данных. За счет такого подхода мы получим достаточно гибкий блок. Его легко можно внедрить в любую часть страницы, отредактировав только те стили, которые позволят получить максимальное сходство с дизайном вашего сайта.

Такой же подход будет использоваться при реализации других примеров, узнать и прочитать о которых вы можете в рубрике «Twitter API».

В качестве примера сделаем блок, в котором выведем 20 последних записей из нескольких аккаунтов, а всю работу разобьем на 3 этапа.

Этап 1 — XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="twitter-ticker">
 
<!-- Контейнер для заголовка и иконки -->
<div id="top-bar">
<div id="twitIcon"><img src="img/womtec.png" width="64" height="64" alt="Twitter" /></div>
<h2 class="tut">Твитты</h2>
</div>
 
<!-- Контейнер с картиной загрузки, которая исчезает после загрузки твиттов -->
<div id="tweet-container">
<img id="loading" src="img/loading.gif" width="16" height="11" alt="Loading" />
</div>
 
<!-- Контейнер для вывода твиттов -->
<div id="scroll"></div>
 
</div>

Вывод твиттов будет работать только когда включен JavaScript. Поэтому все содержимое мы будем показывать с помощью jQuery. Это позволит убедиться, что все работает правильно. В противном случае, лента просто не отобразиться.

Этап 2 — CSS

С помощью стилей мы создадим внешний вид нашего блока.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body, h2, p, ul, li, ol { margin:0; padding:0; }
body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; font-size:13px; background:url(img/top.jpg) repeat-x #474269; }
p { padding-top:7px; }
 
a,a:visited { color:#00bbff; text-decoration:none; outline:none; }
a:hover { text-decoration:underline; }
 
h2.tut { color:#fff; font-size:16px; text-transform:uppercase; padding:12px 0 0 58px; }
 
#main { text-align:center; width:420px; margin:40px auto; }
#twitter-ticker { width:200px; height:300px; color:#666; display:none; text-align:left; margin:40px auto 20px; background:url(img/slick.png) no-repeat #f5f5f5; }
#tweet-container { height:230px; width:auto; overflow:hidden; }
#twiticon { position:absolute; top:-25px; left:-10px; width:64px; height:64px; }
#top-bar { height:45px; border-bottom:1px solid white; position:relative; margin-bottom:8px; background:url(img/topbar.png) repeat-x; }
#loading { margin:100px 95px; }
 
.tweet { border:1px solid #f0f0f0; width:auto; overflow:hidden; margin:8px 8px 0; padding:5px; background:url(img/transparent.png); }
.tweet:first-child { margin-top:0; }
.tweet .avatar,.tweet .user,.tweet .time { float:left; }
.tweet .time { display:block; width:70%; font-size:13px; color:#aaa; white-space:nowrap; }
.tweet .avatar img { width:36px; height:36px; border:1px solid #eee; margin:0 5px 5px 0; }
.tweet .txt { clear:both; }
.tweet .user { font-weight:bold; }

А специально для IE6 добавим небольшой код, который поможет корректно отображать png картинки в этом браузере.

1
2
3
4
5
6
7
<!--[if lt IE 7]>
<style type="text/css">
div.tweet { background:none; border:none; }
div#twitIcon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/womtec.png, sizingMethod=crop); }
div#twitIcon img { display:none; }
</style>
< ![endif]-->

Этап 3 — jQuery

Для вывода последних записей мы будет использовать Twitter API. Такой способ позволит получить данные без использования какого-либо кода на стороне сервера и без использования базы данных.

Но прежде чем рассмотреть работу скрипта мы подключим все плагины и таблицы-стилей:

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="scroll/scroll.css" />
 
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="scroll/jquery.mousewheel.js"></script>
<script type="text/javascript" src="scroll/jScrollPane.js"></script>
 
<script type="text/javascript" src="script.js"></script>

Здесь мы добавили две таблицы стилей: style.css (внешний вид блока, который мы написали на втором этапе) и scroll.css (стиль для полосы прокрутки).

Затем подключили jQuery библиотеку, плагин для прокрутки колесиком мыши и плагин JScrollPane.

В последней строке добавили script.js. Этот скрипт и будет выводить наши твитты.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var tweetUsers = ['womtec','GoogleRussia'];
var buildString = "";
 
$(document).ready(function() {
	$('#twitter-ticker').slideDown('slow');
	for(var i=0;i < tweetUsers.length;i++) {
		if(i!=0) buildString+='+OR+';
		buildString+='from:'+tweetUsers[i];
	}
	var fileref = document.createElement('script');	
	fileref.setAttribute("type","text/javascript");
	fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=20");
	document.getElementsByTagName("head")[0].appendChild(fileref);
});
 
function TweetTick(ob) {
	var container=$('#tweet-container');
	container.html('');	
	$(ob.results).each(function(el) {
	var str = '	<div class="tweet">\
			<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
			<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\
			<div class="time">'+relativeTime(this.created_at)+'</div>\
			<div class="txt">'+formatTwitString(this.text)+'</div>\
			';
	container.append(str);	
	});	
	container.jScrollPane();
}
 
function formatTwitString(str) {
	str=' '+str;
	str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
	str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
	str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
	return str;
}
 
function relativeTime(pastTime) {	
	var origStamp = Date.parse(pastTime);
	var curDate = new Date();
	var currentStamp = curDate.getTime();	
	var difference = parseInt((currentStamp - origStamp)/1000);
	if(difference < 0) return false;
	if(difference <= 5) return "Just now";
	if(difference <= 20) return "Seconds ago";
	if(difference <= 60) return "A minute ago";
	if(difference < 3600) return parseInt(difference/60)+" minutes ago";
	if(difference <= 1.5*3600) return "One hour ago";
	if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago";
	if(difference < 1.5*24*3600) return "One day ago";	
	var dateArr = pastTime.split(' ');
	return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}

В строке с номером 29 мы подключили плагин jScrollPane. С его помощью можно легко создать удобную полосу прокрутки, а благодаря MouseWheel мы добавили к этому блоку плавную прокрутку колесиком мыши.

Чтобы изменить количество аккаунтов из которых выводятся твитты нужно поменять значения в массиве tweetUsers. При использовании двух или более аккаунтов они будут объедены и выводиться будут только твитты за последние 7 дней. В нашем случае их количество равно 20, но в переменной TweetTick (строка 12) вы можете изменить это число на любое другое.

Так же стоит обратить внимание на то, что у твиттера есть свои ограничения на количество, подключаемых в массиве tweetUsers, пользователей. Их количество не должно превышать семи.

Заключение

На этом простом примере мы разобрали, как сделать красивую и удобную твиттер ленту для любого сайта, используя только jQuery и CSS. А так же, специально для вас, мы выложили исходные файлы, которые вы можете скачать.

Смотреть пример | Скачать файлы

Категория: Твиттер Рубрики: , , Автор: Илья Федотов (G+)


Комментарии (70)

Magir / 20 Февраль 2010 в 21:28

Толково, спасибо ) Люблю технические посты, и писать и читать )

Wellness / 21 Февраль 2010 в 13:33

Весьма разумно!

Yaroslav.CH / 21 Февраль 2010 в 23:24

Илья, отличный материал — большое спасибо!

АлексZ / 22 Февраль 2010 в 09:54

Супер, осталось оформить в виде плагина для WordPress.

Илья Федотов / 22 Февраль 2010 в 12:41

АлексZ, вряд ли мы возьмемся за создание плагина. Ведь для WordPress есть отличные плагины по выводу сообщений твиттера. Один из них — это News Tweet. Если хотите добавить в блог твиттер ленту, то стоит обратить внимание именно на News Tweet.

Regent / 23 Февраль 2010 в 11:19

А зачем создавать тег script, когда в jq есть getJSON?

Илья Федотов / 23 Февраль 2010 в 12:56

Regent, jQuery отличная вещь при манипуляциях с DOM, AJAX и всем остальным. Но иногда использование старого доброго JS не менее интересно, чем написание на jQuery (:

Sdxp / 23 Февраль 2010 в 13:51

Отличная заметочка.

Regent / 23 Февраль 2010 в 15:12

Возможно! Но зачем изобретать грабли опять, а не использовать уже изобретённые?
Да ещё и к тому же код уменьшится.

Кстати, здесь вообще можно jq не использовать (:

Kapel / 25 Февраль 2010 в 17:52

А есть ли способ трансляции сообщений по определенному слову (хэш-тегу), причем только от пользователей из списка Following?

Илья Федотов / 25 Февраль 2010 в 21:42

Kapel, есть возможность трансляции по хэш-тегу. Для этого удалите строки 6-9, а в строке 12 допиши по какому слову или признаку искать. Например:

search.twitter.com/search.json?q=&tag=apple&lang=ru&callback=TweetTick&rpp=20

При таком запросе мы увидим 20 записей на русском языке в которых есть хэш-тег #apple.

Что касается трансляции именно из списка following, советую поэкспериментировать с search.twitter.com. Он так же поможет при составлении различных запросов на вывод сообщений.

Pando / 2 Март 2010 в 20:37

Пошаговая инструкция всегда дружелюбна к читателям! Спасибо, что разжевано до мелочей!

Сережка / 25 Март 2010 в 09:09

Разобрал все. Мало кто так умеет. Спасибо.

Muzabbar / 1 Май 2010 в 00:44

Прикрутил у себя на сайте трансляции. Но вот незадача, хотелось бы выводить твиттов больше, чем от 7-ми аккаунтов. Вот почему-то тут — это реализовано. Подскажите как?

Илья Федотов / 1 Май 2010 в 10:22

Muzabbar, попробуйте удалить строки 6-9, а в 12 заменить запрос:

search.json?q=+buildString+

на запрос типа:

search.json?q=from%3womtec+from%3GoogleRussia+from%3Muzabbar …

где, перечислите всех пользователей, твитты которых необходимо показывать.

Muzabbar / 1 Май 2010 в 15:32

Помогло, но несильно. Удалось добавить еще одного пользователя, т.о. их стало 8, а не 7. Но насколько я понимаю, это ограничение из-за ограничения самого твиттера на поиск, т.е. на search.json. Я не программер, потому не знаю как реализовать. Но можно ли к 12-ой строке как-то добавить еще один запрос на 8 пользователей. Тогда получится выводить уже для 16-ти пользователей.

Илья Федотов / 1 Май 2010 в 16:21

Muzabbar, у меня получилось добавить максимум 9 пользователей. Для данного способа — это предел. А добавление еще одного массива с пользователями и его вывода никакого результата не даст. Будет выводиться последний написанный запрос.

Muzabbar / 1 Май 2010 в 16:51

А как же тогда сделано по той ссылке, что я приводил? Если посмотреть у них исходный код, то там видно, что они тоже пользуются jquery.

Freakachoo / 5 Июль 2010 в 17:27

Извините, у вас ошибка в коде вот тут:

for(var i=0;i<tweetusers.length;i++)

Переменная tweetusers должна писаться так же, как объявлялась tweetUsers (ошибку выдал фаербаг в FF, с ней не работало). Спасибо за скрипт.

Илья Федотов / 5 Июль 2010 в 17:54

Freakachoo, этот недочет был только с примером кода в статье. Архив и сам пример данной ошибки не имеют. Но все равно спасибо за дополнение.

Kst / 23 Август 2010 в 17:12

Отличный и красивый скрипт. Но почему недавно зарегистрированные в твиттере не выводятся?

Илья Федотов / 23 Август 2010 в 17:39

Kst, возможно проблема в том, что твитты недавно зарегистрированного пользователя были сделаны очень давно или их еще нет. А т.к. при выводе у ленты есть ограничение по времени, сообщения в нее не попадают. Еще один вариант — в ленте слишком много пользователей с большим количеством твиттов. Из-за этого твитты некоторых пользователей (у которых их мало) не выводятся.

Kst / 24 Август 2010 в 02:24

Спасибо за ответ. Я делал так — добавляю одного пользователя, зареган около месяца, твитты есть, но они не отображаются. Меняю на другого, который зареган около года, его твитты выводятся, но почему-то не самые последние, а только за 19 часов назад. Tе которые добавлены 2 часа назад, 1 час назад и меньше — не выводятся. Если добавляю твиттер гугла, то все нормально, видны самые последние твиты. Мистика какая-то.

Kst / 24 Август 2010 в 02:41

Вообще, кажется, что проблема в search.twitter.com, а может и в технологии вывода. Я так понимаю именно через него выводятся твитты? Т.к. если в поиске вводить юзера, у которого выводились твитты по скрипту за 19 часов, в поиске находятся именно твитты за 19 часов, а не те, что раньше.

Илья Федотов / 24 Август 2010 в 09:35

Kst, вы верно поняли суть проблемы. Она напрямую связана с API твиттера, у которого существенных лимит на вывод + свои внутренние неполадки.

Попробуйте создать список с пользователями, сообщения которых будите транслировать и сделайте вывод списка. Для этого удалите строки 6-9, а в 12 замените запрос на:

1
"http://twitter.com/name/lists/listname/statuses.json?callback=TweetTick&rpp=20"

Где name — имя пользователя, а listname — имя списка этого пользователя.

Kst / 24 Август 2010 в 10:27

Создал список и назвал его «tweet», теперь висит на «Загрузка».

Илья Федотов / 24 Август 2010 в 11:43

Kst, для корректного отображения списков в запросе нужен http (пример изменен). В нем же &rpp=20 — необязательный параметр (ограничение количества выводимых твиттов). Если твитты не отображаются, то это связано с неполадками в API.

Kst / 24 Август 2010 в 15:36

Эх, все сделал как написали, твитты так и не появились. Как еще можно реализовать вывод? В инете много скриптов встречал, но этот приглянулся своей красивостью и простотой установки ):

Илья Федотов / 24 Август 2010 в 16:15

Kst, на нашем сайте разобран пример вывода последнего сообщения. Изменив несколько параметров в скрипте и отредактировав стили можно сделать ленту для одного пользователя.

Kst / 25 Август 2010 в 02:43

Спасибо, прикрутил тот, все работает, жаль аватарок нет, да и вообще мало что настроишь под себя.

Nomadru / 21 Ноябрь 2010 в 15:23

А как вместо твитов пользователя сделать вывод определённого канала? Например #ru

Илья Федотов / 21 Ноябрь 2010 в 16:48

Nomadru, внимательно прочитайте комментарии к статье!

Nomadru / 22 Ноябрь 2010 в 09:02

А если адаптировать под вывод этого скрипта? Я изменил css-файл и теперь у меня твит лента выводится на одну страничку. На страничке 20 твитов. Хотел с помощью этого плагина разделить их на несколько страничек. Как можно такое сделать?

Илья Федотов / 22 Ноябрь 2010 в 09:31

Nomadru, css-файл отвечает только за оформление. Чтобы сделать постраничную навигацию необходимо отредактировать файл script.

Nomadru / 22 Ноябрь 2010 в 14:02

Вот это, правильно, сделать и не получается ):

Whiteman / 25 Февраль 2011 в 22:59

А можно что-нибудь придумать, чтобы перезагружать фид, не перезагружая страницу?

Fedorsm / 1 Март 2011 в 21:59

Отличный скрипт, а авто вывод без перезагрузки страницы реально ли сделать?

Илья Федотов / 10 Март 2011 в 21:23

Whiteman, Fedorsm, для данного скрипта сделать вывод без перезагрузки возможно, но придется написать еще не одну строчку кода. Так же нельзя забывать и о том, что твиттер накладывает различные ограничения, такие как лимит запросов от одного сайта, количество отображаемых пользователей и другие.

Евгений / 16 Март 2011 в 11:56

Для этого добавьте пример с сайта codething. У меня получилось примерно следующее (пример для тэгов):

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
	show(); setInterval('show()',1000);
});
 
function show() {
	$('#twitter-ticker').slideDown('slow');
	var fileref = document.createElement('script');
	fileref.setAttribute("type","text/javascript");
	fileref.setAttribute("src", "http://search.twitter.com/search.json?q=&amp;tag=siw&amp;lang=ru&amp;callback=TweetTick&amp;rpp=20");
	document.getElementsByTagName("head")[0].appendChild(fileref);
}

Mila / 31 Май 2011 в 17:29

Все скачала и установила на сайт, но почему то выводится только 2 последних твитта, хотя в скрипте указано 20. Что делать, как это можно исправить? Помогите, пожалуйста.

Илья Федотов / 31 Май 2011 в 17:42

Mila, всего скорее причина во временном ограничении. API Твиттера позволяет выводить сообщения только за последние 7-5 дней.

Максим / 16 Август 2011 в 12:49

Всем привет. У меня такая проблема. Встроил этот скрипт к себе на сайт, всё отлично выводиться, но возникает проблема. Я добавляю новый пост в твиттере, потом редактирую или удаляю его, а он все равно показывает мне эти посты в твиттер ленте и линки указываются уже на несуществующую страницу. Не могу понять почему. Подскажите пожалуйста! Пробовал другие виджеты, там такого глюка нету.

Илья Федотов / 16 Август 2011 в 13:10

Максим, скрипт обрабатывает сообщения из твиттера не сразу и иногда ему нужно несколько минут, чтобы данные полностью обновились.

P.S. Проверили пример из статьи добавив, а затем удалив тестовое сообщение. Лента обновилась, сообщение исчезло.

Ihizgil / 21 Август 2011 в 18:53

Здравствуйте! А как сделать так, чтобы вывести все твитты одного пользователя?

Илья Федотов / 21 Август 2011 в 19:21

Ihizgil, этот скрипт выводит сообщения только за последние 7 дней.

Как вариант, вы можете адаптировать скрипт для вывода последнего сообщения изменив в теле html-страницы переменную count и настроив внешний вид.

Ihizgil / 21 Август 2011 в 20:00

Илья Федотов, спасибо. Правда, я ничего не понял, но это не важно (: Я буду использовать импорт из Твиттера в Фейсбук, а с Фейсбука на сайт. У ФБ не стоит ограничений.

Sergey / 16 Апрель 2012 в 12:19

Здравствуйте. Благодарю Вас за статью, очень полезная информация.

Есть вопрос — можно ли организовать вывод в ленту сообщений пользователя, исключая личные сообщения (те, что начинаются с @)?

Илья Федотов / 16 Апрель 2012 в 15:59

Sergey, я вижу здесь два возможных варианта. Первый — поэкспериментировать с расширенным поиском, найдя нужный признак, как это сделано в трансляции по хэш-тегу. Второй — написать дополнительную функцию, которая будет удалять/скрывать контейнер с классом tweet где есть символ «@».

Sergey / 16 Апрель 2012 в 16:30

Благодарю за оперативный ответ. Будем разбираться (:

Если не трудно, подскажите где почитать о классах tweet и запросах расширенного поиска — в первом предложенном Вами варианте по хэш-тегу отображаются отобранные твитты, а мне нужно их скрывать. Так что оба варианта надо копать поглубже.

Илья Федотов / 16 Апрель 2012 в 22:12

Sergey, расширенный поиск можно опробовать на search-advanced. Чтобы исключить из ленты реплаи добавьте функцию searchReplyTweet

1
2
3
4
5
6
function searchReplyTweet(str) {
	str = str.search(/^[\@]+/i);
	if(str==0) { var result = true; }
	else { var result = false; }
	return result;
}

и замените строки 19-27 (начало и конец идентичны):

1
2
3
4
5
6
7
8
9
10
11
12
$(ob.results).each(function(el){
	var reply = searchReplyTweet(this.text);
	if(reply==false) {
		var str = '<div class="tweet">\
			<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank" rel="nofollow"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
			<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank" rel="nofollow">'+this.from_user+'</a></div>\
			<div class="time">'+relativeTime(this.created_at)+'</div>\
			<div class="txt">'+formatTwitString(this.text)+'</div>\
			</div>';
	}
	container.append(str);
});

Sergey / 16 Апрель 2012 в 22:59

Илья, искренне благодарю за помощь еще раз! Ваши дополнения к скрипту сработали корректно — реплаи исключены из ленты.

Надежда / 7 Май 2012 в 14:35

Огромное спасибо за статью!

Евгений / 9 Январь 2013 в 12:53

Отлично, давно подобное искал. Но есть два вопроса (в JS не силён). Первый: как сделать, чтобы время написания твитта показывалось не гринвичское, а московское? Второй: как сделать, чтобы месяц в дате был на русском языке (или цифрами)?

Илья Федотов / 9 Январь 2013 в 13:26

Евгений, чтобы выводить в датах месяца на русском нужно сделать следующее. Во-первых, перевести фразы в функции relativeTime (One day ago = Один день назад). Во-вторых, добавить функцию russianMonth в конец файла script.js

function russianMonth(engMonth) {
	var rusMonth = "";
	switch(engMonth) {
		case "Jan": rusMonth = "Янв"; break;
		case "Feb": rusMonth = "Фев"; break;
		case "Mar": rusMonth = "Мар"; break;
		case "Apr": rusMonth = "Апр"; break;
		case "May": rusMonth = "Май"; break;
		case "Jun": rusMonth = "Июн"; break;
		case "Jul": rusMonth = "Июл"; break;
		case "Aug": rusMonth = "Авг"; break;
		case "Sep": rusMonth = "Сен"; break;
		case "Oct": rusMonth = "Окт"; break;
		case "Nov": rusMonth = "Ноя"; break;
		case "Dec": rusMonth = "Дек"; break;
	}
	return rusMonth;
}

Затем, в этом же файле, в функции relativeTime добавить

dateArr[2] = russianMonth(dateArr[2]);

после строки

var dateArr = pastTime.split(' ');

По желанию, можно выводить полное название месяца, изменив переменную rusMonth для каждого значения.

Что касается времени твитта, то оно, если не ошибаюсь, выводится московское.

Евгений / 9 Январь 2013 в 13:43

Спасибо за оперативный ответ. Разобрался, что к чему, работает.

Паша / 27 Январь 2013 в 03:30

Доброй ночи. Подскажите пожалуйста, как в файле script.js, сделать чтобы имя юзера (tweetUsers) менялось в зависимости от того, на какой странице мы находимся. Как эту функцию написать в javascript скрипт? Есть связь с базой Mysql. Например для php у меня идет функция для получения информации о странице:

function page_data($title,$lang) {
    db_connect();
    $query = sprintf("SELECT * FROM pages WHERE pages.title_url = '%s' AND pages.lang = '%s' ", mysql_real_escape_string($title), mysql_real_escape_string($lang));
    $result = mysql_query($query); 
    $row = mysql_fetch_array($result);
    return $row;                
}

Потом на любой странице можно вывести вот так, где ’s’ — это отдельное поле для каждой страницы в таблице базы данных Mysql. Можно ли в javascript доставать из базы в те скобки переменные значения?

Простыми словами мне надо чтобы на одном сайте можно было просматривать твиты разных людей, на разных страницах ) Помогите, очень надо.

Илья Федотов / 27 Январь 2013 в 10:46

Паша, добавьте вот такую функцию:

function getUserForEachPage(currentUrl) {
	var user = "";
	// Удаляем окончание, в примере — .html
	currentUrl = currentUrl.substr(0,currentUrl.length - 5);
	// Удаляем название домена, в примере — http://womtec.ru/
	currentUrl = currentUrl.substr(currentUrl.indexOf('.') + 4);
	// В зависимости от страницы выбираем пользователя
	switch(currentUrl) {
		// После преобразований переменная currentUrl = folder/page
		case "folder/page": user = "womtec"; break;
		default: user = "other";
	}
	return user;
}

А затем замените строку 1 на следующее:

// Вызываем функцию и определяем текущий url
// В примере это страница — http://womtec.ru/folder/page.html
var newUsers = getUserForEachPage(window.location.href);
var tweetUsers = [newUsers];

После этого вы можете добавить нужное количество страниц и имена пользователей, которых вы хотите выводить на этих страницах.

Паша / 27 Январь 2013 в 14:34

Спасибо большое! Сейчас буду пробовать, но мне кажется, я немного не до конца сформулировал. Так вот, у меня сайт, на нем 8 php-страниц (категории), которые отображают для каждой страницы отдельное поле в таблице Mysql. На каждую из этих страниц подгружаются, к примеру, информация про 100 разных людей, занесенных в таблицу, и для каждого из этих людей должно быть именно его твиттер окно. А я так понял, функция, что Вы написали, будет выводить одно твиттер окно для одной страницы, то есть для 1 из 8 категорий, а мне надо, чтобы выводило на одной странице 100 разных твиттер окон, вот к чему я.

Илья Федотов / 27 Январь 2013 в 16:51

Паша, вы можете добавить к списку еще 6 пользователей (это предел/ограничение API твиттера), тогда в одном окне будут выводиться их твитты за последние 5-7 дней (опять же ограничение API).

Сделать на одной странице 100 таких окон может и не получиться. Но, вы можете попробовать выводит эти окна в цикле меняя id контейнера (строка 17) в функции TweetTick и имена пользователей. Для вывода определенных людей из базы можно либо вбить их в функцию, которая написана в предыдущем комментарии, либо сделать ajax-запрос и с его помощью формировать список пользователей. Попробуйте поэкспериментировать в этих направлениях.

Паша / 27 Январь 2013 в 17:44

Спасибо за совет, но для меня это будет сложно, а окна вывести очень хотелось бы. У меня люди выводятся в каждой категории вот так:

$page_data = page_data($view,$lang);
switch($view) {
    case "film":
        $title = $_GET['t'];
        if(!empty($title)) {
            $page_data = page_data($view,$lang);
            $page_data = get_data($view,$title,$lang);
        }
        $film = select_data($view,$lang);
    break;
...
$arr = array('film'...);

Это пример одного из кейсов. На какую страницу перешел пользователь, такой кейс и будет выполнятся … Нет ли такого же в javascript?

Илья Федотов / 27 Январь 2013 в 18:33

Паша, функция getUserForEachPage работает аналогично. Вам лишь нужно ее адаптировать.

Паша / 27 Январь 2013 в 20:12

У меня сайт на локалхосте, что тут прописать?

currentUrl = currentUrl.substr(currentUrl.indexOf('.') + 4);

Илья Федотов / 28 Январь 2013 в 19:38

Паша, подробные комментарии к этой строчке даны здесь.

Паша / 28 Январь 2013 в 22:44

Спасибо.

Евгений / 7 Июнь 2013 в 00:04

Перестал работать. Судя по всему, что-то со стороны разработчиков Твиттера. Обидно.

Muzabbar / 28 Сентябрь 2013 в 18:27

Что-то не выводит твиты. Что поправить, чтобы заработало?

Илья Федотов / 28 Сентябрь 2013 в 21:48

Muzabbar, несколько месяцев назад Twitter перешел на новую версию API, из-за этого код в статье работать не будет. Пока вы можете самостоятельно изучить нововведения на официальном сайте, но совсем скоро мы обновим эту статью или напишем новую, где расскажем как вывести ленту сообщения используя новый функционал (Twitter API v1.1).

Muzabbar / 29 Сентябрь 2013 в 00:22

Изучил нововведения и подправил вывод твитов.

Dlyatorrenta / 11 Июнь 2015 в 06:42

Не работает пример, твиты не выводятся. Висит значок бесконечная загрузка. Что исправить, чтобы заработало?

Илья Федотов / 11 Июль 2015 в 14:19

Dlyatorrenta, ответ на ваш вопрос, есть выше в комментариях.

Комментирование этой статьи закрыто ...

Поиск

Популярные статьи

Комментарии

  • Павел Тимощенко: Аналогично скриню картинки для некоторых...
  • Зенков Андрей: Учитывая, что иконки служат для подсказки тем,...
  • Зенков Андрей: Дизайнер должен ответственно подойти к...
  • Оля: DizGraf, вот отличный русскоязычный бесплатный фотобанк.
  • V.V: В копилку еще один типограф Дениса Селезнёва на JavaScript.
  • Сергей: Спасибо за примеры инфографики. Для тех, кому нужны еще...
  • Андрей Зенков: Спасибо автору. Хорошая подборка. Аж стыдно за то,...
  • Адениум: Наука даром не дается — наука трудом берется....

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus