Во всех прошлых проектах мы всё делали на сайте сами — верстали, добавляли какие-то элементы и писали скрипты. Сейчас сделаем следующий шаг — добавим на сайт чужие твиты, видео с ютуба и любые другие интерактивные штуки. Для этого нам понадобится штука, которую веб-разработчики любовно называют embed, то есть эмбед.
Что такое эмбед
Эмбед — это когда мы добавляем на сайт кусочки других сайтов, но в родном дизайне и с родным интерфейсом.
Без эмбеда мы можем добавить на страницу разве что гиперссылку:
<p>
<strong>
<a href="https://twitter.com/artgorbunov/status/1457332009710329867">
«Как донести до руководства, что нужно расширять штат редакторов?» Совет Максима Ильяхова.
</a>
</strong>
</p>
А можно использовать эмбед — специальный механизм, который встроит кусочек твиттера на нашу страницу.
Что даёт эмбед
Эмбед из «Твиттера» — это в буквальном смысле представительство «Твиттера» на нашем сайте. Мы можем не только прочитать сам твит, но ещё:
- поставить лайк;
- добавить комментарий;
- сделать реплай — ответ на этот конкретный твит;
- перейти на страницу, чтобы почитать все твиты этого автора;
- посмотреть превью картинки, если в твите есть фото.
В других сервисах эмбеды могут работать по-другому. Например, ютубовский эмбед позволит посмотреть видео, открыть связанные, полистать плейлист, а если вы зарегистрированы в Ютубе — ещё и зачесть просмотр видео в вашей истории просмотров. Как будто вы посетили Ютуб, не выходя с нашего сайта.
А есть сервисы, где эмбеды умеют намного меньше или вообще не представлены. Ну что ж…
Как добавить эмбед на страницу
Есть два способа добавить себе эмбед:
- Использовать тег <embed> и собирать его содержимое вручную. Это старый способ из двухтысячных — сейчас в нём многое сделать не получится, но если вы любите ретро, то почему бы и нет. Но мы не советуем.
- Использовать инструменты чужого сайта, чтобы получить нужный код. Это наш способ — простой и надёжный.
Почти у всех крупных медиаплатформ и соцсетей есть готовые инструменты для получения кода эмбеда. Всё потому, что это в интересах самих компаний: так они помогают распространять свой контент на чужих сайтах, и при этом полностью контролируют внешний вид контента.
Как добавить твит
Чтобы добавить твит себе на страницу, как из нашего примера в начале, нужно сделать так:
- Заходим в твиттер и находим нужный твит.
- Находим в правом верхнем углу твита меню из трёх точек:
3. Нажимаем и выбираем Embed Tweet:
4. В появившемся окне выбираем Copy Code, чтобы скопировать текст в буфер обмена:
5. Вставляем этот код себе на страницу.
В нашем случае код выглядит так:
<blockquote class="twitter-tweet"><p lang="ru" dir="ltr">«Как донести до руководства, что нужно расширять штат редакторов?» Совет Максима Ильяхова: <a href="https://t.co/sWGb3u4EMU">https://t.co/sWGb3u4EMU</a></p>— Бюро Горбунова (@artgorbunov) <a href="https://twitter.com/artgorbunov/status/1457332009710329867?ref_src=twsrc%5Etfw">November 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>Если мы добавим этот код на страницу, то получим именно то, что показывали в самом начале — твит в привычном интерфейсе посередине другого текста.
Этот код работает так:
- Создаёт два простых абзаца: с текстом твита и ссылкой на первоисточник.
- Обращается на сервер Твиттера за скриптом.
- Как только сервер отвечает, он запускает свой скрипт.
- Этот скрипт скрывает два абзаца, и с помощью своей твиттерской магии рисует полноценный интерфейс с твитом.
Получается, два абзаца нужны для подстраховки, вдруг сервер не ответит, а все движения происходят внутри скрипта.
Как добавить видео с Ютуба
Это сделать намного проще, чем с Твиттером:
- Запускате видео на Ютубе, которое хотите встроить.
- Щёлкаете правой кнопкой мышкой по картинке и выбираете «Копировать HTML-код»:
3. Вставляете код себе на сайт.
Проверим это на своей тестовой странице и добавим это видео вместо твита:
Теперь мы можем запустить это видео и увидеть знакомый интерфейс Ютуба:
А вот сам код, который у нас появился:
<iframe width="760" height="480" src="https://www.youtube.com/embed/URcUvFIUIhQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>При желании код можно поменять: настроить автовоспроизведение при загрузке, вручную указать нужные размеры видео или запретить разворачивать видео на весь экран.
Как добавить пост с Фейсбука
Алгоритм такой же, как в предыдущих разделах:
- Заходим в фейсбук и выбираем пост, который хотим встроить.
- Нажимаем на меню из трёх точек и выбираем «Встроить»:
3. Нажимаем «Копировать код»:
4. Вставляем скопированный код себе на страницу.
Заменим на тестовой странице эмбед ютуба на фейсбук:
Как добавить трек из Яндекс Музыки
Показываем двумя картинками.
Что можно добавить эмбедом
Всё что угодно, если разработчик заранее это предусмотрел и дал простой способ это сделать. Если не предусмотрел или простого способа нет — почитайте форумы или «Стековерфлоу», скорее всего, эту проблему кто-то уже решил.
Главный минус эмбеда
В отличие от статического контента, который всегда живёт на вашем и только вашем сайте, содержание эмбеда зависит от другого сервера. Если твит, пост или видео удалят или закроют — с вашей страницы контент тоже пропадёт.
Это обратная сторона удобства и красивого интерфейса: вы получаете доступ, но ничего не контролируете.
Нужно ли спрашивать разрешение на добавление эмбеда?
Обычно нет, если вы не нарушаете закон. Например, можно добавлять эмбеды видео из авторских каналов, но нельзя добавлять фильмы, права на которые принадлежат киностудиям (если они их не выкладывали сами в открытый доступ). Проще говоря, встраивать видео со своим выращиванием кактусов можно, а с последней «Матрицей» — нет.
То же самое работает и с информацией, распространение которой запрещено. Например, если кто-то выложит оскорбительный твит, который нарушает наши законы, то встраивание такого твита тоже можно расценить как нарушение закона.
В общем, будьте бдительны.
