Embed your Flipbook within an iframe

October 4, 2012 Uberflip Customer Success

Disclaimer

  • These are general guidelines only and we offer them only to be helpful.
  • We do not officially support these methods as their effectiveness may change over time.
  • As website designs and layouts differ, we cannot provide exact embed code for you.   Adjustments to any iframe embed code to achieve your desired effect are your responsibility.  See the recommendations at the bottom of this article for some general guidelines. 
  • Browsers by default will block 'mixed content'. In this case, that would included HTTP Flipbooks delivered via an iframe on an HTTPS site, unless an end user takes action to allow the content to load.   Flipbooks by default are HTTP but if you are interested in using HTTPS to avoid that issue, please contact support.

Embed using iframe

You can use a simple iframe HTML code to embed your Flipbooks onto your website. 

This can keep users on your webpage and allow them to browse your Flipbook content without opening another window or tab.

Example 1 - Issue Link

Take the Issue URL http://goingdigital.uberflip.com/i/85628, for example.

The embed code could look like: 

<iframe src="http://goingdigital.uberflip.com/i/85628" scrolling="no" style="overflow:hidden;width:100%;height:100%" webkitallowfullscreen mozallowfullscreen allowfullscreen><p>your browser doesn't support frames</p></iframe>

Example 2 - Folder/Title Link

Always have your latest Flipbook (by Publish Date) display in your iFrame by using the Folder link in your embed code.

In our example above, the URL for the folder is: http://goingdigital.uberflip.com/t/10418.

The embed code would be the same, except for the URL:

<iframe src="http://goingdigital.uberflip.com/t/10418" scrolling="no" style="overflow:hidden;width:100%;height:100%"  webkitallowfullscreen mozallowfullscreen allowfullscreen><p>your browser doesn't support frames</p></iframe>

 

RECOMMENDATIONS:

-We recommend the parameter scrolling="no" be set within the iFrame to ensure devices display embedded content in the correct height on mobile devices.

-We recommend using the parameter style="overflow:hidden" to ensure scroll bars are not displayed.

-If attempting full width or height, use javascript to determine the pixel width and height rather than using 100% and be sure to adjust these values on either window resize OR device screensize or orientation.

-Include the parameters webkitallowfullscreen mozallowfullscreen allowfullscreen in your iframe code to ensure the HTML 5 Flipbook's Full Screen option will work when you are embedding Flipbooks in iFrames.

No Previous Articles

Next Article
Promoting on Twitter and Facebook directly from Application
Promoting on Twitter and Facebook directly from Application

How to share your Folder and Flipbook links on Twitter and Facebook directly from the App.