This is a great tool for chess coaches out there who want a more interactive element to their online training for their students.
I was playing a chess game earlier and I thought, man that would be great to embed into my website somewhere.
I was thinking how I can update my Evan’s Gambit article so I don’t, you know, forget all the moves every time I play it (like I did in this video)
Or I could just add puzzles for my website visitors.
I was reading about the Boiling Frog Attack when I noticed it and I really decided to learn how to do it.
Essentially, I can turn a normal embed (which shows the answers and the game) into this more fun and interactive aspect so players can see what I missed.
Go ahead and solve it. (Mate in 4 by the way)
Here’s how to make the puzzle from Chess.com
The essential steps I’ll showcase with images are:
- Find the PGN (portable game notation)
- Get the FEN (Forsyth-Edwards Notation) from PGN
- Make the proper moves you want right in the interface
- Check the box that says puzzle
- Embed the code into your site
Table of Contents
Find the PGN (portable game notation)
A PGN can be found from any online game. This is used so you can get the exact position from a game without making it yourself in a board editor. This makes creating puzzles easier.
It looks like this:
You can export a PGN by pasting its content and putting it into notepad to keep its formatting. It’s how I like to keep the files in case I lose the URL of the game and can’t find it again.
Get FEN (Forsyth-Edwards Notation) from PGN
The FEN is what you will use to have the starting position of the puzzle.
A FEN will be a single line of ASCII that will give you the exact board position to start from every time you use it.
It essentially describes all 64 squares of the board in a code and makes the board look just as you have it.
Unlike a PGN, it won’t be able to tell you the moves played beforehand, so it’s really only best for puzzles like the ones we’re making here.
On LiChess, you can go to the exact position you want, and click the new FEN which updates as you make moves.
On Chess.com, you’ll find it here on the bottom right
Make the proper moves you want right in the interface from the FEN
Head over to the Analysis section of chess.com and enter your FEN
Here’s where I got tripped up the first time. Without making the moves, the puzzle won’t have anything to go off of.
I had this with just a blank box to the right my first time. I almost gave up.
Notice how there’s no button on the right that says “black to move”
From this FEN, you can now move the pieces on the board.
Once you’re done, click over to the share icon on the top right to get the embed code, but first…
Check the box that says puzzle (Update 2020 Since Previous Screenshot Changed)
Also, make sure to flip the board if it’s a black to move puzzle.
It’s not always needed, but it’s a nice user experience so people understand right away what they’re trying to do.
Plus, if the board is flipped, the pawns would be going the wrong direction and it’s not always clear.
Copy the Embed code and put it into the html portion of WordPress
If you’re using WordPress, you’ll want to embed the code like other embed codes into the html tab and not the visual tab.
It works great on mobile devices too if you’re a chess coach in any way, which is a plus.
Using LiChess or other sites to create puzzles
So far I’ve only been able to make this on Chess.com, but I’ve heard you can also do this on Lichess by making studies.
I haven’t figured out how yet, but you may be able to do the same thing. I believe puzzles are entered by Lichess, but now can be added by users, but I haven’t figured it out just yet. If I do, or someone posts how, I’ll change this section of the page.
There are other sites I’ve heard of that can make these puzzles, but I haven’t explored them deeply. I wanted to keep my investment into software I believe will be around a long time.
With chess.com being paid and lichess being open source, they seem like the top two places to play and analyze your chess games for years to come.
Until I invest in chessbase, I’ll continue uploading my games and PGNs to Lichess.