How to Add URL Hyperlinks with the Kindle Kids Book Creator (KKBC)

 

INSERT A URL HYPERLINK WITH THE KINDLE KIDS BOOK CREATOR

The Kindle Kids’ Book Creator (KKBC) is Amazon KDP’s free self-publishing tool for creating illustrated children’s books from a PDF or from jpeg images.

The KKBC is easy to use, convenient, and is both PDF and JPEG friendly. It results in a fixed-format Kindle e-book, designed for picture friendly devices (and so the published e-book may not be available across all devices, but it will work on most devices for which it would be convenient to read an illustrated children’s book).

One of the main issues is how to add a clickable url hyperlink that will take the customer directly to an external website (such as your author page or blog).

There is a way to do it, but it may not seem obvious. The steps below will show you how.

HOW TO ADD A CLICKABLE URL HYPERLINK TO AN EXTERNAL WEBSITE WITH THE KKBC

Step 1. Add the text for the URL by inserting a textbox. Click the button on the toolbar called Add Text. Then type the text as you want it to show.

In my example, I typed the following text (see the picture of text below). This is the url for my Amazon author page, which shows all of my books.

(If you wish to do the same, login to Author Central, click the Author Page tab at the top, and read the instructions where it says Author Page URL.)

Step 2. Disable the pop-up feature for the textbox. Right-click in the textbox area and click the option to Delete Pop-up. This option preserves the text, but removes the pop-up feature that would otherwise be associated with the text that you added.

The pop-up feature needs to be disabled before you can make the hyperlink url clickable.

(If you run into trouble where you aren’t able to edit your text or you don’t see anything when you right-click, try closing the KKBC and restarting the computer. When you restart your computer and reopen the KKBC, try not opening other programs along with it.)

Step 3. Open a web browser and visit the webpage that you wish to link to. Copy/paste the full web address shown in your browser. When you do this, the copy/paste option should automatically include the http:// part that you need. Paste this url into a simple text editor like Notepad.

You can see the full url for my author page in the picture of text below. Compare it to the picture above. Notice how it automatically added the http:// part.

(Fancy text editors like Word sometimes include other stuff when you later need to copy/paste from Word, so it’s desirable to work with Notepad.)

Step 4. Prepare a simple line of HTML to paste into the KKBC. You don’t need to know anything about HTML. You just need to be able to follow these directions.

On a new line in Notepad (simply press Enter to begin a new line of text), type a line of HTML similar to my example in the picture of text below, except for using your own website url.

  • first type a less than symbol <
  • next write a href=”
  • (the quotation marks should be straight, not curly)
  • next copy/paste the full website URL for your webpage, including the http part (the same text from Step 3)
  • next close the quotation marks ” (straight, not curly)
  • next type a greater than symbol >
  • next type the URL text as you want it to look (the same text from Step 1)
  • next type a less than symbol <
  • next type /a
  • next type a greater than symbol >
  • when you’re finished, the text should look just like my example above, except for using your own website URL instead of my author page URL
  • it has the following structure

Step 5. In the KKBC, click the View tab and select HTML View.

Step 6. Click the HTML tab in the KKBC. It’s right next to the Design tab, just below the toolbar and above the view of your book’s content.

(You can only see the HTML tab after you’ve enabled HTML View in Step 5.)

Step 7. Find the text that you typed in Step 1 in the HTML code that you see. This is like the book, Where’s Waldo. You have to hunt for it.

It’s probably in a div id tag, and it’s probably towards the bottom. (If you’re about to give up, try copying and pasting the HTML text into a text editor and using the Find button to help figure out where that text is. Once you know where it is, you should be able to go back to the KKBC and find it in the HTML View.)

In the picture below, I used a RED ellipse to show where I found my text from Step 1.

(Make sure that you have the right page selected before you click the HTML tab. If not, you never would find it.)

Step 8. Once you find the text in Step 7 (identical to what you typed in Step 1), highlight exactly that text, no less and no more.

It’s very important that you highlight it perfectly. Don’t include the < or > signs, and don’t miss any characters from the text.

Step 9. Then copy/paste the text from Step 4 (the one line of HTML code that we made) to overwrite the text from Step 8.

That’s it. Except now you should make sure it works right. See Step 10.

If you’re able to zoom in on my picture below and if you’re able to find and read the text, it shows how my example looks after Step 9. (Note that I didn’t actually publish this book with the KKBC. I just used the KKBC to create a test file and to illustrate how to use this feature of the KKBC. I actually published this book with the Kindle Textbook Creator instead, and it doesn’t include any clickable links. But that’s another story. The test file that I created with my KKBC still works.)

Step 10. Click Book Preview and Create Book Preview. This may take a minute.

