A new version of the Chess Game Viewer JavaScript file has been published. It turned out that the letters below the board in the FEN Viewer were shifted to the right in Opera.
This problem has been solved in this latest version.

So the White to move and win diagram below should look OK in all browsers.

Another new version of the Chess Game Viewer has been published with improved code generation for the knight moves.
If you have included the JavaScipt in your own template then you are advised to replace it with this new version. If you use the external JavaScript, you'll use the new version automatically.

The new version solves some bugs and also has some performance improvements.
However I'll still advice to generate the coded moves by PalView, but I know that some of the users are not able to use PalView or consider this as too cumbersome.

Recently this site was mentioned at Chess Improvement, which made that I had a look at this site and found two examples of the use of a the Dynamic HTML Chess PGN Viewer on a WordPress site. The most interesting example was this game. This looks like a very nice and promising way to publish chess games on a blog, but at first sight there are three rather large disadvantages:

This post demonstrates some of the possibilities of the Chess Game Viewer. It contains two chess boards as well as NAG symbols, comments and variations.



The remaining moves of this game will be shown in the second diagram for which I will use a different background.



Btw the game above is the game Lewis William - Wilson Harry Slater and it was played in 1819.

See the post about the Chess Game and Diagram Viewer and the links in this post if you want to learn how to publish chess games on your own site.

After a search for a suitable chess game viewer which was the initial goal of this website I started to create a new Chess Game Viewer. These efforts have resulted in both a Chess diagram viewer as well as a Chess game viewer.
The code for these viewers is still under development, but both can already be used. A link back to this site is appreciated.

If you want to use these viewers first have a look at how to configure the FEN viewer. If everything works fine then configure the Chess game viewer.
Please note that it isn't necessary to use the coded moves anymore, because the viewer is able to generate them, but you can still use them to improve performance (and for complex games).

The game viewer can be used for chess games, but also for chess puzzles, like a mate in two problem and it is possible to use NAG symbols.
It's also rather easy to configure the viewers. You can use your own chess board images or your own piece set.
It is possible to host everything on your own site even if you use blogspot. The previous two non-photo posts explain how to use the images uploaded by blogspot and how you can include the JavaScript in your own template.

Please have a look at some of the previous posts to get a better idea about the possibilities of these viewers and let me know if you have more unfulfilled wishes.

To become really independent from other sites you may also want to use images of chess pieces that you have uploaded by Blogspot/Blogger and are stored in Picasa.

This can also be done.

1. Just create a new post. Add all the images that you need to this post and when you are finished save it without publishing. You may publish this post, but there is no need to bother the visitors of your site with a post of these images.
2. Now you have to edit the JavaScript code and edit the array urlpcs in such a way that it contains the urls to the pieces you have uploaded in the previous step.
3. In addition you'll have change the JavaScript code in such a way that the variable pcsdir gets the empty string value

There are some disadvantages:

One of the initial requirements for our Chess Game Viewer was that it shouldn't depend on another site. Of course it is possible to host the JavaScript on your own site and a site like Google sites will be sufficient. However the intention of the original requirement was also that it should be possible to host the needed JavaScript on Blogspot.
It is rather easy to accomplish this.
I assume that you already have configured your site to use the FEN viewer and the Chess Game viewer. Then look for the line in your template that refers to the external JavaScript file.

Let's start by downloading the JavaScript file from this site. After downloading open the downloaded file with Wordpad and copy the following lines at the top of this file.

<script type='text/javascript'>
//<![CDATA[

Next we are going to add the following lines at the end of this file.

//]]>
</script>

And by now we only have to replace the following line in your blogspot theme by the content in our Wordpad editor.

<script src='http://sites.google.com/site/viewchessgame/js/gv.js'
type='text/javascript'/>

Before actually changing your template it will be a good idea to backup your full template.

So now you know what to do to include the necessary code within your template. I only advice you to wait a little longer or to replace the code with the new code in the future, because the Chess Game Viewer is still under development and improving all the time.

In addition to the post about the usage of other board images I just wanted to show you this special board. It's a combination of all the standard board images currently available.

It also shows that when you want to create your own board image you are not obliged to create 2x2 squares and you can even design a complete board.

The position, by the way, is really a mate in 262 and the first move of the solution is 1.Kd6.

An overview of Chess Publishing methods has been published before, but this overview didn't include the ChessFlash PGN viewer of one of the previous posts.
In addition some of the previously discussed Chess Publishing methods just disappeared, which emphasizes the importance of one of the original requirements that it should not be dependent on another site.

Now let's first concentrate on the ChessFlash PGN viewer.

