Are you looking for the best way of integrating your flipbooks into your website? You can easily embed an interactive publication with a page-flipping effect on your webpage! Another option is to embed a clickable cover preview of your flipbook. When a user clicks on the cover, the full publication opens. Embedding a clickable cover is useful if space is limited or if you want to embed several flipbooks on one page.
Whichever option you choose, embedding a flipbook into your website is quick and simple. All it takes is pasting a short piece of code into your webpage!
In this article, we will tell you about:
- Embedding a cover preview
- Getting embed code from your online flipbook
- Generating embed code using FlippingBook Publisher
- Adding embed code to your webpage
If you would like to embed a full publication, please refer to the article How to embed a publication into your own website?
Embedding a cover preview
It is possible to embed a small image of publication cover into your webpage. When a user clicks on this image, the full flipbook opens. This is a perfect solution if you don’t have enough space on your page for the full publication, or if you have several publications and want to create page layout similar to this:
When the book cover is clicked, the full publication can be opened either in a new browser tab or in a pop-up window. You can choose a preferable way of opening your flipbooks on a desktop. On mobile devices, flipbooks are always opened in a new browser tab.
If you are reading this article on a desktop computer, you can test both options:
- Pop-up window - if you click the cover below, the book will open in a pop-up window:
- New browser tab - if you click the cover below, the book will open in a new browser tab:
If you want to specify preferable behavior, use FlippingBook Publisher to generate embed code.
Note! You can also specify preferred behavior by editing the embed code manually. If you want your flipbook to open in a pop-up window, set the value of the data-fbc-lightbox parameter to “yes”. If you want your flipbook to open in a new browser tab, set the value of the data-fbc-lightbox parameter to “no”.
In the video below, you can see an example of the whole process of embedding publication as a clickable cover, where we use the Weebly CMS:
Getting embed code from your online flipbook
To embed your flipbook into your website, you need to get embed code first. There are several ways you can generate embed code.
Let’s first see, how you can get embed code directly from your flipbook:
- Open your online publication in a browser.
- Click the Share button in your publication bottom menu (if you disabled sharing of your publication, generate embed code using FlippingBook Publisher instead)
- In the pop-up window, open the Insert to Site tab
- Specify the Embedding type. Choose the Full Publication option if you want to embed the whole interactive publication. Choose the Linkable Page option if you want to embed a clickable cover preview of your flipbook.
- Specify other embedding options if necessary. If you chose to embed the full publication, you might want to adjust flipbook size by changing Width and Height values. You can also check the Insert current page box if you want the embedded publication to open on the current page.
- Press the Copy button.
Generating embed code using the Share button in your online publication is very simple and convenient. However, sometimes you might want to remove the Share button from your publication bottom menu if you don’t want your content to be shared. In this case, you can generate embed code using FlippingBook Publisher (this method also offers you a bit different options for generating embed code).
Generating embed code using FlippingBook Publisher
You can get embed code in FlippingBook Publisher software as follows:
- Open FlippingBook Publisher software
- Click the Publication menu and choose the Get Embed Code option
- In the pop-up window, specify your Publication URL
- Specify the embedding type. Choose the Interactive option if you want to embed the whole interactive publication. Choose the Cover option if you want to embed a clickable cover preview of your flipbook
- Specify other embedding options if necessary. For example, if you chose to embed interactive publication, you might want to adjust publication size. You can use the Custom option to specify the fixed size for your publication in pixels. Alternatively, you can choose the Use parent container size option so that the publication will be dynamically adjusted to fill up the container that you set up in your Content Management System (CMS). This way, you can, for example, set-up the flipbook to fill the full width of your page if the parent container is configured in this way.
- Click on the Embed Code textbox to copy the code
This method works both for self-hosted publications and publications hosted on FlippingBook Cloud!
Note! If you have an open project for publication hosted on FlippingBook Cloud, you will see a slightly different embedding dialog as we describe further.
Finally, if your publication is hosted on FlippingBook Cloud, you can also get the embed code as follows:
- Open FlippingBook Publisher software
- If you haven’t opened a project, click on the FlippingBook Cloud tab, Right-click your publication and choose the Share option from the pop-up menu. If you have an open project, click the Publication menu and choose the Get Embed Code option.
- In the pop-up Share dialog, choose the Insert to Site tab
- Specify the Publication type. Choose the Full Publication option if you want to embed the whole interactive publication. Choose the Linkable Cover option if you want to embed a clickable cover preview of your flipbook.
- Specify other embedding options if necessary. For example, if you chose to embed full publication, you might want to adjust the Publication size.
- Press the Copy Code button
Adding embed code to your webpage
You can choose the method of generating embed code that suits you best.
Once you have generated embed code, go to your Content Management System (CMS) to add this code to your web page.
The exact way to add embed code depends on your CMS. 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.
- How to embed a publication into your own website?
- How embedding works on mobile devices
- Optimize your publication for embedding
- Embedding your publications in Wordpress
- Troubleshooting embedding problems