Twitter в последнее время становится всё более и более популярным. Многие блоггеры уже установили различные скрипты к себе на блог для вывода последних сообщений из своего twitter'a. Некоторые сделали это на PHP, некоторые с помощью JаvaScript.
Я недавно тоже прикрутил к шаблону своего блога JS, который выводит последние сообщения из twitter'а, и решил написать об этом отдельный пост. Таких скриптов много, поэтому в этом посте я решил рассказать всего о 2х скриптах, один из которых я использую сам, и считаю его лучшим, а второй я использовал раньше, но из-за преобладания в нём минимализма - сменил.
Сначала расскажу о скрипте, который использовал раньше. Лежит он на twitter. com, названия его я так и не на шел. Даже в самом скрипте не указано ни названия, ни имя автора. Ну, это собственно и не важно, главное что скрипт работает и весьма прост в установке.
Для того чтобы установить его к себе на блог(сайт), для начала необходимо прикрутить сам скрипт к странице. Для этого между тегами , а ещё лучше перед вставьте:
Где UserName это Ваш ник в twitter, а count=5 - количество выводимых записей. Далее, в то место, где должны выводится сообщения, необходимо вставить:
Мой twitter
Это ещё не всё, т. к. с помощью CSS можно настроить внешний вид выводимых сообщений. CSS это конечно же личное дело каждого, но у моего шаблона, к примеру, в файле стилей для данного блока прописаны следующие правила:
#twitter_update_list{ /* Параметры для всего блока */ font-size:12px; line-height:1.5em; font-style: italic;
}
#twitter_update_list li{ /* Параметры для каждой записи */ padding:0 0 0 0; color:#000;
}
#twitter_update_list a{ /* Параметры для отображения ссылок - даты */ font-size:10px! important; font-style:italic; display:block; margin:0 0 0 0;
}
#twitter_update_list span a{ /* Параметры для отображения ссылок */ font-size:12px! important; line-height:1.5em; font-style: italic; display:inline; margin:0;
}
В CSS сложного ничего нет. Если Вам непонятно какое-то свойство, вбейте его название в любую поисковую систему, например Яндекс, и найдёте пояснение для данного свойства, а также примеры его использования.
Ну а теперь расскажу о более понравившемся для меня jQuery плагине - jQuery SimpleTweet, о котором я узнал на блоге Черновой Ирины. jQuery SimpleTweet Plugin получился путём упрощения и русификации Ириной jQueryTweet Plugin. ad
Данный плагин умеет выводить хэштеги ссылками, что не поддерживает предыдущий скрипт, и русифицирован, то есть фразы типа "26 minutes ago" он выводит как "26 минут назад".
Также плагин может выводить аватарку владельца аккаунта, выводить сообщения из нескольких аккаунтов, объединяя их в одну ленту, но это мне уже не нужно. 😉
Варианты отправки личных сообщений - видео
Устанавливается плагин за 4 простых шага:
1. Подключаем библиотеку jQuery. Для этого между тегами необходимо вставить:
Или:
google. load("jquery", "1");
2. Подключаем сам плагин jQuery SimpleTweet. Вставляем между тегами либо перед :
Где js - эта папка на сервере в которой лежит файл jquery. simpletweet. js. Все необходимые файлы Вы сможете скачать в конце поста, а также посмотреть пример, демонстрирующий работу плагина.
3. Настраиваем плагин. Сразу после строки, вставленной в предыдущем шаге 2 вставляем:
$(document).ready(function(){
$(".twitter").simpletweet({ username: "UserName", count: 10, avatar_size: 48, intro_text: 'Следуй за UserName!', loading_text: "Загрузка..."
});
});
Где UserName Ваш логин в Twitter, count - количество выводимых записей, avatar_size - размер аватара пользователя, intro_text - текст перед блоком вывода сообщений, loading_text - текст, который отображается при загрузке сообщений. Есть ещё ряд параметров: outro_text - текст после блока вывода сообщений, join_text - текст, который выводится между датой и сообщением.
4. Настраиваем внешний вид с помощью CSS. Пример опять же приведу из своего файла стилей:
.tweet_loading{ /* Параметры для текста "Загрузка..." */ font-weight: bold; text-align:center; padding:10px; font-size:22px;
} ul. tweet_list{ /* Параметры для всего блока вывода сообщений из Twitter */ padding:0px; margin:0px; list-style: none; overflow: hidden;
} ul. tweet_list li{ /* Параметры для каждого выводимого сообщения */ padding: 5px 0 5px 0; font-size: 11px; list-style: none; border-bottom: 1px dotted #000; overflow: hidden; margin: 5px 0 0 0;
} a. tweet_avatar{ /* Параметры для отображения аватара пользователя */ float: left; margin: 0 10px 0 0;
} a. tweet_username{ /* Параметры для вывода username других пользователей */ color: #0066CC;
} a. tweet_hashtag{ /* Параметры для вывода хештегов */ color: #38352F; font-weight: bold;
} a. tweet_date{ /* Параметры для вывода даты */ color: #0066CC; font-style:italic; padding-top:5px; font-size:11px; display: block;
} li a. tweet_url{ /* Параметры для вывода ссылки */ color: #0066CC; text-decoration: underline;
} ul. tweet_list li a. url:hover{ /* Параметры для вывода ссылки, когда на неё наведён курсор */ text-decoration: underline;
}
.tweet_outro{ /* Параметры для блока текста расположенном после блока последних сообщений */ display:block; font-size:12px; background:#A2CFFD; padding:5px 5px;
}
.tweet_outro a{ /* Параметры для ссылок в блоке tweet_outro */ color:#000000; font-weight:bold;
}
Так как текст перед блоком вывода последний сообщений у меня отключен, то и никаких параметров для него не описано. Но, для заметки, имя класса у блока вывода текста, находящемся перед блоком вывода сообщений - tweet_intro.
Сначала я хотел реализовать вывод последних сообщений из Twitter на PHP как модуль для DLE, но когда нашёл готовое решение на JavaScriot, сразу же передумал. Хотя в интернете и полно готовых решений на PHP.
