Chess Viewer

Posted on  by

Choose your preferred setup method:

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

STEP 1: Create the Viewer

Copy/Paste the following code into your webpage:

Blogger

This is a simple yet powerful web-based tool that allows you to import a chess or chess960 game in PGN format and view the game through an easy-to-use interface. After importing and viewing the game, you have the option of saving the game and viewer interface in a format that can be embedded into any web-enabled document like a chess blog or website so that your visitors can also view the game. Chess Viewer Deluxe is the main chess viewer on the fashionable ChessGames.com website. It is a free and 'full featured Java applet, designed to present chess games on the Web'. To display chess games on your website, you first need the games you want to display in PGN (portable game notation) format.

Blogger lets you add scripts directly to your posts:

  1. Click on Edit for your post.
  2. In the upper left, switch the edit mode from 'Compose' to 'HTML'.
  3. On the right, under Post settings -> Options -> Compose mode, select: 'Interpret typed HTML'

Wordpress

Chess Viewer

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:

  1. Click on Edit for your post.
  2. 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:

With this 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

Chess Viewer Pgn

STEP 1: Download the Project

If you prefer to host the project on your own server, you will need to:

  1. Download the latest version of Canvas Chess + PGN Viewer from the downloads page.
  2. 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:

Chess Viewer Mac

  • /webroot/mysite/canvaschess/pgn.css
  • /webroot/mysite/canvaschess/canvaschess.js

Chess Viewer App


STEP 2: Create the Viewer

Free Chess Viewer

  1. Include the PGN stylesheet in the head of your HTML (line 5).
  2. Paste the JavaScript code in your HTML body (lines 8-14).
  3. 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).

Chess Viewership Twitch

Note: Canvas Chess does not offer any services for creating or hosting PGN files.