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