A New (Free) Way to Sell Books from your Sidebar

by Joel Friedlander on November 30, 2012 · 27 comments

Post image for A New (Free) Way to Sell Books from your Sidebar

by Claire Ryan (@rayntweets)

I came across Claire Ryan’s The Raynfall Agency site because I’m always looking for new publishing models that can help authors trying to get their books onto the market. But that’s not what this post is about. Claire also has available on her site a WordPress plugin that she’s created to help you sell your books. (To see a live sample, check the right sidebar on this blog where it says “Click the Covers.”) And it’s free—isn’t that nice? I asked her to explain what it does and how you can do it. Here is her response.



Authors have a problem right now. Amazon, Kobo, Barnes & Noble, and many other websites are available through which they can sell their work, and that’s great. But how do you let readers know about them?

Up to this point, adding a listing to your site about your books has been a colossal pain in the ass, because you really have to know some HTML and maybe CSS in order to get them to display properly. You could also use advertising widgets, like the one provided by Amazon, and hope that your readers don’t use adblockers in their browser.

I set out to make a plugin for WordPress that would make it easy for any author to add their books to a WordPress site, whether self-hosted or on a free WordPress.com blog, and the result is Buy This Book (BTB)—a plugin that displays books in the sidebar with a little slideout menu of website links.

BTB is very straightforward to use. It’s also free (it will always be free) and available through the WordPress Plugin Directory. So here’s how you use it.

Let’s start with your cover image. The height and width of the image is very important, as the plugin won’t resize it to match your sidebar. So, get a copy of your cover that’s small enough to fit into your sidebar.

If you’re going to have two covers side by side, make sure they’re small enough to fit comfortably together. The plugin will automatically add a little space between them, so you’ll need to leave some wiggle room. If you see your covers are not displayed side by side, then they’re probably too big.

  1. Go to Media -> Add New, and upload your cover. WordPress will do its thing, and then show you the details screen for the image that’s now ready to use on the site.
  2. Look at the list of attributes for the image – you’re looking for the one called File URL. Copy this and paste it somewhere convenient. You’ll need this later.

For Self-Hosted WordPress Sites

  1. Go to Plugins -> Add New, and search for ‘buy this book’.
  2. Click Install Now, just below the plugin name, and then hit Okay.
  3. The plugin will install itself, and you just need to click Activate on the install screen for it to become available on your site.
  4. The widget is now ready to go. All you need is the links and images to go into it.

Now for the fun stuff.

  1. Go to the Appearance -> Widgets screen. You should see a new widget called Buy This Book. Click and drag it over to your chosen sidebar, and it’ll open up automatically.
  2. Fill in the header. This is the widget title, and it’ll display above your books.
  3. Paste the cover File URL link into the image box.
  4. Go to each site where your book is up for sale, and copy the link from your browser bar into each entry. The widget can take up to three books, but it ignores any empty boxes, so don’t worry if you only want to add one book with two or three links.
  5. Save the widget. You’re done! Check your site and click on the cover images to see the menu slide out from the bottom.

If you have more than three books, or you want to arrange them on different rows, then just drag another copy of the widget over to the sidebar. You can have as many as you like, and they all can have different entries.

For Free WordPress.com Blogs

Guys, I’m sorry to say it, but free WordPress blogs are out of luck on this. You can’t install plugins, and you can’t have the fun Javascript stuff that makes the menu slide out.

Fear not, however! You can get something close to it with a little more work. Here’s the code:

<div style=”float:left;”>

<img style=”float: left; margin-right: 5px;” src=”http://author.wordpress.com/wp-content/uploads/2012/10/awesomebookcover.jpg” />

<div style=”width: 105px;”>

<a href=”http://www.amazon.com/awesomebooklink.html” title=”Amazon” target=”_blank”>

<img src=”http://author.wordpress.com/wp-content/uploads/2012/10/Amazon.png” alt=”Amazon” width=”32″ height=”32″ />

</a>

<a href=”http://www.kobobooks.com/awesomebooklink.html” title=”Kobo” target=”_blank”>

<img src=”http://author.wordpress.com/wp-content/uploads/2012/10/Kobo.png” alt=”Kobo” width=”32″ height=”32″ />

</a>

<a href=”https://www.smashwords.com/awesomebooklink.html” title=”Smashwords” target=”_blank”>

<img src=”http://author.wordpress.com/wp-content/uploads/2012/10/Smashwords.png” alt=”Smashwords” width=”32″ height=”32″ />

</a>

</div>

</div>

