How to Embed an eBook on a Website (2020 Edition)

03.07.2020 Nate Hoffelder 4 Comments

I was browsing through my blog’s archives this morning when I came across an old post from 2014 on embedding ebooks in a web page.  I was surprised to discover that I haven’t touched on this topic in the past six years.

I build websites for authors, so you would think it would have come up. I would have assumed that authors would want to have a sample on their site that visitors can read while they are still on the site, but I guess the practice is still not common.

Maybe they just don’t know how easy doable it is?

ETA: Well, I think it’s easy, but then again I am used to having tech thrown at me and figuring it out how the tech works while it’s still in mid-air. Not everyone is used to doing that, so this might not be as easy for you as it was for me.

A lot has changed in the past six years. Back then you had to use third-party apps or tools such as ReadK.it or Bib/i if you wanted to embed an Epub ebook in your site. (ReadK.it actually does a lot more than that, although I am not sure it still works.)

In 2020 it is a lot easier to embed that ebook, just so long as you are fine with not using an Epub.  Now if you want to let website visitors read an ebook on your site, the easiest way to do it is to embed either a PDF or HTML file.  This is fine by me because I am more interested in what the visitor sees than in the technical details (plus, PDFs are ebooks).

And it’s really easy – if you have a WordPress site. All you have to do is install a plugin that can display a "flipbook". (I don’t know why it is called this, but I do know that if you search the WP plugin directory for that term, you will find plugins that can display a PDF on your site, but if you search the plugin directory for Epub you will only find plugins to help you sell ebooks.)

I recently added this feature to a client’s site using a plugin called 3D Flipbook. This plugin offers several different ways to embed either a PDF, including as a pop-up that can be embedded by pasting a shortcode in the page.

You can see the shortcode in action below.

Click the thumbnail below, and the PDF should open.

[3d-flip-book mode="thumbnail-lightbox" urlparam="fb3d-page" id="139962″ title="false" lightbox="dark"]

That is a one-page PDF, so it’s not the best example, but it should give you an idea of what this will look like and how it works.

One reason I used it was so I could point out how you might want to format the PDFs to a size smaller than 8.5 x 11 so they will be easier to read. If you could format the ebooks for a 6″ ereader screen, that would be just about perfect.

Or, you could try using an HTML file as the source for the flipbook. (I would show you what that looks like, but I’ve tried 3 plugins and still can’t pull it off.)

There are over a dozen plugins that promise to let you embed a PDF in a web page. I have not tried them all, but I would recommend that you try several of them before settling on one. They each have different features, so one might have the abilities you need, while another does not.