Preventing code from being stripped when pasted into a widget?

  • Unknown's avatar
    craigkirkby · Member ·

    I wonder if someone can help. I’m trying to add code from Goodreads to my text widget. However, when I press save, it strips the code and leaves just plain text.

    Here is the code I’d like to insert: 

    <style>
  #goodreads-widget {
    font-family: georgia, serif;
    padding: 18px 0;
    width:565px;
  }
  #goodreads-widget h1 {
    font-weight:normal;
    font-size: 16px;
    border-bottom: 1px solid #BBB596;
    margin-bottom: 0;
  }
  #goodreads-widget a {
    text-decoration: none;
    color:#660;
  }
  iframe{
    background-color: #fff;
  }
  #goodreads-widget a:hover { text-decoration: underline; }
  #goodreads-widget a:active {
    color:#660;
  }
  #gr_footer {
    width: 100%;
    border-top: 1px solid #BBB596;
    text-align: right;
  }
  #goodreads-widget .gr_branding{
    color: #382110;
    font-size: 11px;
    text-decoration: none;
    font-family: verdana, arial, helvetica, sans-serif;
  }
</style>
<div id="goodreads-widget">
  <div id="gr_header"><h1><a href="https://www.goodreads.com/book/show/22024480-eden-dawn">Goodreads reviews for Eden, Dawn</a></h1></div>
  <iframe id="the_iframe" src="https://www.goodreads.com/api/reviews_widget_iframe?did=DEVELOPER_ID&format=html&header_text=Goodreads+reviews+for+Eden%2C+Dawn&isbn=1499290691&links=660&review_back=fff&stars=000&text=000" width="565" height="400" frameborder="0"></iframe>
  <div id="gr_footer">
    <a href="https://www.goodreads.com/book/show/22024480-eden-dawn?utm_medium=api&utm_source=reviews_widget" class="gr_branding" target="_blank">Reviews from Goodreads.com</a>
  </div>
</div>

    Here is what is left behind after I save it: 

    #goodreads-widget {
    font-family: georgia, serif;
    padding: 18px 0;
    width:565px;
  }
  #goodreads-widget h1 {
    font-weight:normal;
    font-size: 16px;
    border-bottom: 1px solid #BBB596;
    margin-bottom: 0;
  }
  #goodreads-widget a {
    text-decoration: none;
    color:#660;
  }
  iframe{
    background-color: #fff;
  }
  #goodreads-widget a:hover { text-decoration: underline; }
  #goodreads-widget a:active {
    color:#660;
  }
  #gr_footer {
    width: 100%;
    border-top: 1px solid #BBB596;
    text-align: right;
  }
  #goodreads-widget .gr_branding{
    color: #382110;
    font-size: 11px;
    text-decoration: none;
    font-family: verdana, arial, helvetica, sans-serif;
  }

<div id="goodreads-widget">
  <div id="gr_header"><h1><a href="https://www.goodreads.com/book/show/22024480-eden-dawn">Goodreads reviews for Eden, Dawn</a></h1></div>

  <div id="gr_footer">
    <a href="https://www.goodreads.com/book/show/22024480-eden-dawn?utm_medium=api&utm_source=reviews_widget" class="gr_branding" target="_blank">Reviews from Goodreads.com</a>
  </div>
</div>

    Do I have to add something else? The same problem happens if I add the code to a normal blog post. I’d prefer to paste into a sidebar widget though.

    My site is http://www.archerswiftbooks.com and I’m using Theme Twenty Eleven.

    Much appreciated!

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

  • Unknown's avatar
    mindybowman · Member ·

    Hi,

    What you’re trying to add is some CSS code (at the top of your image) and text widgets only support HTML (which you do have at the bottom):
    http://en.support.wordpress.com/widgets/text-widget/

    Here is info on WordPress code restrictions…what they do and do not allow:
    http://en.support.wordpress.com/code/

    You will have to change all of your code to the proper HTML format to get the widget to work properly.

    Hope that helps. :)

  • Unknown's avatar
    craigkirkby · Member ·

    Thank you for your help!

  • Unknown's avatar
    mindybowman · Member ·

    You are most welcome! :)

  • Unknown's avatar
    justjennifer · Member ·

    As mindybowman said, there are code restrictions on WordPress.com that will not allow certain types of code like iframes.

    If you want to add a Goodreads widget to your site, you’ll need to use the one offered by WordPress.com. You can find more information here: http://en.support.wordpress.com/widgets/goodreads-widget/

  • Unknown's avatar
    craigkirkby · Member ·

    Thanks, Jennifer. So, if I understand it correctly, there’s no way, as an author, to add your Goodreads reviews. Pity.

  • Unknown's avatar
    justjennifer · Member ·

    The widget I mentioned refers to your Goodreads bookshelves. Sorry for the misunderstanding.

    If all you want to do is add a link to your books reviews on Goodreads, just use a text widget with the link by itself. As Mindy said, the CSS/iframe is going to get stripped out by WordPress.com.

    If you want to get fancy, use a photo of the book’s cover in an image widget with a link to the reviews page. http://en.support.wordpress.com/widgets/image-widget/

  • Unknown's avatar
    craigkirkby · Member ·

    Thanks again, Jennifer.

    I have already done what you have suggested with the image widget. I was hoping to include the Goodreads fancy widget on my site, but I now understand that the CSS/iframe is stripped away.

    Thanks again!

  • The topic ‘Preventing code from being stripped when pasted into a widget?’ is closed to new replies.