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!

12 Comments

Filed under Self-publishing and marketing

12 responses to “How to make Goodreads giveaway widget work on WordPress.com

  1. Thanks for the info!!

    Liked by 1 person

  2. Brilliant. I’m going to bookmark this post. Then I can refer to it when I have my Goodeads Giveway. Thank you, Ana. Like you, I won’t give up with anything, but you’ve just given me one less thing to grapple with!
    By the way, I was going to ask you about your autograph in the last copy you gave away. Did you just sign your name, or write a little message as well? And which page did you autograph — presumably the half-title page is best?

    Liked by 1 person

  3. Reblogged this on Chris The Story Reading Ape's Blog and commented:
    In case you need to know 👍😃

    Like

  4. Another chunk of great advice Ana. I’m always a bit wary of fiddling with HTML too much, so this’ll come in handy. Cheers.

    Liked by 1 person

  5. Looks like you’ve stripped out the CSS element of the code. But anyway, I don’t understand the way WordPress picks and chooses what it allows. It prevents iframes for Amazon widgets, but allows iframes for embedded Youtube videos. The cynic in me suggests WordPress is protecting us from competition, not security flaws!

    Good advice though.

    Liked by 2 people

  6. That’s so funny Ana, I tried a similar thing last week, thinking I could remove some of the coding, but I didn’t try hard enough! I asked WordPress Help why we can post the ‘Goodreads’ book widget (to show the books we’re reading) but not this widget – I didn’t get an answer! Good on you for battling it out 🙂

    Liked by 1 person

  7. You rock! Thank you so much for publishing this 🙂

    Liked by 1 person

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s