Skip to content

 

Виджет Твиттера по новому

новый виджет твиттерДорогие друзья, с вами на связи Ольга Абрамова и сегодня я хочу обновить информацию как создать, украсить и установить на сайте виджет Твиттера с вашего аккаунта по новому.

Раньше виджет можно было настроить более симпатично, чем сейчас. По крайней мере, на мой взгляд 🙂 Сейчас в веб-дизайне витает дух минимализма и это не могло не отразиться и на Твиттере.

Тем не менее мы кое-что можем подправить сами, тем более, что в настройках Твиттера есть некоторые дополнительные рекомендации.

К слову сказать, новый виджет позволяет с помощью кнопки Читать в хидере, сразу же последовать за нами. Во вторых, в футере можно сразу же ответить на заинтересовавший твит.

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

Я не буду здесь описывать, как создать виджет Твиттера. Это очень просто, любой справится. Получите код и вставьте его в нужное вам место. Знайте, что максимальный размер виджета по ширине 520 рх, по высоте 600 рх.

Теперь мы продолжим его редактирование.

Если вас устраивает, то что вы создали, то и ладно. Если же нет, то давайте немного поколдуем на полученным кодом.

Вы можете задать дополнительную обводку вокруг изображения. Вот у меня, например, она светло-серая, толщиной 1 рх с закругленными уголками. А под ней отображается голубая обводка, но она не только вокруг ленты, но и разделяет твиты между собой.

Можем поменять цвет ссылок, если вдруг вам не нравится тот цвет, который вы задавали в Твиттере (ну не заходить же каждый раз в настройки аккаунта для этого :)).

Можем задать высоту и ширину, отображать скролл или нет, менять цвет темы со светлой на темную и наоборот. Ну и последнее, можем убрать шапку и футер. То есть вверху не будет отображаться пространство с надписью Твиттер и кнопкой Читать, а внизу исчезнет место с надписью Оставить твит или просто можно изменить эту надпись. Хотя, без этих элементов будет не очень красиво смотреться, но тем не менее такие возможности есть.

Итак, приступим.

Для того чтобы задать свою обводку, надо полученный код заключить в тэги div. Задать имя div-у и в CSS файле прописать свойство для него.

Например: <div id=twitter>ваш код</div>. В CSS-файле пишете:

#twitter {
width: 195px;
border: 1px solid #eee;
border-radius: 5px;
}

Я указала ширину (width) для всего виджета. У вас будет свой параметр или может совсем не потребоваться. Для обводки (border) можно задать бОльшую толщину.

Вообще, по умолчанию, самому виджету задавать ширину не обязательно. Он подстраивается под ширину того элемента, куда встраивается. Но если потребуется, то можете сами добавить в код ширину и высоту, например:

width="300" height="500"

Убрать полосу вертикальной прокрутки, расположенной справа:

data-chrome="noscrollbar"

Скрыть шапку:

data-chrome="noheader"

Скрыть подвал:

data-chrome="nofooter"

Удалить обводку вокруг и внутри ленты:

data-chrome="noborders"

Если вы сначала выбрали светлую тему, то можете сменить на темную и, наоборот:

data-theme="dark" (data-theme="light")

Сделать прозрачный бэкграунд:

data-chrome="transparent"

Прозрачный бэкграунд и одновременное отключение хидера и футера (можно отключать по очереди):

data-chrome="noheader nofooter transparent"

Цвет обводки и разделения твитов:

data-border-color="#37A9CE"

Цвет ссылок:

data-link-color="#FFA95A"

Количество отображаемых твитов. По умолчанию, максимальное количество, 20:

data-tweet-limit="5" (задайте свое кол-во)

По умолчанию язык определяется автоматически, но вы можете сами указать, на каком языке отображать виджет:

lang="ru" (en, de, ua и т.д.)

Кто понимает английский хорошо, тот может сам более внимательно изучить рекомендации Твиттера по настройкам здесь.

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

К тому же имеет значение, где стоит код для скрытия скролла. Он должен стоять сразу после id. Иначе полоса прокрутки не исчезает.

Всем красивых Твиттер-лент! 🙂

Для расслабления. Если вы хотите, чтобы люди при общении с вами таяли, как масло, сделайте им волшебные обнимашки. Как правильно, смотрите сами 😉

Детальное описание скачать акинатор вип бесплатно у нас на сайте. http://abilin.ru/ Аренда телескопического вилочного погрузчика.

7 комментариев

  1. Нина Жуперина:

    Прекрасно! У меня еще руки не дошли до этого, а ты уже сделала.
    Спасибо, меньше думать придется 🙂

    • Ольга Абрамова:

      Нина, ты права, думать меньше. Потому как не так быстро было с этими дополнениями разобраться 🙂
      Сколько прочитала описаний по новому виджету, у всех одно и тоже, стандартные настройки.

  2. Андрей:

    Спасибо Ольга за инфу.. может как нить пригодится… А зашел ещё сказать- проверти ваш сайт на вирусы ..

    • Ольга Абрамова:

      Андрей, пожалуйста. А по поводу вирусов, уже 2 дня проверяю, ничего нет. А Яндекс клеймит 2 моих сайта. Причем уже сегодня, ни с того ни с сего, второй сайт уже без вируса. Прям, парадокс какой-то 🙂

    • Ольга Абрамова:

      Добавлю, что Яндекс ответил на мое письмо и сказал, что сайт чистый и скоро сообщение о вирусе исчезнет 🙂

  3. Инна:

    Красивая у Вас Твиттер-лента — стильная 🙂 А по поводу вируса — всех колбасит — в основном виноват плагин «Одна кнопка».

    • Ольга Абрамова:

      Инна, спасибо. Вы правы, очень много блоггеров жалуется именно на этот сервис.