Goodreads grid widget broken
Published April 27, 2012 | Categories: Web Development
Have you been trying to use Goodreads Grid Widget and not able to get it to work? Are you copy/pasting the code and not getting anything but the no script version of the grid with a } at the end of it? If so I was having the same problem and I wasn’t able to find much information online to help me.
The problem I was having was I couldn’t get the code itself to produce an actual JavaScript widget. All I'd get is a static list like this:
I did a little investigating of the copy/paste code to see that there is no actual JavaScript call within the code. That got my attention to the browser. Was my browser doing something to the code box that was messing up the widget code before I got to copy it? So I tried it in other browsers but still no luck.
After this I decided to just find another implementation out there somewhere and try to re-create it with my information. It worked perfectly and quickly (estimated 10-20 min). So along with notifying Goodreads of this issue I wanted to share with others the working solution. I'm not going to say this is the simplest thing in the world but it works. My hopes are that nobody will have to use this blog because Goodreads would have already resolved the issue and we can stick with using the copy/paste feature directly from Goodreads. You can also use the other widgets available to you that all seem to work ok. This is for anyone who REALLY wants the grid list and is willing to do the work behind getting it.
To create your Goodreads grid widget just follow the instructions below:
- To get to the widget area log in to Goodreads and go to the edit profile area. The link for this area is located in the drop down menu in the upper right of the site when logged in. Once there click the widgets tab.
- Scroll down to the Grid Widget and make the settings how you want them. Note* if you have trouble with the preview display on the left just change the max number of items and it should update the preview. This was a different bug I found when trying to Google my own issue.
- Once you are satisfied with the display copy the code into notepad but don’t close the browser window just yet. Scroll to the bottom in notepad and you will see an random } on its own line. You can delete this.
- Then at the bottom of notepad paste in the following JS call
<script src="http://www.goodreads.com/review/grid_widget/5466785-tiffany-may?cover_size=medium&hide_link=true&hide_title=true&num_books=200&order=d&shelf=website&sort=year_pub&widget_id=1335496475" type="text/javascript"></script>
- Replace the different parameters with the ones you had selected in the widget configuration area. Click image below for larger view.
Then just paste your final code into your webpage and you have a Goodreads grid widget!
Recent Posts