• It offers a chess board that shows the position after each move
• The moves are also shown
• Clicking on a move shows the position on the board after this move
• It doesn't offer autoplay
• Variations in the moves are possible
• It can deal with comments, but the comment at the start of a variation seems to be shown as belonging at the end of the previous move
• There is a kind of puzzle mode, but this doesn't show the moves after the right answer is given
• It is based on entering PGN
• I think that it is not necessary to copy and paste all kind of code. The Quick Publisher can be seen as an additional nice tool. The original requirement "Without the need to copy and paste all kind of code" is probably met
• It seems to depend on another site, but it will also be possible to host the player on your own site and a site like Google sites will do. However it will not be possible to limit ourselves to the Blogspot/Picasa combination.
• It loads rather slow, especially when you publish more chess games on the same page like you may frequently do on a blog-site). This can partly be solved by means of a show/hide wrapper, but I don't like to hide the content of my posts
• A separate PGN viewer is loaded for each chess game.
• It doesn't really feel integrated and the moves are always shown at the right side or below the board, but not around the chess board.
• The height and width is configurable, but the scrollbar at the right side remains.

I have tried the ChessFlash PGN Viewer as you can see in this post. I still have to write a post about my findings and compare this chess publishing method with the other alternatives.

---

The original PGN with some formatting and color added for easier viewing:

[Event ""]
[Site ""]
[Date "2003.03.02"]
[Round "8"]
[White "Kasparov Garry"]
[Black "Kramnik Vladimir"]
[Result "1/2-1/2"]
[WhiteElo "2847"]
[BlackElo "2807"]
[ECO "C88"]

1.e4 e5 2.Nf3 Nc6 3.Bb5

It is rather easy to use another set of chess pieces with this JavaScript Chess Game Viewer. In the next diagram I have used the Linares set, but you can use each of the Palview Chess sets, by just directing the pdir variable to the right location.
The easiest way to do this for the linares set is by adding the following line

pdir=vdir+'linares/';

but instead of linares you can also use: kingdom, alpha, boldlinares, leipzig, tilburg or merida.

If you want to use the same chess set all the time just add this line to your template. If you want to use it for a single board in a post then add it to the post.
Currently it isn't possible to use different chess sets for re-playable games on a single page, but it will be rather easy to implement this functionality if there is a real need for this. For static boards (by means of the FEN Viewer) each board already can use it's own chess set.

Linares on a blue chess board

Some other combinations can be found on the ViewChessGame site.

It is possible to use another board image, by just assigning the location of this image to the brdimg variable.

This is demonstrated in the following example game between Alexander Mc Donnell and Louis Charles Mahe de la Bourdonnais, that has been played in 1834.

In the example above I have used brdimg=pcsdir+'wood29.jpg';
instead of wood29.jpg you may prefer to use another board image like:

• blue29.jpg
• borderline29.gif
• cowderoy29.jpg
• gray29.jpg
• graystone29.jpg
• green29.jpg
• ivorygreen29.jpg
• lightestgray29.jpg
• lightgray29.jpg
• marblebrown29.jpg
• rob29.jpg
• sepia29.jpg
• slatebrown29.jpg
• wood29.jpg

Two more attention points:

New functionality

From now on it will be possible to use NAG symbols (Numeric Annotation Glyphs) like $1 and $15 in the chess game viewer, because these symbols have recently been added. Below you can find an example.
Please note the text that becomes visible when you place your mouse above one of the less trivial symbols.