When it finishes, it should open the Kindle Previewer (which you need to install before you do Step 10, if you don’t already have this valuable tool installed — you can find Kindle Previewer v3 and other valuable tools at Amazon KDP right here: https://kdp.amazon.com/en_US/help/topic/A3IWA2TQYMZ5J6).

Find the page where you added the clickable hyperlink. Place your cursor over the hyperlink. The symbol of the cursor won’t change shape (it will be an arrow, not a hand), but that doesn’t matter.

When your cursor is over the clickable hyperlink, left-click your mouse once.

You can see how my example looks in the preview window below.

When I did this, my web browser opened my Amazon author page successfully.

You can see the webpage that opened below.

Chris McMullen

Author of A Detailed Guide to Self-Publishing with Amazon and Other Online Booksellers

  • Volume 1 on formatting and publishing
  • Volume 2 on marketability and marketing
  • 4-in-1 Boxed set includes both volumes and more
  • Kindle Formatting Magic (now available)

41 comments on “How to Add URL Hyperlinks with the Kindle Kids Book Creator (KKBC)

  1. Chris, thank you so much for making these step-by-step directions. KDP should thank you for providing this work-around. I created a hyperlink that worked successfully in the KKBC Book Preview (YAY!), but not in the Kindle Previewer 3 when I uploaded the .mobi file (hmmm…). I’m not sure why it worked in one but not the other. I also learned that once I make a hyperlink and change the html, the text box can’t be deleted. Instead, I have to start over with a new document. Thank you again!

    • That’s interesting. I took the .mobi file that I just created, uploaded it to KDP, and checked the online previewer. At first, a message told me that my book included interactive content that the online previewer doesn’t support, but then when I proceeded to click on my hyperlink, it opened up the webpage.

      Next, I clicked Book Details to return to the publishing page at KDP. I clicked Preview on Your Computer in the Kindle eBook Preview section, and selected the MOBI option. I downloaded this .mobi file to my computer and opened it with the Kindle Previewer v3. (It took a while to open.) When the downloadable previewer opened, it worked there, too, just like it had within the KKBC.

      Finally, I downloaded the .mobi file from the Kindle eBook Preview section — the same place where I tested it with the previewer in the previous paragraph. I went to my downloaded files (in FireFox, these are accessed via a down arrow at the top right corner of the browser) to find my downloaded .mobi file, I right-clicked it, and selected Open Containing Folder. In that folder, I found the .mobi file and copied it. Then I connected my Kindle Fire HD 8.9″ via USB cable. I opened the Fire device in my computer folder and went into Documents. I pasted the .mobi file in Documents. (Don’t paste it in Books.) Then I pressed the Home button on my Kindle Fire device, clicked Docs, and found a folder with today’s date on it. Inside of that folder, I found my .mobi file and opened it. When I did this, I found the page with the hyperlink and clicked on the hyperlink. My Amazon author page opened up in a web browser on my Kindle Fire.

      In principle, the same should work for you. (Note that I use a PC, and sometimes things are different for Mac users.)

      • Chris, I didn’t go through this elaborate of a test. I used the published .mobi file from KKBC to upload to the Kindle Previewer 3 app on my Mac laptop. I don’t have a kindle device to test on, just a kindle app I use for kindle books. Not sure how to test on that. In any event, I created my book in InDesign, so I’ll have to delete the hyperlinks and replace that text in KKBC with live links made individually using your work-around. I also have to make my pop-ups. I’m going to wait to do all this because my book is with an editor right now. No sense in doing it twice. But now that I know how to do it, I feel more confident.

      • When your book is ready to go, if you can get access to a pc, you might consider trying to run your PDF through the KKBC there. (Maybe someone who uses mac and tries this out will share their experience in the comments, especially regarding the published ebook.)

        Good luck with your book. 🙂

  2. Chris, you’re absolutely awesome, this should be in KDP’s help notes in place of what their current “solution” is. Thank you so much!

  3. Chris, this is great! I followed the steps, found my text, highlighted it, and copy and pasted the full HTML code you suggested (with my content of course). Then, I clicked on the tab “Design” to see it, and it deleted the entire page. Went back to HTML VIEW, and most of the code was gone. Any ideas?

  4. Me again. It looks like KDPKC is replacing the / with “=” see example: “http:=”” monster-kisses.cturtlepublishing.com=”” free-coloring-book=”” “=””>Click Here

  5. Let me try again (I removed the on both ends so it would show)
    a ref=”http://monster-kisses.cturtlepublishing.com/free-coloring-book”>Click</a

  6. Hello!
    Thank you so much for this. Solved my problem.
    But I just didn’t get one thing. When I put in the hyperlink, the hyperlinked-text size becomes so small and it does not give me an option to edit the text size.

  7. Hi Chris,
    I really appreciate your help here but I’ve followed these instructions twice now. Each page of my book is a simple .jpeg. When I preview the book, the page I put the link in is now blank. I’d sure appreciate any guidance. Thanks,
    Jon

  8. Hi Chris, I really appreciate your help here. I’m trying to create a book of .jpeg pictures with a hyperlink on each. I cannot use comic book creator because I need hyperlinks. The problem is that when I put in the hyperlink then the whole page goes blank when I preview it. Any help would be very much appreciated. Thanks,
    Jon

    • It’s easy to introduce a little mistake when editing the HTML. A little mistake in the syntax (for example, with greater or less than symbols) can cause mayhem. It’s also easy to accidentally delete something important or put the new text in slightly the wrong place when pasting in the new line of HTML.

      If you’re certain the HTML doesn’t have an issue, I recommend contacting KDP support to report the issue. Perhaps they can help out; at least it won’t hurt to ask. Good luck.

    • Use the format $a href=”mailto:emailaddress”$text to display$/a$ but don’t use dollar signs ($). The first $ should be a less than sign, the second $ is a greater than sign, the third $ is a less than, the fourth $ is a greater than. (Unfortunately, if I type the actual symbols here, WordPress will think I’m typing HTML and it will show you a hyperlink instead of the HTML that you want to see.) Be sure to include mailto followed by a colon. Where I wrote emailaddress, you would enter the actual address, like greekphysics@yahoo.com, in its place. Where it says text to display, you can type whatever you want: It could be the email address, or any other text. If done correctly, when someone clicks on the hyperlink, it will open the default mail program.

    • Sorry to be a pest. Everything has worked; I’ve done the Book Preview; at the end of the list on the Console it says: ‘Mobi file built successfully’, but does nothing further. Where is the mobi file stored? I’ve tried to run Kindle Previewer, but it doesn’t show up any new link.

      I’ve Just bought Word to Kindle Formatting Magic. Looking forward to reading it.

      • When I start a new project, the popup window asks where I wish to save my book. The default for me is in my documents, but your file should be saved in the folder specified there. Try starting a new project to see which folder is your default. It actually creates a new folder (in my case, I found this new folder in my documents on my computer).

        To create the MOBI file, click File > Save for Publishing. It will then let you specify a different folder if you don’t wish to save it in the default, but if you don’t choose a different destination, it will save in the default. After this step, I find my MOBI file exactly where I chose to save it.

        I hope you enjoy your book. Sec. 5.8 includes an example of how HTML should look for a hyperlink. I appreciate your support. Good luck with your book. 🙂

  9. Hi, Chris,
    Again, thanks for the very quick reply. Apologies for the much slower response. Mac frustrates me. In Windows all the open windows are on the Bar; on my MacBook Pro, not so much. When I started closing down some of the open windows I found the Save as Pop-Up as a Pop-Under (sound of grinding teeth). Then I found that my Kindle Previewer was not functioning and had to download the new version. (More teeth grinding). Then it took more than 15 minutes to open the mobi file (it’s a VERY large book). Then the link – all in blue and underlined – refused to open. I went back to your site to see what I may have done wrong. Everything seemed to be ok. When I came back Kindle Previewer it had frozen – partly. While I could change the view from Tablet to Phone, etc., it wouldn’t go to the page. I closed it down and re-opened it. Fortunately, it didn’t make me wait this time, but the link still doesn’t work. I started writing a reply to you, but I was out in a cafe and the battery of my Mac is coming to the end of its life, so I came home. Where I found that the page on you site had frozen, and that when I tried to copy the text, it just reverted to an empty Reply box. No more teeth to grind, so I cried. Having now had supper to calm my ragged nerves, I am back.
    I hope this has given you a good laugh.

    Does the un-opening link mean that it isn’t working? Here’s the html that I’ve entered CONTACT ME

    Another pause as I notice a “” around mailto, correct it (I hope it should have been…), wait 15 minutes for another Book Preview, plus 12 for Book Previewer to process it; get told that the file is corrupt; another 15 minutes to build another Book Preview; 12 minutes for BP to process it. The link still doesn’t work.

    So, at the end of this Epic story – have I done something wrong with the link; does this that it won’t work if I Save to Publish?

    Best wishes,
    Brian

    • I played around with it tonight, and it has changed somewhat since I last used it. The previewer isn’t perfect; it’s possible that it will work in the actual ebook, but it might also be the case that KDP no longer supports hyperlinks created through the HTML mode of the KKBC. The one way to know for sure is to buy a copy and test it out from the customer’s perspective after publishing.

      A regular reflowable ebook would definitely allow active hyperlinks, but it takes more time to publish this way. Text also wouldn’t pop up in reflowable format: For some books, it would work well to have reflowable text between pictures instead of text on pictures, but for other books reflowable format wouldn’t work well.

      I hope you get it to work.

      • Dear Chris,

        Thanks so much for your help. I uploaded the book to Kindle. It only took two hours for it to be published. The hyperlink doesn’t work, sadly, but, as I have the full email address on the page, should anyone want to get hold of me, that won’t be a problem.
        Interestingly, on my iPad I can zoom in to the pages, but on my Android phone, where it is more necessary, this is not possible. I’m trying to figure out how to put a warning on Amazon that reading it on a phone is not recommended. Probably in the book description.
        Infuriatingly, I found a typo (a missing opening parenthesis) on my first read-through… Isn’t it always the way? When I have recovered I will go through the process of correcting it in Kids Book Creator, and re-uploading.
        Now to start on the next, much bigger book. The current one is 189mbs…

      • Thank you for your update. I wish Amazon would let us decide which devices to make the book available for. The description is a good spot (though a few customers don’t read it). I have occasionally added a page with a picture and instructions for using my book with a particular device. (It’s tempting to put this in the front matter, but Amazon sometimes forces the start reading location beyond the front matter, so sometimes I put this page in the content where it first becomes meaningful)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s