• Некоторые компульсии по поводу околокомпьютерных обсессий.

    Wednesday, December 14, 2016

    Встроить Twitter timeline.

    Вставить  Twitter timeline в страницу - задача тривиальная. На странице для разработчиков есть простой пример:
    <a class="twitter-timeline"
      href="https://twitter.com/TwitterDev"
      data-width="300"
      data-height="300">
    Tweets by @TwitterDev
    </a>
    Виджет автоматически подстраивается под размер родительского элемента. Казалось бы, все хорошо, но там же описаны ограничения, накладываемые на размер этого виджета: ширина родительского контейнера должна быть не меньше 180 пикселей и не больше 520.


    Если потребовалось вдруг встроить этот блок в колонку шириной 700 px, то придется немного повозиться, чтобы изменить размер виджета twitter
    Что нужно?
    1. встроить виджет
    2. подождать пока загрузится
    3. поменять ширину виджета

    Встривание происходит следующим образом: создается iframe, в который выводится лента твитов.
    По умолчанию у основного виджета внутри нашего контейнера назначен класс timeline-Widget.

    Ему и назначим ширину 100%.

    <script>
    $(window).on('load', function () {
     $('iframe[id^=twitter-widget-0]').each(function () {
       var head = $(this).contents().find('head');
       if (head.length) {
         setTimeout(function(){
           head.append('<style>'+

    '.timeline{max-width:100% !important;width:100% !important;}'+
    '.timeline .stream{max-width:none!important;width:100%!important;}'+
    '.timeline-Widget{max-width:100%!important;}'+

    '.SandboxRoot.env-bp-660.timeline-Tweet-text{font-size:16px; line-height: 21px; } ' +
    '.MediaCard-media {max-width:400px;} </style>');}, 20);
       }
     });

    });
    </script> 

    Немного поясню:
    Таймаут нужен для полной загрузки ленты в фрейм. Может быть, вам придется отрегулировать этот параметр. В большинстве случаев этот код работает и без использования функции setTimeout. Но были, как говорится, прецеденты.
    Класс  .env-bp-660 у вас может отличаться, быть, допустим, .env-bp-580. Проверьте и поменяйте на свой, а лучше добавьте еще один стиль. Но это критично только к размеру шрифта внутри фида, если не будете менять,  можно этот стиль убрать.

    Может быть, этот код и не будет работать в таком виде "как есть" (хотя у меня работает, снято с "живого" сайта), но направление в котором нужно работать, я думаю понятно.
     
    Post a Comment