Как внедрить Flipboard журналы на Ваш сайт

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

Любой журнал Flipboard может быть легко встроен помощью стандартных тегов IFRAME на веб-страницы, но есть несколько вещей, которые вы должны рассмотреть:

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

Установить журнал Flipboard на свой сайт

Шаг 1 — Вставьте <div> в любом месте вашего веб-шаблона, где вы хотите журнал Flipboard появляться.

<div id=»flipboard»></div>

Шаг 2 — Вставьте этот фрагмент JavaScript-кода рядом с закрывающим тегом </body> вашего сайта. Оно будет загружаться асинхронно и, таким образом, могут быть размещены в нижней части вашей страницы.

<script>

(function () {

var width = 0,

flipboard = document.getElementById(‘flipboard’);

width = flipboard.getBoundingClientRect().width ? flipboard.getBoundingClientRect().width : flipboard.offsetWidth;

if (width > 800) {

flipboard.innerHTML = ‘<iframe width=»100%» frameborder=»0″ height=»600px» marginheight=»0″ marginwidth=»0″ scrolling=»no» src=»https://flipboard.com/section/tech-tips-bnjaT5″></iframe>’

}

})();

</script>