A simple HTML + JS widget that enables you to embed your Goodreads bookshelf into your website/blog. Using Javascript's Fetch & DOM API. No external dependencies, not even jquery.
- NodeJS 12++
- NPM 5.3++ with
npxalready included.
- Register for Goodreads API KEY.
- Note your Goodreads user id. Open Goodreads, click your profile picture on the upper-right, click profile. Look at the address bar. It looks like this:
That
https://www.goodreads.com/user/show/12345678-jon-snow12345678number in front of your name is your user id. - Clone this repo and enter inside the repo's directory.
git clone cd goodreads-widget - Create a bash script file, for example
env.sh.vim env.sh
- Fill the
env.shwith the following lines:Replace theexport GOODREADS_API_KEY={{YOUR_GOODREADS_API_KEY}} export GOODREADS_USER_ID={{YOUR_GOODREADS_USER_ID}}
{{YOUR_GOODREADS_API_KEY}}with your own Goodreads API key, and{{YOUR_)GOODREADS_USER_ID}}with your Goodreads user id. - Make
env.shexecutable and execute it.chmod +x env.sh source env.sh - Init NPM.
npm install
- Compile the script.
npx webpack
- The script will be available in
dist/main.js. You can move this script to your project.
- To include it into your HTML page, you must have an element with ID
bookshelf-widget. Then include the script you already compiled with script tag. For example:<!doctype html> <html> <head> <title>Getting Started</title> </head> <body> <section id="bookshelf-widget"> <script src="main.js"></script> </section> </body> </html>
- Open your HTML page in the browser.
- Open
src/index.js - To change the shelf you want to show, change the
shelfvariable into your prefered shelf name. For example "currently-reading".const shelf = "currently-reading"
- To change how many books you w ant to load per batch, change the
perPagevariable. The valid value is integer in the range of1-200. For example:var perPage = 20;
- All the stylings required are inside
src/styles/app.css.
MIT