Skip to main content

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

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.

Similar Articles


Comments


bob 3 July, 2020 um 5:23 pm

Of course you could just design a website around your content, like I have

http://www.unsolved-murders.co.uk/murder-content.php?key=368&termRef=Keith%20Andrew%20Balfour

Really easy to read on a phone and tablet as well as a pc.

Nate Hoffelder 3 July, 2020 um 5:30 pm

sure, but your design doesn’t help for novella- or short-story-sized content.

I’ve read whole stories on web pages before – novels, even. Based on my experiences I really think having a pop-up that looks like an ebook would really add to the expereince.

hana 14 April, 2022 um 10:50 pm

May i know what plugin you use for this?


Sandy 26 February, 2022 um 2:13 pm

….a website as a book with no PDF and minimal vanilla javascript

https://montana-riverboats.com/?robopage=FliesBook


Write a Comment