Установка виджета ленты произвольного пользователя twitter на свой сайт

tweetВы можете установить ленту сообщений любого пользователя twitter на собственный сайт. Далее я покажу как это сделать, а также расскажу о некоторых дополнительных параметрах, которые не показаны на странице Twitter Widgets Configurator при создания кода виджета.

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

dmitry-medvedev-tweet

Чтобы создать виджет с лентой его твитов, мы жмем на меню «More user actions» в виде шестереночки в правой части страницы и выбираем пункт — Embed this Profile.

mechanics

После этого мы попадаем на страницу с Widgets Configurator — настройщика виджетов. Практически, уже все готово для создания кода виджета, и вы можете просто нажать кнопку «Create widget», чтобы получить код для вставки на ваш сайт. Вы получите следующий код, состоящий из контейнера <A> с параметрами виджета и скрипта, который его обрабатывает:

А внешне это будет выглядеть как то так:

result-tweets

На странице конфигуратора настроек, как вы, надеюсь, заметили, совсем немного — вы можете указать высоту виджета, тему оформления и ещё пару настроек. Помимо этих базовых настроек, есть множество настроек описанных в блоге разработчиков — https://dev.twitter.com/web/embedded-timelines#customization.  О них и поговорим подробнее. Все настройки, повторюсь, нужно добавлять в anchor контейнер сгенерированного кода. Который у нас выглядит пока вот так.

code

Т.е. у нас указан только некий идентификатор в атрибуте data-widget-id.

Размеры виджета

По умолчанию виджет растягивает на 100% по ширине и имеет 600px в высоту. Но их можно переопределить, указав height и width параметры явно. Вот так это может выглядеть:

code-dimensions-twitter

Настройка компонентов виджета

Для управления рамкой вокруг списка твитов предназначен атрибут data-chrome, в котором  можно перечислить следующие параметры (разделяя их пробелом):

  • noheader — скрыть заголовок
  • nofooter —  скрыть футер
  • noborders — скрыть все рамки, в том числе разделяющие отдельные твиты
  • noscrollbar — убирает вертикальный скролбар (а что не влезло, будет просто скрыто)
  • transparent — виджет будет прозрачным

Отображать определенное число твитов

Числом отображаемых твитов управляет атрибут data-tweet-limit. Он может принимать значения в диапазоне от 3 до 20. При этом высота списка будет установлена так, чтобы видны были сразу все твитты.

Помимо перечисленных атрибутов, есть еще как минимум один довольно важный атрибут, управляющий языком интерфейса виджета. Если вы обратите внимание на внешний вид виджета (вернитесь к картинке выше), то заметите, что все кнопки, даты и описания на ней выполнены на английском языке. Нам же желательно увидеть их на русском. Для этого используем атрибут lang.

code-lang-tweet

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

Написать комментарий

Мало букафф? Читайте есчо !

Вставка переменной в инлайновое изображение в LESS

Август 29, 2019 г.

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS. К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы ...

Читать

Вывод видео блока, используя форматтер модуля media_youtube

Май 18, 2017 г.

Ситуация, когда вы используете поле типа "Multimedia asset", создаваемое модулями media + media_youtube, и сохранили там ссылку на какое то видео с Youtube ...

Читать

 

Комментарии к «Установка виджета ленты произвольного пользователя twitter на свой сайт»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: