Embedding the Flipboard Magazines on your Website which has the Access of Digital Inspiration Website

Embedding the Flipboard Magazines on your Website which has the Access of Digital Inspiration Website

If you have the access of Digital Inspiration website recently from your desktop, you have noticed a Flipboard magazine widget that is now embedded on all article pages – The magazine offers an alternative, more visual way for visitors to browse the site’s archives and the response have been good.

Using the standard IFRAME tags on a web page any Flipboard magazine can be easily embedded but there are few things that you have to consider:

1. Since the magazine layout is not optimized for mobile phones yet, The magazine widget is only displayed on desktop of the computers.

2. It will not block the other elements of the page loading from the browser.Because the widget is heavy and therefore should be added asynchronously to a web page.

Here we have some steps how to embed the Flipboard magazine that will take care of both the requirements mentioned above.


Step 1 – In the first step Insert the <div> anywhere in the web template where you would like the Flipboard magazine to appear.

                                           <div id="flipboard"></div>

Step 2 – In this step Insert the JavaScript snippet near to the closing </body> tag of the website. It will load placed at the bottom of the 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>

• Finally remember and replace the Flipboard magazine URL.

But Internally the JavaScript will calculates the width of the visitor’s browser, similar to what we did for responsive AdSense ads, and if the size is greater than 800px, the IFRAME is added to the DIV. Simple!