без регистрации в качестве разработчика
Я писал в твиттере о ходе разработки моего проекта 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. Также меня можно найти в Твиттере.