без регистрации в качестве разработчика

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

Быстрый поиск показывает, что я мог бы сделать это с помощью агрегаторов социальных сетей или напрямую через API Twitter. Однако я обнаружил, что некоторые простые инструменты CSS и Twitter могут удовлетворить мои текущие потребности, по крайней мере, на данный момент.

Вот как моя стена твитов выглядит на целевой странице:

Предположения

Здесь требуется некоторая ручная работа, поскольку мы собираемся использовать Twitter для веб-сайтов (встроенные твиты), который принимает только идентификатор твита: нам нужно будет получить идентификаторы самостоятельно, а не просто указывать ключевое слово для поиска или фильтра.

tweetID – это длинная строка цифр в конце URL-адреса. Вы можете увидеть URL-адрес в адресной строке браузера или нажав Встроить твит:

https://twitter.com/[username]/status/[TweetID]

Шаг 1: создайте кирпичную стену

Макет каменной кладки относительно легко создать, и его можно сделать с помощью нескольких строк CSS.

Сначала немного простого HTML:

<section id="tweets" >
    <div id="tweet1" style="height:200px">ABC</div>
    <div id="tweet2" style="height:400px">ABC</div>
    <div id="tweet3" style="height:320px">ABC</div>
    <div id="tweet4" style="height:210px">ABC</div>
    <div id="tweet5" style="height:180px">ABC</div>
    <div id="tweet6" style="height:300px">ABC</div>
    <div id="tweet7" style="height:350px">ABC</div>
    <div id="tweet8" style="height:330px">ABC</div>
    <div id="tweet9" style="height:400px">ABC</div>
</section>

Обратите внимание, что атрибут height назначается случайным образом для наглядности.

Затем CSS:

#tweets {
    -moz-column-count:    3; // 3 columns for our wall
    -webkit-column-count: 3;
    column-count:         3;
}
#tweets div {
    width: 100%;
    padding: 0;
    margin: 0 0 1rem 0;
    display: inline-block; 
    background-color: orange;
}

И у нас должно получиться что-то вроде этого:

Шаг 2: Загрузите твиты с помощью Javascript

Twitter предоставляет «библиотеку JavaScript, которая поддерживает динамическую вставку встроенных твитов». Мы можем использовать эту библиотеку для встраивания твитов в нашу кирпичную стену.

Сначала загрузите Twitter для веб-сайтов Javascript (код ниже взят из Twitter):

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";
    fjs.parentNode.insertBefore(js, fjs);
    t._e = [];
    
    t.ready = function(f) {
        t._e.push(f);
    };
    
    return t;
}(document, "script", "twitter-wjs"));

После загрузки библиотеки мы можем использовать ее функцию createTweet:

twttr.ready(
    function (twttr) {
        twttr.widgets.createTweet(
            '[tweetID]',
            document.getElementById('tweet1'),
            {
                theme: 'light', //or dark
                conversation: 'none',
                dnt: true,
            }
        ).then( function( el ) {
            console.log('Tweet added.');
     });
});

Это автоматически создаст визуализированный твит (в соответствии со стандартным макетом Twitter) в нашем элементе с идентификатором tweet1. Мы можем сделать некоторые базовые настройки, такие как тема или диалог и т. д., полный список параметров находится здесь.

И теперь наша стена будет выглядеть примерно так:

Дальнейшие шаги

Отсюда мы можем добавить массив идентификаторов твитов и цикл for, чтобы заполнить всю стену разными твитами. Мы также можем добавить дополнительные правила CSS, чтобы установить разное количество столбцов в зависимости от размера экрана, например:

@media only screen and (max-width: 600px){
    #tweets {
        -moz-column-count:    1;
        -webkit-column-count: 1;
        column-count:         1;
    }
}

Спасибо, что дочитали до этого места, и я надеюсь, что эта статья была для вас полезной!

Если вам интересно узнать больше, ознакомьтесь с некоторыми другими моими статьями о технических вещах: -

Минимизация файлов JS
Использование AWS SDK в PHP
Сборка Docker с Mac M1

Я также пишу об истории как хобби:-

История бака
Пусть едят мясо

Еще раз, спасибо!

p.s. Также меня можно найти в Твиттере.