Okay, this does look intimidating, but it’s really not that bad.

Look at the links in bold—those are the ones you want to replace. You need to upload an icon image for each of the services you want to use. (These are included in the plugin for self-hosted sites.)

It’s the same process as for your cover, and you can probably find ones you like on Google Image Search. Size doesn’t matter, as long as the icons are square.

Now, check out each section of the code. The first part is the cover itself. Replace the bold text with your cover link, making sure to leave the quotation marks in, they’re important.

The next three sections are for the icons and links. This is a little more tricky. Each section has two links—one for the actual link to your book, and one for the icon image. I have Amazon, Kobo and Smashwords here, but you can choose whichever sites you want – just make sure to delete any you’re not using.

Okay, got all those links added?

  1. Copy the whole block of code.
  2. Go to your Appearance -> Widgets screen, and drag a Text widget to your sidebar.
  3. Fill in the header.
  4. Paste the whole code block into the Text panel.
  5. Save the widget. You’re done! Check your site to see the cover image with the icons below it.

You can copy this code for any number of books—just change the links and add it to a new Text widget. This is the best you can get with a free blog, and it’ll work for other blogs as well in theory.

I want to add shortcode functionality, and options to change the image size and icon set, to the next version of the plugin. In the meantime, any other suggestions are welcome, and I hope it’s useful to authors everywhere.

Anyone who needs technical support can leave a comment here or contact me through my site.

Claire RyanClaire Ryan is an Irish author and web consultant, now living in Vancouver BC. After hearing the stories of authors scammed by print on demand companies with nothing to show for it, she started the Raynfall Agency in 2012 in the hope of developing a better way do publishing. Her first work, The Author’s Marketing Handbook, is part of her overall plan to get the basic knowledge of online marketing into the hands of as many authors as possible. You can contact her at www.raynfall.com.

