How to Create & Embed Your Own Chess Puzzle Into Your Website

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

A PGN can be found from any online game.  It looks like this:

pgn chess

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

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.

lichess fen

On Chess.com, you’ll find it here on the bottom right

chess.com fen

Make the proper moves you want right in the interface

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

uploading chess puzzle to site
Here’s the answer to the puzzle if you haven’t figured it out

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.

embed into chess site

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.