How To Embed Flipboard Magazines On Website

Flipboard magazines allow people to enjoy and curate the news they like or share with their friends. With the ability to access the Flipboard magazines right in Web browser, readers can share magazines with friends and family who may not have Flipboard. However, embedded Flipboard magazines on blog or web page allow visitors to browse the site’s archives with more visual way. As a result, embed code is not available generally. Interest users can easily embedded Flipboard magazine using the standard IFRAME tags on a web page.

Here’s simple trick on how to embed Flipboard magazines on any blog or web pages. Presented below is generic embed code on Flipboard magazine, which can be used embed Flipboard magazine for direct viewing on web page, blog or community forum, subject to privacy settings.

1. Firstly, go to share.flipboard.com and select Flipboard magazine widget. The embed code is located in the centre of the page.
   
   If it’s available, copy and paste the embed code into the HTML on web page.
2. If the embed code link is not present, on the web page that you want the Flipboard magazines to display, copy and paste <div id=”flipboard”></div> in web template, the code can paste anyplace in web template where you wish Flipboard magazines located.
3. Next copy and paste the following Flipboard magazines embed code near the closing </body> tag of web page

<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>

4. The Flipboard magazines can now be viewed directly from web page.

Here’s an example of embedded Flipboard magazines

Note: The widget is heavy and therefore should be added asynchronously to a web page so that it doesn’t block other elements of the page from loading in the browser.