Ширина виджета HTML/CSS для Twitter

Question

Ширина виджета HTML/CSS для Twitter

Код, который Twitter вставляет в HTML, выглядит следующим образом:

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Они позволяют вам установить высоту, которую я установил на 600. При размещении на моем сайте я получаю это (при просмотре источника):

<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe>

Ширина 220 - это то, что меня убивает. Я хочу, чтобы ширина была полной шириной контейнера, что составляет 100% (для мобильного сайта). В настоящее время ширина 220 немного превышает половину страницы и отображает ужасную полосу прокрутки.

Итак, почему он устанавливает ширину в 220, и как я могу заставить его расширяться до его родительской ширины?

7

html css twitter widget

Источник

user1689775 21 сен '12 в 23:46

14 ответов

Другие вопросы по тегам html css twitter widget

user1719309 04 окт '12 в 07:44 2012-10-04 07:44 · Answer 1 · 2012-10-04 07:44

Я использую адаптивную тему, и этот код CSS работает нормально. Спасибо Хьюстер.

#twitter-widget-0 { 
      width: 100% !important; 
    }

19

Источник

user1719309 04 окт '12 в 07:44

user1854400 26 ноя '12 в 19:16 2012-11-26 19:16 · Answer 2 · 2012-11-26 19:16

Twitter позволяет настраивать ширину и высоту виджета временной шкалы с помощью атрибутов ширины и высоты HTML, НО минимальная ширина, которую они принимают, 220 pixels ПРИМЕР: width="220", height="350"

Со страницы разработчиков Twitters: минимальная ширина временной шкалы составляет 220 пикселей, а максимальная - 520 пикселей. Минимальная высота 350px.

user988044 07 окт '12 в 08:46 2012-10-07 08:46 · Answer 3 · 2012-10-07 08:46

Вы можете изменить ширину виджета, установив его значение в определении класса "twitter-timeline", как упомянуто здесь:

https://dev.twitter.com/docs/embedded-timelines

Например, виджет временной шкалы Twitter с шириной 280 и высотой 300 выглядит примерно так:

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

user2982016 12 ноя '13 в 06:33 2013-11-12 06:33 · Answer 4 · 2013-11-12 06:33

Если мы разместим ниже CSS, то мы можем установить ширину виджета в соответствии с требованием.

<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style>

2

Источник

user2982016 12 ноя '13 в 06:33

user1776742 26 окт '12 в 10:01 2012-10-26 10:01 · Answer 5 · 2012-10-26 10:01

#twitter-widget-6 {
  width:600px;
}

Вышеуказанное работает, я предполагаю, что числа соответствуют тому, сколько виджетов вы создали. Является ли ширина единственной вещью, которую мы можем изменить, а как насчет шрифтов, я не могу изменить это? Виджет Твиттера настолько уродлив, что трудно заставить его сидеть в любом макете.

user1125766 14 фев '15 в 18:09 2015-02-14 18:09 · Answer 6 · 2015-02-14 18:09

Если вы просто используете

#twitter-widget-0 { 
    width: 100% !important; 
}

это будет работать, но будет отключено на устройствах iOS (еще не тестировалось на Android). Чтобы это исправить, вам нужно добавить ширину и высоту в тэг Twitter-timeline следующим образом:

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a>

user1343297 26 янв '16 в 18:35 2016-01-26 18:35 · Answer 7 · 2016-01-26 18:35

Я перепробовал все приведенные выше ответы, но не повезло,

Так реализовал ниже сам код и работал на меня

<script type="text/javascript">

 $(window).on('load', function () {

 $('iframe[id^=twitter-widget-]').each(function () {

 var head = $(this).contents().find('head');

 if (head.length) {

 head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');

 }

 $('#twitter-widget-0').append($('<div class=timeline>'));

 })

 });

</script>

user2062603 25 май '16 в 19:11 2016-05-25 19:11 · Answer 8 · 2016-05-25 19:11

Включают

 Данные ширина ="100%"

в якорных тегах. Это работает для меня.

1

Источник

user2062603 25 май '16 в 19:11

user2245341 04 апр '13 в 14:29 2013-04-04 14:29 · Answer 9 · 2013-04-04 14:29

Мне нужно было использовать класс twitter-timeline-render вместо id #twitter-widget-0. Таким образом, виджет изменяется после рендеринга.

.twitter-timeline-rendered { 
      width: 100% !important; 
    }

1

Источник

user2245341 04 апр '13 в 14:29

user5619090 07 мар '16 в 02:09 2016-03-07 02:09 · Answer 10 · 2016-03-07 02:09

С недавним обновлением (или сбой) твиттер заставил все виджеты каналов автоматически отображать изображения при загрузке, независимо от того, какие параметры установлены в настройках твиттера.

Теперь я использую их собственную ленту виджетов на html-сайте и хочу отключить загрузку изображений. Я не возражаю против того, чтобы начинать все сначала, но кто-нибудь может посоветовать мне, где я могу найти настраиваемый твиттер в формате HTML и JS, который не будет включать изображения.

user855705 02 окт '12 в 16:12 2012-10-02 16:12 · Answer 11 · 2012-10-02 16:12

Это сработало для меня...

    #twitter-widget-6{
      width:600px;
    }

0

Источник

user855705 02 окт '12 в 16:12

user947869 19 фев '16 в 16:21 2016-02-19 16:21 · Answer 12 · 2016-02-19 16:21

Вот как я это сделал, используя почти ту же логику, которую использовал Chandrakant для вставки стиля в iframe.

Прежде всего: добавьте твиттер-виджет правильно

<script type="text/javascript">
// https://dev.twitter.com/web/javascript/loading
window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    js.async = true;
    fjs.parentNode.insertBefore(js, fjs);
    t._e = [];
    t.ready = function(f) {
        t._e.push(f);
    };
    return t;
}(document, "script", "twitter-wjs"));
</script>

Теперь у вас есть хороший массив window.twttr._e, который может содержать все, что будет работать после загрузки twitter widget.js.

Обратите внимание, что я добавил js.async = true;

Теперь вы можете в том же сценарии или потом сделать:

<script type=text/javascript">
// https://dev.twitter.com/web/javascript/events
window.twttr.events.bind('loaded', function (e) {
  e.widgets.forEach(function (widget) {
    // js to support twitter 100% if present
    $(widget).contents().find('head').append('<style>.timeline { max-width: 100% !important; width: 100% !important; }</style>');
  });
});
</script>

Обратите внимание, что я использовал способ jquery для добавления стиля в конец содержимого заголовка iframe. Вы можете сделать это классическим способом, но это дольше.

<script type="text/javascript">
// ...
widget.contentDocument.getElementsByTagName('head')[0]...
// ...
</script>

user1684265 21 сен '12 в 23:54 2012-09-21 23:54 · Answer 13 · 2012-09-21 23:54

Попробуйте изменить width="220" в width="100%",

0

Источник

user1684265 21 сен '12 в 23:54

user2612928 13 авг '15 в 02:51 2015-08-13 02:51 · Answer 14 · 2015-08-13 02:51

Это работает для меня:

.twitter-timeline {
    height: 180px !important; 
    width: 100% !important; 
}

0

Источник

user2612928 13 авг '15 в 02:51