Вы можете установить ленту сообщений любого пользователя twitter на собственный сайт. Далее я покажу как это сделать, а также расскажу о некоторых дополнительных параметрах, которые не показаны на странице Twitter Widgets Configurator при создания кода виджета.
Допустим, вы решаете установить на свой сайт ленту твитов Дмитрия Медведева. Вы переходите на его страничку в твиттер. Вообще, я редко заглядываю в твиттер, и ещё реже бываю на страничках политиков. Но в момент моего посещения лента ДМ выглядела вот так.
Чтобы создать виджет с лентой его твитов, мы жмем на меню «More user actions» в виде шестереночки в правой части страницы и выбираем пункт — Embed this Profile.
После этого мы попадаем на страницу с Widgets Configurator — настройщика виджетов. Практически, уже все готово для создания кода виджета, и вы можете просто нажать кнопку «Create widget», чтобы получить код для вставки на ваш сайт. Вы получите следующий код, состоящий из контейнера <A> с параметрами виджета и скрипта, который его обрабатывает:
|
1 2 3 4 5 |
<a class="twitter-timeline" href="https://twitter.com/MedvedevRussia" data-widget-id="629618947801894912">Tweets by @MedvedevRussia</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);} }(document,"script","twitter-wjs"); </script> |
А внешне это будет выглядеть как то так:
На странице конфигуратора настроек, как вы, надеюсь, заметили, совсем немного — вы можете указать высоту виджета, тему оформления и ещё пару настроек. Помимо этих базовых настроек, есть множество настроек описанных в блоге разработчиков — https://dev.twitter.com/web/embedded-timelines#customization. О них и поговорим подробнее. Все настройки, повторюсь, нужно добавлять в anchor контейнер сгенерированного кода. Который у нас выглядит пока вот так.
Т.е. у нас указан только некий идентификатор в атрибуте data-widget-id.
Размеры виджета
По умолчанию виджет растягивает на 100% по ширине и имеет 600px в высоту. Но их можно переопределить, указав height и width параметры явно. Вот так это может выглядеть:
Настройка компонентов виджета
Для управления рамкой вокруг списка твитов предназначен атрибут data-chrome, в котором можно перечислить следующие параметры (разделяя их пробелом):
- noheader — скрыть заголовок
- nofooter — скрыть футер
- noborders — скрыть все рамки, в том числе разделяющие отдельные твиты
- noscrollbar — убирает вертикальный скролбар (а что не влезло, будет просто скрыто)
- transparent — виджет будет прозрачным
Отображать определенное число твитов
Числом отображаемых твитов управляет атрибут data-tweet-limit. Он может принимать значения в диапазоне от 3 до 20. При этом высота списка будет установлена так, чтобы видны были сразу все твитты.
Помимо перечисленных атрибутов, есть еще как минимум один довольно важный атрибут, управляющий языком интерфейса виджета. Если вы обратите внимание на внешний вид виджета (вернитесь к картинке выше), то заметите, что все кнопки, даты и описания на ней выполнены на английском языке. Нам же желательно увидеть их на русском. Для этого используем атрибут lang.
Теперь, я думаю, вы вполне сможете настроить внешний вид виджета под ваш сайт. :) В крайнем случае, можно прибегнуть к перекрытию каскадных стилей. Это дополнительно позволит изменить оформление твитов в ленте, вроде семейств и размеров шрифтов, отступов и т.п.