Be Sociable, Share!

    { 20 comments… read them below or add one }

    Michael N. Marcus November 30, 2012 at 4:07 am

    Although “adding a listing to your site about your books has been a colossal pain in the ass, because you really have to know some HTML and maybe CSS” may be the case with WordPress, it’s super-simple with Blogger. It takes just seconds and no special knowledge or plug-ins are required.

    While in the layout mode, select “Add a gadget” and then “Image.” A window will open where you enter the location of the book cover photo on your PC or on the web, a title if you want, a caption, and a URL for purchasing or more information.

    For Blogger, WordPress or any website, If you want an animated “slideshow” with multiple book covers or other items, you can get a widget from Amazon that will link to the book pages on Amazon. Various styles are available. See https://widgets.amazon.com/Amazon-Slideshow-Widget.

    With Blogger, copy and paste the Amazon HTML into an HTML gadget box. It should be similar with WordPress — or any page that accepts HTML.

    If you want a slideshow that’s not tied to Amazon, you can get a freebie from http://www.widgetbox.com/widgets. Various styles are available. As with the Amazon widget, just copy and paste the HTML.

    I use both static and slideshow widgets on my blog to display covers of available and future books.

    Michael N. Marcus

    NEW: self-publishing company parody, http://www.99BuckBooks.com
    http://www.BookMakingBlog.com
    http://www.SilverSandsBooks.com
    http://www.BookFur.com
    http://www.Facebook.com/SilverSandsBooks

    Reply

    Claire Ryan November 30, 2012 at 4:56 pm

    Hi Michael

    Your way will work, of course, but I designed this widget so that it could tie multiple website links (Amazon, Kobo, etc) to one cover image, which your Blogger method doesn’t do. And it’s also designed not to be filtered out by adblockers, which will happen to the Amazon widget you linked there.

    So… not ideal. Hence why I made this. I thought the process of adding books to a website sidebar, with multiple selling options, shouldn’t be so darn painful.

    Reply

    Michael N. Marcus December 1, 2012 at 3:14 am

    Hmm… OK, maybe I’ll try your way.

    Reply

    Taylor Fulks November 30, 2012 at 6:22 am

    Great post Claire…thank you. I am a newbie to the indie pub scene and websites for that matter. I wish to advertise other books as well as my own on my site…will this plugin allow me to do this? Thank you so much for sharing this info…will give it a whirl!
    ~Taylor~

    Reply

    Claire Ryan November 30, 2012 at 5:01 pm

    Sure, of course. I assume it’s for affiliate revenue? All you need to do is get the direct link for a book from Amazon’s affiliate dashboard, say, and add that along with the cover image. Direct links usually have an affiliate ID in them somewhere. Adblockers don’t care about them and treat them as any other link, and the plugin certainly doesn’t care as long as the link works.

    Anyway you can email me through my site if you’re having issues with it.

    Reply

    David Bergsland November 30, 2012 at 9:43 am

    It really seems to work well. I’ve got a couple copies on my Christian writing site so far and it works great. I’ll get it on my publishing site ASAIC.

    Reply

    Theresa Munroe November 30, 2012 at 11:38 am

    Sometimes I wish I never would have left Blogger…

    While, at least I have a link to 3 different sites in my sidebar now, I am unable to copy icons or when I do, they are the size I copied from google images and the sweet 32 x32 buttons…I wonder if it’s my theme…

    But thank you! I will continue to play around with it-I’m closer that ever!

    Reply

    Claire Ryan November 30, 2012 at 4:58 pm

    If you try the version for free WordPress blogs, it should work for Blogger too – in theory.

    Does Google allow developers to make Blogger widgets? I’d happily provide a Blogger version if there was enough interest.

    Reply

    Michael N. Marcus December 1, 2012 at 3:21 am

    I’d try it, and recommend it if it works. I don’t want my ads to be blocked by ad blockers (but I don’t know how common they are).

    The “Add a gadget” window on Blogger shows gadgets/widgets from indie developers, so go to it.

    Reply

    Claire Ryan December 1, 2012 at 9:40 pm

    Adblockers are some of the most popular plugins for Chrome and Firefox. Enough people use them, especially geeks, that I think it’s worth accounting for it.

    See, the problem with adblockers is that it’s damn near impossible to tell how much of your traffic uses them, and you won’t even know if you’re being affected unless someone technically inclined says something, or if you’re a tech yourself.

    It’s a very annoying problem…

    Anyway – I’ll check out the dev stuff for Blogger and see if I can port it over.

    Reply

    Deborah Jay November 30, 2012 at 11:43 am

    Thank you for finding this and sharing – what a great little tool :)

    Reply

    Ryan Casey November 30, 2012 at 12:51 pm

    Great post, Claire, and thanks for sharing, Joel. It’s always great to find plugins that help us bloggers/authors, and this one looks great. I’ll be giving it a test run this evening!

    Ryan

    Reply

    Otis G. Sanders November 30, 2012 at 5:02 pm

    I loaded the plugin and was able to get it working without much effort. It looks and works great!!! Thanks Sharing!

    Otis G.

    Reply

    Tahlia Newland November 30, 2012 at 5:57 pm

    There’s an easier way for free wordpress sites. You can either just use an image widget and put a link on it to wherever you want to direct the buyer . You can label the image buy now or you can have buy now at whatever store come up when people hover their mouse over it.
    or
    if you want the link to go to Amazon, you could join the Amazon Associates program and stick the code for the cover into a text widget. (It won’t display the one with both text and cover, but just the cover is enough)
    Most people will slide their curser over the image to see if there’s a link and if there is, they’ll click if they’re interested to find out more.

    Reply

    Claire Ryan November 30, 2012 at 8:27 pm

    Hi Tahlia

    Once again, I have to point out that the Amazon Associates stuff frequently gets blocked from webpages by adblockers, and it’s limited to Amazon only. The point of this plugin was to have a widget that wouldn’t be cut by adblockers and that could assign multiple selling options to one cover.

    The more options people have the better, of course.

    C

    Reply

    Jordan McCollum December 6, 2012 at 10:34 am

    I was thinking the same thing as several of the previous commenters—until I tried the widget where it appears in Joel’s sidebar. Now that’s cool.

    Only other question: if you only put one book in, does it make the cover larger or do you need to play with the code (or img size)?

    Reply

    David Bergsland December 6, 2012 at 11:16 am

    You need to adjust the image size to fit your sidebar. I had one size for one of my blogs and I had to change that size to fit two side by side on the other blog.

    Reply

    @SylviaHubbard1 December 28, 2012 at 3:28 pm

    You know I’m in love right?! OMG!!!!!! THANK YOU SOOO MUCH!

    Reply

    buyreviews.co February 24, 2013 at 2:35 pm

    Hello there! This article could not be written any better! Looking
    at this post reminds me of my previous roommate! He constantly kept talking about this.
    I will forward this information to him. Fairly certain he’s going to have a very good read. Many thanks for sharing!

    Reply

    Jaime Buckley April 5, 2013 at 8:46 pm

    I LOVE this plugin!!

    Claire, you are incredible–thank you so much for sharing =)

    Reply

    Leave a Comment


    8 + = sixteen

    { 7 trackbacks }