How to embed a publication into your own website?

Product: FlippingBook Publisher

Embedding is a technique to insert one web page into another. This is an excellent way to show your FlippingBook Publications as if they are a seamless part of your own website. For example, you can view our showcase flipbook ‘Medisys Preventive Health Magazine’ in a new tab by clicking on this link But you can also embed it to your webpage, as in the example you see below:

Medisys issue

If you use our recommended embed code, then when your readers open your page:

  • On a desktop computer, they will see the full publication
  • On a mobile device, they will see a clickable image of the cover page. When the reader taps the cover, it opens the flipbook in a new browser tab.

The basic steps to embed a publication:

  1. In the menu bar, click on Publication and then Get Embed Code.
  2. Paste the link to your online flipbook in the Publication URL field.
  3. Specify other embedding options if necessary. You can specify
    • the size
      • Parent container size will max the publication adjust to its parent's container size. This gives the optimal results but only works if the parent container has a set width and height! Many containers don't have a set height. In that case, you will only see an icon, not a flipbook. If this happens, you can manually adjust the code after pasting it in your CMS to set a fixed height in pixels. For example:
        <a class="fbc-embed" style="max-width: 100%;" href="" data-fbc-lightbox="yes" data-fbc-width="100%" data-fbc-height="600px">My flipbook</a>
      • Custom size will use the width and height that you specified. We recommend a width and height of at least 800x600 pixels.  
    • on what page the embedded flipbook should be opened (by default this will be on the first page).
  4. Click on the Embed Code textbox to copy the code. As soon as you hover over the code, its text will change to Click to Copy.
  5. Now go to your Content Management System to edit the page on which you want to embed your FlippingBook and paste the copied code in the correct place. How this is done exactly depends on your content management system. Typically you will have to use an option like ‘Insert code’, ‘Embed code’, or ‘Insert HTML’. Other CMSs will allow you to edit the HTML code directly. If in doubt, please contact your website administrator or the CMS documentation.   


Tip! If you are not happy with the size of your embedded flipbook, then you can change the numbers directly in the code in your CMS. You don’t have to go back to the ‘Get embed code’ window.


Read more


Was this article helpful?
drift chat