Monthly Archives: February 2016

How to make Goodreads giveaway widget work on WordPress.com

Have you tried and failed to include Goodreads Giveaway widget on your WordPress.com site? Have you tried reading forums, only to find that the reason for it is that Goodreads uses Java or whatever else WordPress.com doesn’t allow? Oh, good, so I’m not the only one…

I was so frustrated with this previously, that I created a work-around using an image widget. I was happy with that for a while, but the image suggested that only few people have requested my book, when in actuality it was 1,699 over 2 weeks! I have just started a new giveaway, and already over 350 people have requested a copy, in less than 15 hours!

So I found a different work-around. Cause I just don’t take “no” for an answer and cause I feel omni-potent, having learned the very basics of HTML. Also, probably, cause I’m Russian-born, and we’ve been known to fix space stations with hammers. In movies, mind you, but that’s probably not that far from the truth.

WARNING: my method is equivalent to smashing the widget with a hammer. If you are a programmer, avert your eyes…

To start with, you need to get the code, which is available on your giveaway page:

Giveaway code

Then you need to create a new text widget in WordPress.com, copy and paste the Goodreads html code into its content window. Unfortunately, this is what it will look like on your website:

Giveaway widget before deletions

Ugh, right? Enough to make you want to give up…unless you are willing to keep smashing the widget playing with code until you figure out what needs to be deleted. Feel free to play yourself, or follow these simple steps:

STEP 1: delete all of this code from the beginning of the code script, up to and including this bit:
.goodreadsGiveawayWidgetEnterLink:hover {
color: #181818;
background-color: #F7F2ED;
border: 1px solid #AFAFAF;
text-decoration: none;
}

Have a look at the picture above – it is basically the naked HTML that was visible above the “Goodreads Giveaway” title.

STEP 2: delete the very end of the script:

<a class=”goodreadsGiveawayWidgetEnterLink” href=”https://www.goodreads.com/giveaway/enter_choose_address/168663″>Enter Giveaway</a>
</div>
</div><a href=”https://www.goodreads.com/giveaway/widget/168663″>https://www.goodreads.com/giveaway/widget/168663</a&gt;

That’s the link to the actual entry form. Unless you want to keep it, but I prefer the cleaner look, which goes to the giveaway page.

STEP 3: play with the code! For example:

A. I found the “text-align: center” and changed it to “text-align: left” to match my other widgets.

B. Clicking on the picture took you to the book page (with giveaway button underneath). I wanted it to point directly to the giveaway page – so I found the page I wanted, copied the url, then found the following bit of code in the second paragraph and carefully replaced the http address with the preferred one:

highlighted code

That’s it! Once you are happy with the way it looks, move the widget to the desired position, and voila! It looks great in my sidebar now.

Have fun!

13 Comments

Filed under Self-publishing and marketing