Итак, наиболее полный туториал, который покажет, как добавить Ленту Twitter на ваш сайт WordPress и не только.

Для того чтобы добавить Ленту Twitter, следуйте инструкциям.

Добавить ленту Твиттера на сайт

  1. Перейдите на сайт http://publish.twitter.com.

2. Введите адрес Твиттера и определитесь, что собираетесь выводить — например, Ленту Twitter .

3. Раскройте  set customization options, чтобы настроить отображение для вашей ленты Twitter. Вы можете задать ширину, высоту ленты, темный или светлый фон, стандартный язык.

4. Скопируйте код внедрения. Теперь вы можете его вставить в любое место сайта.

Твиттер в виждетах

Чтобы вставить ленту Твиттера в виждеты ВордПресса, перейдите на вкладку Внешний вид -> Виджеты (Appearance -> Widgets):

Перетяните Виджет HTML-код из списка доступных виджетов слева в область виджетов, где вам необходимо отобразить ленту Twitter справа. И, добавив полученный у Твиттера код внедрения, сохраните виджет.

Поздравляю! Обновите страницу для просмотра изменений и вы усидитеЛенту Twitter на вашем WordPress сайте.

Лента Twitter в записи или на странице

Для добавления ленты в запись или на страницу Вордпресс используйте блок HTML, куда и будет вставлен код. При верстке страницы в Divi Builder вы также можете добавить блок HTML с кодом Твиттера.

Пример вывода одной записи ленты Твиттера:

Типы ленты Twitter

  • Вы можете вывести хронологию профиля. Для этого при формировании кода используйте просто ссылку на ваш аккаунт Твиттера.
  • Вы можете вывести список. Если в Твиттере у вас есть собственный список чтения или есть ссылка на чужой список. Главное, чтобы он был общедоступным. Все, что нужно сделать — разместить в publish.twitter.com ссылку не на аккаунт, а на список. В остальном точно также можно регулировать ширину-высоту, цвет-язык в настройках.
  • Аналогичным способом можно выводить на сайте коллекции (тематическую коллекцию твитов можно создать в сервисе Твиттера tweetdeck
  • Лайки — на шкале отображаются последние понравившиеся вам твиты.

Настройки ленты Twitter

Для удобства все параметры проще показать на примерах

Габариты

Встроенная шкала времени автоматически подстраивается под ширину своего родительского элемента с минимальной шириной 180 пикселей и максимальной шириной 520 пикселей. Отображаемая сетка имеет минимальную ширину 220 пикселей. Установите максимальную ширину или максимальную высоту встроенной временной шкалы, добавив атрибут data-width или data-height к элементу привязки кода внедрения.

<a class="twitter-timeline"
  href="https://twitter.com/IrinabergC"
  data-width="300"
  data-height="300">
Tweets by @IrinabergC
</a>

Цвет фона

Вы можете выводить ленту Твиттера на светлом либо на темном фоне. По умолчанию это светлый фон и параметр data-theme можно вовсе опустить. Для темного фона добавьте параметр data-theme=»dark»

<a class="twitter-timeline" data-theme="dark" href="https://twitter.com/HappySoberRu/timelines/1389203199945478148>psi - Curated tweets by HappySoberRu</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<a class="twitter-timeline" data-theme="light" href="https://twitter.com/HappySoberRu/timelines/1389203199945478148?ref_src=twsrc%5Etfw">psi - Curated tweets by HappySoberRu</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Компоненты виджета

Пользовательский хром

Управляйте фреймом вокруг линейной шкалы времени, установив   атрибут data-chrome с токенами, разделенными пробелами, для каждого компонента chrome.

TokenОписание
noheaderСкрывает заголовок временной шкалы. 
Сайты-исполнители должны добавить свою собственную атрибуцию Twitter, ссылку на исходную временную шкалу и соответствовать другим требованиям к отображению Twitter  
nofooterСкрывает нижний колонтитул шкалы времени и ссылку на автора твита, если они включены в тип виджета шкалы времени.
nobordersУдаляет все границы внутри виджета, включая границы, окружающие область виджета и разделяющие твиты.
noscrollbarОбрезает и скрывает основную полосу прокрутки шкалы времени, если она видна. 
Учтите, что скрытие стандартных компонентов пользовательского интерфейса может повлиять на доступность вашего веб-сайта.
transparentУдаляет цвет фона виджета.

пример:

<a class="twitter-timeline"
  href="https://twitter.com/kicaca"
  data-chrome="nofooter noborders">
</a>

Ограничение количества отображаемых твитов

Отобразите определенное количество элементов от 1 до 20, настроив встроенный HTML.

Добавьте   атрибут data-tweet-limit к встраиваемому коду, чтобы указать количество твитов. Временная шкала автоматически отрегулирует высоту для отображения указанного количества твитов. Временная шкала фиксируется после отображения; он не будет опрашивать новые твиты.

Пример:

<a class="twitter-timeline"
  href="https://twitter.com/LadyPortNet"
  data-tweet-limit="3">
Tweets by @LadyPortNet
</a>

Доступность: Преодоление живой вежливости ARIA

Встроенная шкала времени описывает свое содержимое для программ чтения с экрана и других вспомогательных технологий с использованием дополнительной разметки, определенной в  стандартах WAI-ARIA . Виджет временной шкалы — это  активная область страницы,  которая будет получать обновления при появлении новых твитов.

По умолчанию шкала времени имеет значение  polite  по умолчанию; установите для   атрибута data-aria-polite значение assertive, чтобы установить вежливость живого региона встроенной шкалы времени как напористую , например, если вы используете встроенную шкалу времени  в качестве основного источника живого контента на своей странице.

<a class="twitter-timeline"
  href="https://twitter.com/IrinaVBerg"
  data-aria-polite="assertive">
Tweets by @IrinaVBerg
</a>

Подпишитесь, чтобы быть в курсе новостей и предложений