Как встроить флипбук на сайт с помощью iframe

Вы создали потрясающий интерактивный флипбук из своего PDF. Что дальше? Поделиться ссылкой — вполне рабочий вариант, но встраивание флипбука прямо на сайт удерживает посетителей, не отправляя их куда-то ещё. Это выглядит профессионально, быстро загружается и даёт полный контроль над восприятием контента.

В этом руководстве мы подробно разберём, как встроить флипбук FlipLink на любой сайт с помощью iframe — плюс советы по адаптивности, безопасности и корректному отображению на всех устройствах.

Почему встраивать лучше, чем просто делиться ссылкой?

Когда вы делитесь ссылкой на флипбук, посетители уходят с вашего сайта, чтобы просмотреть его. Это значит, что вы теряете контроль над пользовательским опытом — и они могут не вернуться. Встраивание оставляет всё на вашей территории.

Почему встраивание выигрывает:

• Меньший показатель отказов — посетители остаются на вашей странице, а не уходят на другой сайт
• Лучший брендированный опыт — флипбук воспринимается как нативная часть вашего сайта
• Более высокая вовлечённость — читатели охотнее взаимодействуют с контентом, загруженным прямо на странице
• SEO-преимущества — увеличивается время на странице, что сигнализирует поисковикам о качестве контента
• Профессиональная подача — идеально для каталогов товаров, портфолио и продающих материалов

Если вы встраиваете PDF-просмотрщик вместо флипбука, ознакомьтесь с нашим руководством как встроить PDF на сайт.

Как получить iframe-код из FlipLink

FlipLink генерирует коды встраивания автоматически — программирование не нужно. Вот как получить свой:

1. Войдите в панель управления FlipLink на go.fliplink.me
2. Откройте флипбук, который хотите встроить
3. Нажмите кнопку «Поделиться» на панели инструментов
4. Выберите вкладку «Встроить» в панели общего доступа
5. Скопируйте iframe-код

Код выглядит примерно так:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Готово. Вставьте этот сниппет в любую HTML-страницу, и флипбук появится с полноценной 3D-интерактивностью перелистывания.

Подробнее обо всех способах распространения флипбука читайте на странице функций распространения и общего доступа.

Встраивание на различных платформах

WordPress

WordPress упрощает встраивание iframe:

1. Откройте страницу или запись, куда хотите добавить флипбук
2. Добавьте блок Пользовательский HTML (не блок абзаца)
3. Вставьте iframe-код
4. Просмотрите страницу, чтобы убедиться, что флипбук загружается корректно

Если вы используете классический редактор, переключитесь на вкладку Текст (не Визуальный) перед вставкой. Для более детального руководства по WordPress читайте нашу статью как встроить флипбук в WordPress.

Wix

Wix не поддерживает необработанный HTML в обычных текстовых блоках, но предлагает обходное решение:

1. В редакторе Wix нажмите Добавить (+) на левой панели
2. Выберите Встроить код > Встроить HTML
3. Вставьте iframe-код в поле HTML
4. Измените размер виджета встраивания, чтобы он соответствовал макету
5. Опубликуйте сайт

Squarespace

Squarespace поддерживает блоки кода нативно:

1. Откройте страницу, куда хотите добавить флипбук
2. Добавьте новый блок кода (через меню +)
3. Вставьте iframe-код
4. Снимите флажок "Отображать источник", если такой параметр есть
5. Сохраните и просмотрите

Статические HTML-сайты

Для любого статического HTML-сайта просто вставьте iframe-код в нужное место HTML-файла. Он работает внутри контейнеров <div>, секций статей или макетов лендингов — везде, где допустим HTML.

Советы по адаптивному встраиванию

Iframe с фиксированной шириной отлично смотрится на десктопе, но ломается на мобильных устройствах. Вот как сделать встраивание адаптивным, чтобы оно подстраивалось под любой размер экрана.

Метод обёртки с фиксированным соотношением сторон

Оберните iframe в контейнер, сохраняющий постоянное соотношение сторон:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

