Вывод последний сообщений из Twitter на своем блоге

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.

Комментарии закрыты.

Познавательный Онлайн-Журнал «Zanprim» 2019 zanprim.ru

При использовании статей с сайта оставляйте, пожалуйста, обратную ссылку на наш ресурс.