Embed Diagrams
Interactive Diagrams in your Chess Web Site
How to do it:
You can embed diagrams right into your html code like this:
The attribute data-pos describes the position. You can either type it manually or copy it from ChessBase or Fritz in the
position setup dialog box.
Further data-attributes:
- Title: data-title="A Typical Sacrifice."
- Hints: data-hint="Sacrifice in a way that blocks escape squares of the black king."
- Solutions: data-solution="f3g5"
- Arrows: data-arrows="c1g5,g5f6"
- Square markers: data-squares="f7,g7,h7"
- Moves: data-moves="1.e4 e5 2.Nf3 Nc6 3.Bb5" (use this instead of data-pos)
- Play the position: data-play="1000", where the number is the thinking time of the internal engine in milli seconds.
Additionally, you have to add the following three lines to the <head> section of your html code:
The "jQuery" file in the second line is not needed if you have it already in your web page (quite common). jQuery version 1.12 is sufficient.
You can use the same plugin to embed a replayer for PGN games.
| Tactics | Solve easy tactical positions. Thousands of positions available. Your visitors will stay a lot longer when solving positions. | Example and Code |
| Live Blitz Chess | Kibitz a strong blitz game currently played on playchess.com. Nice entertainment. Longer visitor duration for you. | Example and Code |
| Your own chess server | Visitors of your site can play blitz games with one click. No need to leave your page. Will increase visitor duration a lot. | Example and Code |
| Chess Program Fritz | Let people play against a chess program with the strength of an average club player. Entertaining games, no frustration by unbeatable engines or artificial handicaps. Will your visitors in your site and let them return. | Example and Code |
| PGN Files | Let your viewers replay chess games in PGN format. Comfortable player with integrated chess engine and annotation functions. | Example and Code |
| Live Chess Tournaments | Follow grandmaster games currently being played in real tournaments. Broadcast specific tournaments. | Example and Code |
| Diagrams | Show your chess content with interactive diagrams. Users can enter and replay moves or even play out positions against a chess program. This will enrich the user experience of your site. | Example and Code |