Canvas Chess - PGN Viewer

Easy
- Least technical
- Works with Blogger, WordPress
Custom
- Most flexible
- Host the files on your server

Easy Setup

STEP 1: Create the Viewer

Copy/Paste the following code into your webpage:

<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:

pgn_uri: 'https://s3.amazonaws.com/canvas-chess/pgn/lasker_capablanca_1921.pgn',

With this line:

pgn_text: '',

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="canvaschess/css/pgn.min.css">
</head>
<body>
    <script src="canvaschess/canvaschess-0.1.0.min.js"></script>
    <script src="canvaschess/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',
        });
    </script>
</body>
</html>