Установка виджета ленты произвольного пользователя 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

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

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

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

Установка языка по умолчанию в drupal 6 на мультиязычном сайте

Март 29, 2012 г.

Столкнулся с интересной проблемкой в Drupal 6 при создании мультиязычного сайта. Сама мультиязычность создавалась довольно типичным способом - пара стандартных модулей locate, content translate + i18n. Для каждого языка был выбран свой префикс пути ...

Читать

GIT может хранить пароли

Сентябрь 30, 2017 г.

Операции с удаленным частным репозиторием требуют ввода пароля. Git может сохранять введенные пароли, чтобы не вводить их при каждой операции. Как это сделать? Во-первых, git может запомнить введенный пароль временно. Это позволит выполнить ряд ...

Читать

 

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

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



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