Advanced Embedding Options

Product: FlippingBook Publisher

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:

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:

To embed a cover preview of your publication, you will need to get the embed code (make sure you choose the option to embed linkable cover!) and add the code to your webpage.

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:

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:

  1. Open your online publication in a browser.
  2. Click the Share button in your publication bottom menu (if you disabled sharing of your publication, generate embed code using FlippingBook Publisher  instead)
  3. In the pop-up window, open the Insert to Site tab
  4. 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.
  5. 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.
  6. 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:

  1. Open FlippingBook Publisher software
  2. Click the Publication menu and choose the Get Embed Code option
  3. In the pop-up window, specify your Publication URL
  4. 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
  5. 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.
  6. 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:

  1. Open FlippingBook Publisher software
  2. 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.
  3. In the pop-up Share dialog, choose the  Insert to Site tab
  4. 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.
  5. Specify other embedding options if necessary. For example, if you chose to embed full publication, you might want to adjust the Publication size.
  6. 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.

Related Articles

 

Was this article helpful?
drift chat