padding-bottom: 75% создаёт соотношение сторон 4:3. Скорректируйте это значение в зависимости от размеров флипбука:

• 4:3 (альбомная) — padding-bottom: 75%
• 16:9 (широкоформатная) — padding-bottom: 56.25%
• 3:4 (портретная) — padding-bottom: 133%
• 1:1 (квадратная) — padding-bottom: 100%

Быстрая проверка на мобильном устройстве

После встраивания проверьте на реальном телефоне — не только в режиме адаптивности браузера. Масштабирование щипком и перелистывание касанием должны работать плавно. Если на маленьких экранах встраивание кажется тесным, рассмотрите увеличение минимальной высоты до 400px или 500px.

Белый список доменов для безопасности

Если флипбук содержит чувствительный контент — прайс-листы, внутренние отчёты, предложения для клиентов — вероятно, вы не хотите, чтобы его встраивали на сторонних сайтах.

Функция белого списка доменов FlipLink позволяет ограничить места загрузки iframe:

1. Откройте настройки флипбука
2. Перейдите в раздел Безопасность или Встроить
3. Добавьте разрешённые домены (например, yourcompany.com, blog.yourcompany.com)
4. Сохраните изменения

Теперь флипбук рендерится только при загрузке с этих доменов. Если кто-то скопирует ваш iframe-код и вставит его на своём сайте, он не загрузится — пользователь увидит сообщение об отказе в доступе.

Это особенно полезно для каталогов товаров, которыми вы делитесь с конкретными розничными партнёрами, или для документов, предназначенных клиентам, которые не должны быть публично доступны.

Альтернатива: встраивание с кликабельным изображением

Не в каждой ситуации нужен полноценный iframe. Иногда кликабельное изображение-превью работает лучше — особенно когда нужна лёгкая заставка, открывающая полный флипбук по клику.

FlipLink автоматически генерирует встраивание с кликабельным изображением. Оно выглядит вот так:

<a href="https://go.fliplink.me/view/your-flipbook-id" target="_blank">
  <img
    src="https://go.fliplink.me/thumbnail/your-flipbook-id.jpg"
    alt="View flipbook"
    style="max-width: 100%; cursor: pointer;"
  />
</a>

Этот подход отлично подходит для:

• Email-рассылок (где iframe не работает)
• Виджетов боковой панели с ограниченным пространством
• Записей блога, где не хочется перебивать поток чтения
• Страниц с несколькими флипбуками — показывайте миниатюры, пусть читатели выбирают, что открыть

Сравнение опций встраивания

Не уверены, какой метод подходит именно вам? Вот краткое сравнение:

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

Типичные проблемы и их решения

Возникли трудности? Вот быстрые решения самых распространённых проблем:

• Флипбук не загружается — проверьте, что URL встраивания корректен и флипбук опубликован (не в режиме черновика)
• Заблокирован браузером — некоторые браузеры блокируют смешанный контент. Убедитесь, что ваш сайт использует HTTPS, если URL встраивания тоже HTTPS
• Мелкий на десктопе — установите width="100%" и увеличьте значение height, или используйте метод адаптивной обёртки выше
• Обрезан на мобильных устройствах — используйте обёртку с соотношением сторон вместо фиксированных пиксельных размеров
• Заблокирован на другом сайте — если у вас включён белый список доменов, добавьте новый домен в разрешённый список

Начните встраивать флипбуки

Встроить флипбук на сайт с FlipLink занимает менее минуты. Загрузите PDF, скопируйте iframe-код, вставьте на сайт — готово.

Будь то витрина продукции, архив цифрового журнала или интерактивный корпоративный отчёт, встраивание удерживает аудиторию вовлечённой, а ваш контент — на первом плане.

Создайте бесплатный аккаунт FlipLink и начните встраивать интерактивные флипбуки на свой сайт уже сегодня. Уже есть готовый контент? Ознакомьтесь с нашими тарифными планами — от 129 $ за пожизненный доступ к 100 активным публикациям.