Pages

Search This Blog

Total Pageviews

Tuesday 12 August 2014

How to Embed Flip board Magazines on your Website

How to Embed Flip board Magazines on your Website
If you have accessed the Digital Inspiration website recently from your
desktop, you have have noticed a Flipboard magazine
Any Flipboard magazine can be easily embedded using the standard IFRAME
tags on a web page but there are a few things that you should consider:
                        1. The magazine widget is only displayed on desktop computers  since the magazine layout isn’t optimized for mobile phones yet.
                      2. 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.
  Here’s how you can embed the Flipboard magazine that will take care of both the above requirements.
Step 1 – Insert this <div> anywhere in your web template where you would
like the Flipboard magazine to appear.

                                1. <div id="flipboard"></div>
Step 2 – Insert this JavaScript snippet near the closing </body> tag of your website. It will load asynchronously and thus can be placed at the bottom of your page.
                                1. <script>
                                2. (function () {
                                3. var width = 0,
                              4. flipboard = document.getElementById('flipboard');
                              5. width = flipboard.getBoundingClientRect().width ?                                         flipboard.getBoundingClientRect().width : flipboard.offsetWidth;
                              6. if (width > 800) {
                              7. flipboard.innerHTML = '<iframe width="100%" frameborder="0" height="600px" marginheight="0" marginwidth="0" scrolling="no"  src="https://flipboard.com/section/tech-tips-bnjaT5"></iframe>'
                              8. }
                              9. })();
                              10. </script>

0 comments:

Post a Comment