[Решено] Как сделать виджет Твиттера отзывчивым?

Проблема:

Как веб-дизайнер и веб-разработчик, большинство веб-сайтов, которые я создал, нуждаются в добавлении социальных сетей на свой веб-сайт, чтобы сделать его более интерактивным и добавить свежий контент на веб-сайт. Однако одна из больших проблем, с которыми я столкнулся при добавлении виджета социальных сетей на HTML-страницу, заключается в том, что скорость отклика виджета очень ограничена. В большинстве случаев код встраивания виджета имеет определенную ширину и высоту в самом коде встраивания. Например, код виджета Twitter ниже:

<a class="twitter-timeline" data-width="400" data-height="500" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

Решение:

К счастью, Twitter также предоставляет JavaScript API, который мы также можем вручную создавать и управлять виджетом самостоятельно.

1. Чтобы использовать JavaScript API виджета, включите приведенный ниже код в тег ‹head› вашего HTML-кода.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2. Добавьте файл JavaScript в свой HTML-код перед тегом ‹/body›.

<script type="text/javascript" src="js/script.js"></script>

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

<div class="parent">
  <div id="twt-block"></div>
</div>

3. Теперь добавьте следующий код в файл «script.js». Пожалуйста, измените «screenName» на свой дескриптор в Твиттере.

    const  sreenMd = window.matchMedia( ' ( min-width: 768px ) ' )
    var screenSize = $(window).width();

    function renderTwitter (height) {
        //Render twitter widget 
        twttr.widgets.createTimeline(
            {
            sourceType: "profile",
            screenName: "<your Twitter handle>"
            },
            document.getElementById("twt-block"),
            {
            height: height,
            chrome: "nofooter",
            }
        );
    };

    // Register event listener
    sreenMd.addEventListener("change", (e) => {
        // Check if the media query is true
        console.log(e);
        if (e.matches) {
            $("#twt-block").empty();
            renderTwitter($('.new-section').outerHeight()-100);
        } else {
            $("#twt-block").empty();
            renderTwitter(400);
        }
    });

    if(screenSize > 768 ) {
        renderTwitter($('.new-section').outerHeight()-100);
    } else {
        renderTwitter (400);
    }

Теперь давайте объясним, что делает код JavaScript.

Во-первых, мы получаем настройку объекта «matchMedia». Этот объект JavaScript будет позже присоединен к событию изменения окна. Цель этого объекта — определить, имеет ли окно ширину не менее 768 пикселей (как указано в параметре: «min-width: 768px»). И мы также получаем текущий размер окна.

const  sreenMd = window.matchMedia( ' ( min-width: 768px ) ' );
var screenSize = $(window).width();

Затем мы определяем функцию, которая отображает виджет Twitter с помощью JavaScript API. Самое лучшее в JavaScript API — это то, что вы можете изменять параметры по своему желанию. Здесь мы передаем высоту в качестве параметра функции. Как упоминалось выше, вы должны изменить дескриптор Twitter на свою учетную запись.

    function renderTwitter (height) {
        //Render twitter widget 
        twttr.widgets.createTimeline(
            {
            sourceType: "profile",
            screenName: "<your Twitter handle>"
            },
            document.getElementById("twt-block"),
            {
            //check other params 
            //https://dev.twitter.com/web/embedded-timelines/parameters
            height: height, //The height is the parameter of the function
            chrome: "nofooter",
            }
        );
    };

Теперь мы готовы добавить прослушиватель событий к объекту «matchMedi». Этот прослушиватель событий будет прослушивать события изменения окна.

    // Register event listener
    sreenMd.addEventListener("change", (e) => {
        // Check if the media query is true
        console.log(e);
        if (e.matches) {
            $("#twt-block").empty();
            renderTwitter($('.parent').outerHeight());
        } else {
            $("#twt-block").empty();
            renderTwitter(400);
        }
    });

В этом прослушивателе событий каждый раз, когда в браузере происходит изменение, мы проверяем, соответствует ли «matchMedia» условию (то есть, если браузер больше 768 пикселей). Если событие соответствует условию, мы удаляем текущий виджет из контейнера виджетов, а затем создаем новый виджет с высотой родительского элемента, в случае, если размер родительского элемента также зависит от другого элемента. Если условие не соответствует, функция создаст виджет размером 400 пикселей.

Наконец, поскольку «matchMedia» не будет вызываться автоматически при первом рендеринге, нам нужно создать виджет вручную. Это когда ширина браузера пригодится.

    if(screenSize > 768 ) {
        renderTwitter($('.parent').outerHeight()-100);
    } else {
        renderTwitter(400);
    }

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

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

Результат моей разработки таков:

Мобильный экран:

Экран рабочего стола: