Как встроить флипбук в Squarespace

Добавление интерактивного флипбука на ваш сайт Squarespace превращает статичный PDF-контент в захватывающий опыт перелистывания страниц для посетителей. Встраивание флипбука FlipLink займёт всего несколько минут, если знать правильный подход, — будь то каталог товаров, портфолио или корпоративная брошюра.

В этом руководстве разобран каждый шаг — от получения кода встраивания в FlipLink до вставки его в Squarespace и обеспечения корректного отображения на любом экране.

Что нужно подготовить заранее

Перед встраиванием флипбука убедитесь, что у вас есть следующее:

• Опубликованный флипбук FlipLink — загрузите PDF на go.fliplink.me и опубликуйте его. Вам понадобится код встраивания или ссылка для общего доступа из панели управления.
• Тарифный план Squarespace Business или выше — для внедрения кода и блоков с пользовательским кодом требуется как минимум тариф Business. Планы Personal и Basic не поддерживают встраивание пользовательского HTML или iframe.
• Доступ к редактору сайта Squarespace — вы будете редактировать страницы непосредственно в конструкторе страниц Squarespace.

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

Шаг 1: Получите код встраивания из 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>

Сохраните этот код под рукой — он понадобится на следующем шаге, когда вы будете вставлять его в Squarespace.

Шаг 2: Добавьте блок кода в Squarespace

Squarespace использует редактор на основе блоков, и именно блок кода предназначен для вставки кода встраивания флипбука.

1. Откройте страницу, на которой должен появиться флипбук.
2. Нажмите Изменить на странице.
3. Наведите курсор на раздел, куда хотите поместить флипбук, и нажмите точку вставки (линия со значком плюса).
4. Выберите Код из вариантов блоков. Если не видите его, найдите «Код» в поисковике блоков.
5. Вставьте iframe-код FlipLink в блок кода.
6. Снимите флажок «Отображать источник» — это принципиально важно. Если этот параметр включён, Squarespace будет отображать HTML как текст вместо рендеринга флипбука.
7. Нажмите Сохранить, затем выйдите из редактора, чтобы просмотреть страницу.

Флипбук должен отобразиться прямо на странице с полноценной анимацией перелистывания.

Шаг 3: Сделайте флипбук адаптивным

Стандартный код встраивания хорошо работает на десктопе, но для корректного масштабирования на планшетах и мобильных устройствах нужна улучшенная версия кода с адаптивными стилями:

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

Этот метод называется «блок с фиксированным соотношением сторон». Iframe идеально заполняет контейнер, а сам контейнер плавно масштабируется вместе с шириной страницы.

Шаг 4: Настройте белый список доменов

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

1. В панели управления FlipLink откройте настройки флипбука.
2. Перейдите в раздел Белый список доменов.
3. Добавьте свой домен Squarespace (например, www.yourdomain.com или yourdomain.squarespace.com).
4. Сохраните настройки.

Белый список доменов необязателен, но рекомендован, если вы хотите предотвратить встраивание флипбука на несанкционированных сайтах. Он гарантирует, что ваш контент появляется только там, где вы намерены.

Использование внедрения кода Squarespace (для всего сайта)

Если флипбук должен отображаться на каждой странице — например, в нижнем или верхнем колонтитуле — можно использовать функцию внедрения кода Squarespace вместо отдельных блоков кода.

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

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

Альтернативные подходы

Не каждая ситуация требует полноценного встраивания через iframe. Вот два более простых варианта, которые работают на любом тарифном плане Squarespace, включая Personal:

Блок ссылки с миниатюрой

Вместо прямого встраивания флипбука добавьте визуальную ссылку, открывающую флипбук в новой вкладке:

1. Сделайте скриншот обложки вашего флипбука.
2. Добавьте блок изображения на страницу Squarespace со скриншотом.
3. Добавьте к изображению ссылку на URL вашего флипбука.
4. Настройте открытие ссылки в новом окне.

Этот подход работает на всех тарифных планах Squarespace и даёт полный контроль над визуальным представлением. Посетители нажимают на обложку и получают полноценный опыт просмотра флипбука в новой вкладке.

Блок кнопки

Для более лаконичного подхода с призывом к действию:

1. Добавьте блок кнопки на страницу.
2. Задайте тексту кнопки что-то вроде «Посмотреть каталог» или «Читать брошюру».
3. Укажите ссылку на URL вашего флипбука.
4. Настройте открытие в новой вкладке.

Это самый простой метод, который надёжно работает на всех тарифных планах и устройствах.

Решение распространённых проблем

Флипбук не отображается после сохранения

Убедитесь, что вы сняли флажок «Отображать источник» в настройках блока кода. Если эта опция включена, Squarespace рендерит код как обычный текст вместо его выполнения.

Встраивание заблокировано или отображается пустой фрейм

Проверьте настройки белого списка доменов в FlipLink. Если белый список включён, ваш домен Squarespace должен быть в разрешённом списке. Также убедитесь, что ваш тарифный план Squarespace поддерживает блоки кода — требуется тариф Business или выше.

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

Используйте адаптивную обёртку из шага 3. Метод блока с фиксированным соотношением сторон обеспечивает корректное масштабирование iframe. Если проблема сохраняется, попробуйте немного уменьшить процент padding-bottom, чтобы он лучше вписывался в экран мобильного.

Squarespace выводит сообщение «Обновитесь для использования пользовательского кода»

Блоки кода и внедрение кода доступны только на тарифных планах Squarespace Business, Commerce Basic и Commerce Advanced. Если вы используете тариф Personal, воспользуйтесь альтернативами в виде блока ссылки или блока кнопки, описанными выше.

Советы для лучшего результата

• Выбирайте правильное расположение на странице. Размещайте флипбук в полноширинном разделе для максимального эффекта. Избегайте встраивания в узкие боковые панели, где опыт перелистывания кажется стеснённым.
• Задайте оптимальную высоту. Если вы не используете адаптивную обёртку, установите высоту iframe не менее 600 пикселей для десктопа. Меньший размер делает чтение некомфортным.
• Добавьте контекст вокруг встроенного флипбука. Разместите заголовок и краткое описание над флипбуком, чтобы посетители понимали, что перед ними, прежде чем начать листать страницы.
• Тестируйте на нескольких устройствах. Просмотрите страницу на десктопе, планшете и мобильном до публикации. Встроенный предпросмотр устройств в Squarespace упрощает эту задачу.

Полезные ресурсы

Если вы встраиваете флипбуки на других платформах, эти руководства могут помочь:

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

Начните встраивать флипбук уже сегодня

Создать и встроить флипбук в Squarespace с FlipLink можно за несколько минут. Загрузите PDF, скопируйте код встраивания и вставьте его в блок кода Squarespace — ваши посетители получат полированный интерактивный опыт чтения, не покидая сайт.

Создайте бесплатный флипбук в FlipLink и начните встраивать его на свой сайт Squarespace уже сегодня. Ознакомьтесь с нашей страницей тарифов, чтобы узнать, что входит в каждый план.