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

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

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

Ошибка Yandex карт net::ERR_ABORTED 429 (Too Many Requests)

Октябрь 9, 2019 г.

Ошибка возникает при использовании сервисов Яндекс карт, вроде геокодинга. Яндекс стал требовать обязательно использовать дополнительный параметр, передаваемый при загрузке скрипта - apikey. Данный параметр позволяет управлять квотами запросов ...

Читать

Как запостить в instagram c компьютера

Ноябрь 16, 2020 г.

Intagram ориентирован на работу с мобильных устройств, потому на PC эти опции недоступны. Вы не сможете запостить картинку или видео с PC. Но есть довольно ...

Читать

Модуль Menu Administration Tool

Апрель 10, 2017 г.

Написал и разместил в репозитории drupal.org модуль для работы с меню. В чем смысл делать то, что уже и так вроде как есть? Для большинства сайтов, ...

Читать

Как добавить поле "количество" для кнопки add to cart в Drupal Commerce

Июль 13, 2023 г.

Кнопка выводится как элемент product.variations, а вот настройки полей, которые выводятся в этой сущности довольно глубоко зарыты. [crayon-68cbb3edc2ff2658452783/] Поле "кол-во товара в корзине" не является частью сущности product variation, ...

Читать
 

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

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



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