<link rel="stylesheet" href="https://s3.amazonaws.com/canvas-chess/source/pgn.min.css"><script src="https://s3.amazonaws.com/canvas-chess/source/canvaschess-0.1.0.min.js"></script><script src="https://s3.amazonaws.com/canvas-chess/source/pgnviewer-0.1.0.min.js"></script><script> var viewer = new CHESS.PgnViewer({ pgn_uri: 'https://s3.amazonaws.com/canvas-chess/pgn/lasker_capablanca_1921.pgn', piece_set: 'https://s3.amazonaws.com/canvas-chess/pieces/merida' });</script>
Blogger
Blogger lets you add scripts directly to your posts:
Click on Edit for your post.
In the upper left, switch the edit mode from "Compose" to "HTML".
On the right, under Post settings -> Options -> Compose mode, select: "Interpret typed HTML"
Wordpress
If you are using the hosted version of Wordpress.com (your blog URL ends with .wordpress.com), you are not able
to add Canvas Chess at this time, as it does not support scripts.
If you are hosting your own Wordpress blog, you can to add scripts to posts:
Click on Edit for your post.
Above the edit box, on the right side, switch the from "Visual" to "Text".
STEP 2: Add the PGN
You should be able to view your page and see the Lasker vs Capablanca game.
To change the PGN, replace this entire line:
You now need to encode your PGN text before you can paste it between the single quotes ('').
Paste the contents of your PGN file into the box below, then click Encode PGN.
After pasting the encoded PGN between the single quotes, you should be able to view your PGN on your webpage.
Custom Setup
STEP 1: Download the Project
If you prefer to host the project on your own server, you will need to:
Download the latest version of Canvas Chess + PGN Viewer from the downloads page.
Unzip the folder and upload the files to your web hosting server.
The exact location will depend on your server setup, but you should place the files within your website's root folder in appropriately named directories, such as:
/webroot/mysite/canvaschess/pgn.css
/webroot/mysite/canvaschess/canvaschess.js
STEP 2: Create the Viewer
Include the PGN stylesheet in the head of your HTML (line 5).
Paste the JavaScript code in your HTML body (lines 8-14).
Remember to update the paths for the JS/CSS and the file name for the PGN.
If you run into any problems, take a look at the Easy Setup. It provides an alternative to hosting
the project and PGN files (linking to the Canvas Chess hosted files, and using a text string instead
of a PGN file).
Note: Canvas Chess does not offer any services for creating or hosting PGN files.