goodreads giveaway widget displays html on blog

• 

  ruth2day · Member · Aug 28, 2015 at 5:14 am

  • Copy link
  • Add topic to favorites

  Hello,
  I wanted to add a goodreads giveaway in my sidebar. I chose the text widget, pasted the html provided by goodreads and find the HTML displays on my blog as well as the actual giveaway. I’m not HTML literate and would appreciate some help. thank you

  here is the html
  <div id=”goodreadsGiveawayWidget153066″><!– Show static html as a placeholder in case js is not enabled –>

  <style>
  .goodreadsGiveawayWidget { color: #555; font-family: georgia, serif; font-weight: normal; text-align: left; font-size: 14px;
  font-style: normal; background: white; }
  .goodreadsGiveawayWidget p { margin: 0 0 .5em !important; padding: 0; }
  .goodreadsGiveawayWidgetEnterLink {
  display: inline-block;
  color: #181818;
  background-color: #F6F6EE;
  border: 1px solid #9D8A78;
  border-radius: 3px;
  font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  outline: none;
  font-size: 13px;
  padding: 8px 12px;
  }
  .goodreadsGiveawayWidgetEnterLink:hover {
  color: #181818;
  background-color: #F7F2ED;
  border: 1px solid #AFAFAF;
  text-decoration: none;
  }
  </style>

  Goodreads Book Giveaway
  </h2>

  <div style=”float: left;”>
  <img alt=”A Good Wife by Ruth Bradbury-Horton” src=”https://d.gr-assets.com/books/1440737610l/26179232.jpg” title=”A Good Wife by Ruth Bradbury-Horton” width=”100″ />
  </div>

  <div style=”margin: 0 0 0 110px !important; padding: 0 0 0 0 !important;”>
  <h3 style=”margin: 0; padding: 0; font-size: 16px; line-height: 20px; font-weight: normal; font-style: normal;”>
  A Good Wife
  </h3>
  <h4 style=”margin: 0 0 10px; padding: 0; font-style: normal; font-weight: normal;”>
  by Ruth Bradbury-Horton
  </h4>

  <div class=”giveaway_details”>
  <p>
  Giveaway ends September 21, 2015.
  </p>
  <p>
  See the giveaway details
  at Goodreads.
  </p>
  </div>
  </div>
  <div style=”clear: both;”></div>

  Enter Giveaway

  </div>
  </div><script src=”https://www.goodreads.com/giveaway/widget/153066″ type=”text/javascript” charset=”utf-8″></script>

  The blog I need help with is: (visible only to logged in users)

• 

  carladoria · Member · Aug 28, 2015 at 2:43 pm

  • Copy link

  Hi,
  You cannot insert code that includes Javascript and the last line of your code includes it. WordPress is a shared environment and therefore adding javascript is restricted for security reasons. To find more information about these restrictions, you can go to the following link: https://en.support.wordpress.com/code/
  However, you can insert a Goodreads widget that connects directly to your account. For this, you can go to your WP Admin -> Appearance -> Widgets. Maybe you can use this widget to connect your blog readers with your Goodreads account and then with your giveaway.
  I hope this helps.

• 

  justjennifer · Member · Aug 28, 2015 at 3:26 pm

  • Copy link

  @ruth2day – I see the widget in your sidebar.

  Is it the last bit of HTML that resides under the text widget box you’re referring to? If so, you need to delete this at the very bottom of the widget.

  <a href="https://www.goodreads.com/giveaway/widget/153066">https://www.goodreads.com/giveaway/widget/153066</a>

  Regardless, don’t disturb the DIV tags.

  Let us know if that works for you.

  @carladoria – it’s true that WPcom will strip out both javascript and most inline CSS, but there’s a comment at the beginning of the code here:
  <!-- Show static html as a placeholder in case js is not enabled -->

  Given my limited experience, that’s the only reason I can think of that the widget is showing up in the first place.

• 

  ruth2day · Member · Aug 28, 2015 at 6:26 pm

  • Copy link

  Hello Justjennifer and carladoria, thank you for getting back to me. I think I’ve sorted it the best I can at the moment. A colleague suggested removing everything from and to the Style tags. I did that and it is passable for now.