The code used above is:
<script language='JavaScript'>Game('','',''1.e4 e5 2.Bc4 c6 {The Philidor Counterattack of the Bishop\'s Opening} 3.Qe2 d6 4.c3 f5 5.d3 Nf6 6.exf5 Bxf5 7.d4 $6 {<br />}( {I just have to show some NAG symbols and I think that} 7.Nf3 $1 {is a far better move.} ) {<br />} 7...e4 $1 $15 8.Bg5 d5 9.Bb3 Bd6 10.Nd2 Nbd7 11.h3 $6 h6 12.Be3 Qe7 13.f4 h5 14.c4 a6 $6 15.cxd5 $6 cxd5 16.Qf2 O-O 17.Ne2 b5 18.O-O Nb6 19.Ng3 g6 $10 20.Rac1 Nc4 21.Nxf5 gxf5 22.Qg3+ Qg7 23.Qxg7+ Kxg7 24.Bxc4 bxc4 $154 {A NAG symbol related to the bishops} 25.g3 Rab8 26.b3 Ba3 27.Rc2 cxb3 28.axb3 Rfc8 29.Rxc8 Rxc8 30.Ra1 Bb4 31.Rxa6 Rc3 32.Kf2 Rd3 33.Ra2 Bxd2 34.Rxd2 Rxb3 35.Rc2 h4 36.Rc7+ Kg6 37.gxh4 $158 {Have a look at the pawn structure} 37...Nh5 38.Rd7 Nxf4 39.Bxf4 Rf3+ 40.Kg2 Rxf4 41.Rxd5 Rf3 42.Rd8 Rd3 43.d5 f4 44.d6 Rd2+ 45.Kf1 Kf7 $15 46.h5 e3 47.h6 $4 $19 f3 $3 0-1',1,4);</script>

This blog started as a search for a good chess publishing method for Blogspot and other sites and now seems to end up as the home of a new chess publishing method, called the Blogspot Chess Game Viewer.
This method meets all original requirements, but now I know that I even have more wishes, so I am going to continue the development of this viewer. However I am still interested in alternative methods, because the main goal is still to find the ultimate chess publishing method. Earlier I have written this overview of Chess Publishing methods.

The main drawback of the first version of the Blogspot Chess Game Viewer was probably the use of the coded moves. In the latest versions these coded moves aren't necessary anymore and the coded moves are generated by the JavaScript itself, but at the moment there are still some known limitations with this coded moves generation.
In addition there is a (large) wishlist for new functionality, but I invite you to add more wishes in the comments on this post.

At first sight the next game is just another example of a game published with the Blogspot Chess game Viewer, but this time I left the coded moves out. This became possible, because I have added a coded moves generator to the JavaScript code. However there are still some known issues.





The code used above is:
<SCRIPT language='JavaScript' type='text/javascript'>Game('','','1.e4 c5 2.f4 e6 3.Nf3 d5 4.Bb5+ Nc6 5.e5 a6 6.Bxc6+ bxc6 7.d3 Be7 8.c3 Nh6 9.O-O a5 10.d4 a4 11.Be3 Nf5 12.Qe2 c4 13.Qf2 Rb8 14.Bc1 Rb5 15.Nbd2 c5 16.Re1 h6 17.Nf1 cxd4 18.cxd4 g6 19.Ne3 Rg8 20.Nxf5 gxf5 21.Qc2 Bd7 22.Bd2 Bb4 23.Bc3 Rg4 24.Qd2 Qe7 25.h3 Rg7 26.Qf2 a3 27.Bxb4 Qxb4 28.bxa3 Qxa3 29.Rab1 Qc3 30.Rxb5 Bxb5 31.Rb1 Kd7 32.Rxb5 Qc1+ 33.Ne1 c3 34.Kh2 h5 35.Nd3 Qd1 36.Nb4 Qd2 37.Qf1 Qxd4 38.Rb7+ Kc8 39.Rb8+ Kc7 40.Na6+ Kd7 41.Qb5+ Ke7 42.Qb7# 1-0',1,5);</SCRIPT>

The previous posts showed that it is possible to publish chess games on a blogspot/blogger site. Last week I received a request to help in creating some gadgets with the same purpose. These can be used to publish chess games on a site that is hosted on Google sites (and some other web sites).
The combined efforts (of me and the admin of lessons.chessteacherlessons.com) have resulted in two gadgets that are demonstrated on this Chess Gadgets page.

I still prefer the publishing method for the Blogspot sites, partly because of the limitations, but it's a nice alternative.

As requested by Oblomov a study example (in which the initial move number is larger than 1). The code needed for this example can be found in the post about Using more than one chess board.



Btw I like this study especially the part in which promoting to a queen results in a draw.

This post explains how you can adapt your template in order to use the Chess Game Viewer, but first configure and try the FEN-viewer.

If the FEN-viewer is working fine we start to configure the chess game viewer.
Go to Layout » Edit html
and make a backup of your template

Then find something like

]]></b:skin>
</head>
<body>

We are going to add some lines above and below this, but also adding an onLoad statement to the body tag.

#pc1 {position:absolute; visibility:hidden; cursor:hand;}
.qzs {position:relative; visibility:hidden;}

]]></b:skin>
</head>
<body onLoad='InitSys();'>
 <div id='pc1' onClick='DropPc(cg)'>
 <img name='dpc'
  src='http://sites.google.com/site/viewchessgame/pcs/i.gif'/>
</div>

And (after saving your template) the configuration part is finished.

---

Let's try it by adding the following code to a post.

<SCRIPT language='JavaScript' 
type='text/javascript'>
Game('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR 1',
'sc@@K[@@z^@@@Q@@|a@@ET@@^L@A',
'1.e4 e5 2.Qh5 Nc6 3.Bc4 Nf6 4.Qxf7# 1-0',
1,6);</SCRIPT>

