EmbedChessboard Joomla Plugin

Do you ever need a way to show a series of chess moves in your blog? EmbedChessboard allows you to embed chess games on websites with the Portable Game Notation (PGN) format, easy to comprehend for novice and grandmaster level players alike.

Using EmbedChessboard 

1. Follow the “Download” link at https://extensions.joomla.org/extension/embedchessboard/. As of September 2021 you’ll be redirected to the SourceForge page.
2. Select “embedchessboard-joomla-plugin-X.XX.XX.zip” to download the Joomla plugin. Below are checksums for embedchessboard-joomla-plugin-3.05.00.zip. We recommend comparing the checksum of your downloaded file to the results below to ensure your file is not corrupted or malicious. You can use the terminal or VirusTotal.com.
   SHA256SUM – 07f5b2415ac289e89d235dacc7dc530590747e6d71166c8fb78d00acd5697452
   SHA512SUM –
   69c17d6e7f1315f0deaf5e41d61e8a1f589430f830257e4baaa1d8c0c806971e3a358a2e233a4db7b30ba209eda942121ac67103629b297f6e6d511bd3c2c105
   MD5SUM –
   bdd9c9cd2e3efe029b4a8440250e1760
   RIPEMD160 –
   8b73e677b71043859aa31dc5a07f3faa75f361a0
3. Log into your Joomla administrator dashboard (e.g. https://example.com/administrator).
4. On the left, select “System.”
5. Under “Install,” select “Extensions.”
6. Select “Or browse for file” and the plugin zip file. You’ll see the following notification:

   

7. On the left, select “System.”
8. Select “Plugins.”
9. Select “Content – EmbedChessboard.”
10. On the right, select the Status drop-down menu and “Enabled.”
11. Set the default chessboard frame layout to show move notation beside or under the chess board. This can be changed manually when coding an EmbedChessboard setup.

    

12. Set the default EmbedChessboard frame height. This can also be overwritten.
13. Customize the color of the EmbedChessboard background, board squares, navigation buttons, and text in hex format. Click the text field to use the color graph.
14. Set the default settings for automatically playing chess games. This too can be overwritten per chess board.
15. Select the “Description” tab for sample code. You can copy this code to get started as we did below.
16. Select the “Advanced” tab to add custom CSS.
17. Save changes.
18. Create a Joomla article.
19. Develop the PGN code for your chess game. The code block includes all custom parameters available and the developer’s example chess game.
    

    [pgn initialHalfmove=16
    autoplayMode=none
    layout=vertical
    height=auto
    showMoves=justified
    initialGame=first
    initialVariation=2
    initialHalfmove=start
    autoplayMode=loop][Event "World championship"][Site "Moscow URS"][Date "1985.10.15"][Round "16"][White "Karpov"][Black "Kasparov"][Result "0-1"]1. e4 c5 2. Nf3 e6 3. d4 cxd4 4. Nxd4 Nc6 5. Nb5 d6 6. c4 Nf6 7. N1c3 a6 8. Na3 d5 9. cxd5 exd5 10. exd5 Nb4 11. Be2 Bc5 12. O-O O-O 13. Bf3 Bf5 14. Bg5 Re8 15. Qd2 b5 16. Rad1 Nd3 17. Nab1 h6 18. Bh4 b4 19. Na4 Bd6 20. Bg3 Rc8 21. b3 g5 22. Bxd6 Qxd6 23. g3 Nd7 24. Bg2 Qf6 25. a3 a5 26. axb4 axb4 27. Qa2 Bg6 28. d6 g4 29. Qd2 Kg7 30. f3 Qxd6 31. fxg4 Qd4+ 32. Kh1 Nf6 33. Rf4 Ne4 34. Qxd3 Nf2+ 35. Rxf2 Bxd3 36. Rfd2 Qe3 37. Rxd3 Rc1 38. Nb2 Qf2 39. Nd2 Rxd1+ 40. Nxd1 Re1+ 0-1[/pgn]

    

    Do not use “<” or “>” characters within PGN data as any characters between them will be stripped upon saving.

20. Save changes.
21. Preview the page to test your code. Ensure the navigation buttons and moves work properly.

Below is the final result of the code block above.

Learn more about chess notation at https://www.chess.com/article/view/chess-notation.