Create your own 'currently reading' updater from Goodreads

Goodreads is soon to disable its API which is a huge bummer because it used to be so easy to grab the title and author from your Currently Reading list and plug it into your website. But I think I found a really easy way to get around it. And you don't need to be a coder!

Today I'm gonna show you how to pull the title and author to use wherever and however you want. Yes, you'll still have to deal with code, but if you don't know what it means, that's OK! I'll explain everything as simple as possible. This should take you 15 minutes tops.



First, some background info— Goodreads has premade widgets that are really handy for this but look terrible. Like, straight out of 2007. Luckily you can customize them to be pretty basic. You can find them here. Scroll down to the second widget; that's what we'll be using.

This is what you want to change:

•select shelf: currently-reading

•show: deselect cover, rating, review, tags

•select number of books: 1


Then open the 'Customize Style' dropdown and make the background transparent. Save changes and copy the code.



This all just makes things much easier to work with. Please don't change anything else, it won't matter and may mess up the final product.


It should end up looking very simple, like this.


We will only be using Javascript, so if you're using an IDE, you can put the whole snippet at the end of your <body> tag.


If you're using a website like Wix or Squarespace, you can embed a widget. There are tutorials online that make it super easy! Once you have found a place to paste the widget code, we can begin editing.


It should look something like this (it's very long you can just scroll past it):

      <!-- Show static HTML/CSS as a placeholder in case js is not enabled - javascript include will override this if things work -->
      <style type="text/css" media="screen">
  .gr_custom_container_1611338251 {
    /* customize your Goodreads widget container here*/
    border: 1px solid gray;
    border-radius:10px;
    padding: 10px 5px 10px 5px;
    background-color: transparent;
    color: #000000;
    width: 300px
  }
  .gr_custom_header_1611338251 {
    /* customize your Goodreads header here*/
    border-bottom: 1px solid gray;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    font-size: 120%
  }
  .gr_custom_each_container_1611338251 {
    /* customize each individual book container here */
    width: 100%;
    clear: both;
    margin-bottom: 10px;
    overflow: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid #aaa;
  }
  .gr_custom_book_container_1611338251 {
    /* customize your book covers here */
    overflow: hidden;
    height: 60px;
      float: left;
      margin-right: 4px;
      width: 39px;
  }
  .gr_custom_author_1611338251 {
    /* customize your author names here */
    font-size: 10px;
  }
  .gr_custom_tags_1611338251 {
    /* customize your tags here */
    font-size: 10px;
    color: gray;
  }
  .gr_custom_rating_1611338251 {
    /* customize your rating stars here */
    float: right;
  }
</style>
      <div id="gr_custom_widget_1611338251">
          <div class="gr_custom_container_1611338251">
    <h2 class="gr_custom_header_1611338251">
    <a style="text-decoration: none;" rel="nofollow" href="https://www.goodreads.com/review/list/80780015-dominique-demetz?shelf=currently-reading&amp;utm_medium=api&amp;utm_source=custom_widget">Dominique&#39;s bookshelf: currently-reading</a>
    </h2>
      <div class="gr_custom_each_container_1611338251">
          <div class="gr_custom_title_1611338251">
            <a rel="nofollow" href="https://www.goodreads.com/review/show/3588088603?utm_medium=api&amp;utm_source=custom_widget">In and Out of the Goldfish Bowl</a>
          </div>
          <div class="gr_custom_author_1611338251">
            by <a rel="nofollow" href="https://www.goodreads.com/author/show/448626.Rachel_Trezise">Rachel Trezise</a>
          </div>
      </div>
  <br style="clear: both"/>
  <center>
    <a rel="nofollow" href="https://www.goodreads.com/"><img alt="goodreads.com" style="border:0" src="https://www.goodreads.com/images/widget/widget_logo.gif" /></a>
  </center>
  <noscript>
    Share <a rel="nofollow" href="https://www.goodreads.com/">book reviews</a> and ratings with Dominique, and even join a <a rel="nofollow" href="https://www.goodreads.com/group">book club</a> on Goodreads.
  </noscript>
  </div>
      </div>
      <script src="https://www.goodreads.com/review/custom_widget/80780015.Dominique's%20bookshelf:%20currently-reading?cover_position=left&cover_size=small&num_books=1&order=a&shelf=currently-reading&show_author=1&show_cover=0&show_rating=0&show_review=0&show_tags=0&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=true&widget_border_width=1&widget_id=1611338251&widget_text_color=000000&widget_title_size=medium&widget_width=medium" type="text/javascript" charset="utf-8"></script>

We're gonna delete most of it. All you need is the very last bit between the <script> tags. Keep this and delete everything else. You should be left with this:

<script src="https://www.goodreads.com/review/custom_widget/80780015.Dominique's%20bookshelf:%20currently-reading?cover_position=left&cover_size=small&num_books=1&order=a&shelf=currently-reading&show_author=1&show_cover=0&show_rating=0&show_review=0&show_tags=0&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=true&widget_border_width=1&widget_id=1611338251&widget_text_color=000000&widget_title_size=medium&widget_width=medium" type="text/javascript" charset="utf-8"></script>

There should be nothing else except this.


Now, above this, paste in this code:

<style>

 html, body{
   margin: 0; 
   height: 100%; 
   overflow: hidden;
 }
 
 h1{
   text-decoration:none;
   color: black;
 }
  
 body, a{
   text-decoration:none;
   color: black;
 }
  
 .gr_custom_header_IDNUMBER, img{
    display: none !important;
 }

</style>

<h1>CURRENTLY READING:</h1>
<div id=""></div>

What does this mean? It's basically leaving the graphic design in 2007 so you can redo it yourself. Take note of the line that says:

 .gr_custom_header_IDNUMBER, img{

We'll replace that IDNUMBER in a second to make your personal widget ID number.


Next, lets go back to the <script> code. You should see a super long website URL ending in the word 'medium'. Copy it and paste it into another browser tab then hit enter.



You should see a blank screen with a bunch of code on it. If you do, you're in the right place!


This is called 'external Javascript' and Goodreads will automatically update it so you don't have to! (Woo!)


It also tries to be sneaky by updating any code you try to write to override theirs. So we're going to override the override next.




Throughout this code, there's the same ID number that pops out throughout the code.

Copy this number and replace the 'IDNUMBER' from the <style> code and save your file.


You should get this! (But pretty unstyled). If you're a developer, you can figure out the CSS from earlier, but if you're not, stay tuned!

I'll post more info about styling soon! If you have any questions, leave a comment and I'll get back to you within a day or so!


Dominique <3


FAQ


Why isn't my book updating?

This is something I had a hard time figuring out. I finished a book and immediately checked to see if it updated (It did not). But Goodreads only updates it once a day per your website viewer, so wait a little bit and come back! Your website viewers will see your current update though, even if you don't!


What if I want different info to appear, such as the book cover?

The CSS and settings need to be changed a little bit to be formatted for more book info. I'll update this with a future post about how to do so!


18 views0 comments