This is the Scholar's Mate.

The arguments for the Game function are similar to the Fen2Page function. At the moment we still have to add the coded moves (that can be copied from the file generated by Palview). The last optional argument indicates the initial position that has to be shown, because the starting position of the chess board isn't very informative.

I'm going to explain how you can publish re-playable chess games on your blogspot blog without the need to use another external site. This will be done in some different steps, which will enable you to detect possible problems as early as possible (without having done a lot of work).

This first step will enable you to use the FEN viewer.

First, Go to Layout » Edit html
and make a backup of your template

Now we look for the line with the title tag. This is probably something like <title><data:blog.pageTitle/></title> and copy the following lines just before this line.

<script src='http://sites.google.com/site/viewchessgame/js/gv.js'
type='text/javascript'/>

Next you have to add the following lines to the css part

.board img{margin:0;padding:0;border:0;background:none transparent}
.board table,tr{margin:0;line-height:9px}

If you don't know where to add it an appropriate place is probably just before the line

]]></b:skin>

And now the configuration part is finished (after you have saved your template) and you are able to use the FEN-viewer in your posts, just like in the post about displaying a diagram and about the improved blogspot FEN viewer.
Use the edit html to insert this kind of code in a post. The used code (in your post) for this last mentioned diagram with the letters, figures and Black to move indication is

<script language="JavaScript">
Fen2Page('rnbqk2r/ppp2pp1/5n1p/3p2B1/1b1P4/2N5/PPQ1PPPP/R3KBNR',2,1);
</script>

• The first argument is the FEN code of the diagram that has to be displayed
• The second optional argument (0, 1 or 2) indicates if the White/Black-to-move indication has to be shown. No move indication: 0, White to move: 1 and Black to move:2
• The third optional argument indicates if the figures and letters have to be shown.
  

The code mentioned above results in:

This blog is in fact an overview of all kind of Chess Publishing Methods. This post tries to give a short overview of my personal opinions about these methods.


Chesspastebin
Chesspastebin is based on JsPGNViewer, which can also be used if you are able to include the jsPgnViewer.js in your webpage.
The jsPgnViewer library takes the PGN of the chess game and parses it on the fly, which makes this JavaScript code very interesting.

The main disadvantages are:

• It runs within an iframe on another site
  
• There is an additional scrollbar, which makes that you have to scroll to see all the moves
• Sometimes the games seem to disappear making that you have to publish them again

Chesspublisher

Chesspublisher creates a nice replayable diagram, but the result is limited to a diagram with some buttons. The main drawbacks of Chesspublisher are:

• the lack of clickable moves and the fact that it is impossible to add variations.
• and it also runs within an iframe like almost all chess publishing methods
• In addition you have to genertate the diagram on their site

Chess Publisher 2

Chess Publisher 2 was an improved version of the original Chesspublisher, but not available anymore. This emphasizes that you can't really depend on other sites for the publishing of your chess games.


HTML Code Generator for Blogs

Quite another method to publish chess games on your blog is by means of the HTML Code Generator for Blogs, The method to publish chess games is described very well on their site and it can also be used for puzzles.

Some of the disadvantages

• Fixed width and very limited possibilities to configure, like having a fixed width
• Comments and variations are hidden
• This method uses Java which takes a rather long time to load
• The code runs and is dependatn on an external site.

LT-PGN Editor and Viewer

The LT-PGN Editor and Viewer is another rather nice method to publish chess games. There is no need to visit a site in order to convert your games or to generate the diagrams. You just have to add an iframe in your post with the url and the pgn data.

Some disadvantages:

• Uses external site
• The method uses iframes which makes that the viewer code is loaded for each game to be published

All files are available to run them on your own host.


Adapted version LT-PGN Viewer

An adapted version can be created that even has some more advantages. An example of this can be found in Some traps in the Sicilian game, but I used Google Pages to host the files which will probably be discontinued in the future.
The method can still be used on another host.

This adapted version fulfilled most of my requirements and I even thought that the Mission to find the right chess publishing method was accomplished, but I still had to do some experiments with chess puzzles and the method was still dependant on another site.
The originals requirements/wishes also stated that it should all be integrated within the blogspot template. Therefore the search continued.


Blogspot Chess Diagram Viewer

If you only want to display a chess diagram it can rather easy be accomplished by JavaScript that you include in your blogspot template as you can see in this improved version post.


Blogspot Chess Game Viewer

I also am convinced that it is rather easy to add replayable games based on a combination of Palview and the method I used to display the diagrams. You already can see some of the experiments with this method (see the two previous posts) and I will explain it in more detail later, but at the moment the code is still changing every day.