Встраиваем мультимедийный контент в страницу вашего сайта

Современные мультимедийные СМИ все активнее пользуются возможностями, которые предоставляют интернет-сервисы для работы с контентом. Ведь далеко не всегда проще и быстрее  создавать материалы в популярных и эффектных форматах только на основе "движка" вашего сайта. 

Поэтому порой страницы информационных ресурсов оказываются собраны из множества встроенных в них элементов веб-сервисов. Возможным существование такого "конструктора" делают функции embed и iframe, которые можно назвать основой современного мультимедийного сторителлинга.

Что такое Embed?

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

Как встроить контент в страницу сайта через embed

Функция Embed сервиса Storymap от Knight Lab

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

Благодаря embed, вы можете разместить у себя на странице

  • Видео с видеохостингов - наиболее очевидный плюс такого подхода - отсутствие необходимости хранить объемные файлы на своем сервере. Кроме того, сама площадка видеосервиса становится дополнительным каналом распространения вашего контента.
  • Интерактивные карты, аннотированные иллюстрации - крайне редкие CMS и самостоятельные "движки" сайтов позволяют создавать сегодня их без обращения к сторонним сервисам.
  • Тесты и инфографику - все, что касается взаимодействия с пользователем.
  • И очень многое другое.

Что такое Iframe?

 

Если не вдаваться в технические подробности, для пользователя, как и для журналиста, который хочет взять код для вставки / размещения популярного веб-сервиса, разницы между Iframe и embed - нет. Она исключительно формальная - при помощи Iframe размещается html-конент (например, содержание другой веб-страницы), в то время как embed встраивает внешнее веб-приложение. Поэтому в зависимости от особенностей контента для размещения веб-сервис может предложить вам либо Iframe, либо embed. Исключительно техническая разнца между двумя этими понятиями подчеркивается тем, что слово embed сегодня стало уже общим обозначением встраиваемого контента - неважно, идет ли речь, действительно, об embed, либо об iframe, либо еще и о других способах.

Как вставить Embed или Iframe в веб-страницу?

 

Подавляющее большинство систем управления контентом или "движков" сайтов имеют два режима редактора создания постов (страниц) - визуальный и html (иногда называемый "источником" или Source). Первый из них, как вы знаете, предназначен для работы с текстом, код же для вставки нужно размещать, переключившись на второй. Для этого достаточно его просто скопировать из соответствующего поля веб-сервиса и вставить в нужное место страницы.

Как встроить контент в страницу сайта через embed?

Переключение между режимами создания сообщений в популярных CMS

Многие ресурсы также предлагают дополнительные настройки внешнего вида встраиваемого контента - как правило, в них можно задать его размеры и оформление. Впрочем, иногда это можно сделать и просто поменяв соответствующие цифры в строчке кода - например, в полях width и height.

Некоторые современные блоговые площадки вроде Medium уже не имеют html режима создания и редактирования материалов. В этом случае иногда для преобразования контента во встроенный достаточно просто нажать на кнопку с символом кода и вставить в появившееся поле прямую ссылку из адресной строки браузера.

Свои особенности использования embed-контента есть и у самого популярного блогового движка Wordpress: на нем работают далеко не все коды. Поэтому целый ряд сервисов для Wordpress предлагает их специально оптимизированные варианты. Если же их нет, а типовой код не работает, скорее всего, можно найти специальный плагин, который сделан специально для этой цели сторонними разработчиками.

Наконец, есть сервисы - например, wiki-модули некоторых CMS, которые не предусматривают использование embed в принципе. Понять это можно по отсутствию переключения на html и соответствующих кнопок в панели визуального редактора.

Как встроить контент в страницу сайта?

Визуальный редактор wiki-страниц CMS Humhub. Символ кода здесь обозначает просто вставку программного кода - когда нужно поделиться его текстом, это не функция embed.

Embed и копирайт

 

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

Представим себе, что вы хотите проиллюстрировать свою публикацию о событии фотографиями о нем, которые есть в Twitter, Instagram или в других социальных сетях. Если вы просто скопируете их и загрузите на страницу своего сайта, тем самым вы возьмёте авторский контент без разрешения.

Если же вы вместо этого воспользуетесь embed-кодом, то это будет просто технической возможностью площадки, которая предусмотрена ею изначально. Кроме того, встроенный в страницу элемент будет обладать всеми ее функциями. Например, через ссылки в сообщении Twitter можно подписаться на автора, сделать ретвит и так далее. То же относится и к другим популярным сервисам.

Как встроить контент в страницу сайта через embed

Окно для встраивания поста из Facebook

Таким образом, знание о том, что такое embed, очень важно для любого журналиста или блогера, пишущего для интернета, потому как существенно расширяет его возможности.

Недостатки Embed

 

При использовании заимствованных объектов на страницах своих сайтов стоит помнить о некоторых связанных с этим ограничениях и неудобствах.

Во-первых, встроенный контент как правило увеличивает время открытия веб-страницы, так как подгружается с внешних ресурсов. Особенно это важно, когда мы имеем дело с "тяжелыми" мультимедийными форматами. Скорость загрузки, в свою очередь, является очень важным показателем для сайта. Если страница открывается очень долго, вы можете просто потерять немалый процент аудитории. Не любят это и поисковые машины, которые в ответ понижают ресурс за неоптимизированное содержимое в результатах поиска.

Во-вторых, embed с некоторых сайтов может быть недоступен для пользователя по причине недоступности для него самого сервиса, где вы разместили информацию. Причин того может быть множество - например, настройки доступа к сайтам, сделанные сетевым администратором корпоративной сети учреждения.

В-третьих, встроенный контент может быть заблокирован и на уровне пользовательского устройства - например, на отображении некоторых элементов сказывается использование в браузере плагинов Ad Block или выключенные Flash Player или Java Script. Не всегда гармонично смотрятся некоторые embed-элементы также на экранах мобильных устройств.

Самый простой вариант

 

Для наиболее популярных площадок многие сервисы в поле "Поделиться" предлагают отдельные кнопки. По клику по ним (если вы авторизованы в браузере на этих площадках) вы напрямую встроите нужный контент в их страницы без необходимости в дополнительных операциях. И даже, может быть, сможете настроить и внешний вид встраиваемого контента.

Эксперты в теме

Используя это, были реализованы проекты

Алексей Сидоренко
Технический руководитель "Карты помощи"

Не бойтесь спрашивать совета у сетевого сообщества. Для создания "Карты помощи" мы обратились к пользователям портала Хабрахабр. Откликнулось много талантливых и ответственных людей, с некоторыми из них мы работаем до сих пор.