``` ## 5. Expected Facebook preview **Code Genie** Shared a link ยท ๐ŸŒ Check out my creation with Code Genie! โœจ THECODEGENIE.COM **Created with Code Genie** Discover my creative coding project! Illustrative Facebook preview. The actual image will be generated from each user's canvas, not the sample artwork shown here. ## 6. Test the Facebook preview After uploading the three updated files to your server: 1. Open Code Genie and create a drawing. 2. Click **Run**, then **Get Link**. 3. Paste the generated link into a new browser tab and confirm the project loads. 4. Open the . 5. Paste the generated link and click **Debug**, then **Scrape Again** if needed. Facebook should then read the screenshot from the saved image URL. Its preview may be cropped to fit Facebook's card proportions. **One important note:** Your current canvas is relatively tall. Facebook generally displays wide preview images better, so a future improvement would be to generate a 1200 ร— 630 preview with the artwork centered on a white background. The implementation above first establishes the working screenshot-sharing functionality.

                    
                    
                
x:0 y:0
โœจ Welcome Back!

Hello, !

We're happy to see you at Code Genie. Continue your coding journey, create amazing projects, and earn more badges!

Code Genie
โœจ

Already Shared!

You've already shared this code. Make a few changes, run it again, and share your new creation!

โœจ

Share Your Creation!

Thank you for sharing your code with the Code Genie community!

Once shared, you can find your creation anytime by clicking the Explore button.

Would you like to share your creation?

โš ๏ธ

Oops! Code Error

Your code contains one or more errors. Please fix them, run your code again, and then try sharing your creation!

๐Ÿช„

Nothing to Share Yet!

Your creative canvas is still empty. Write some code, click Run, and bring your creation to life!

โš ๏ธ

Oops! Something Went Wrong

Your code contains an error. Fix it and click Run again to earn your points!

Error Details
โœจ โญ โœจ

Congratulations!

You've earned a new badge!

Genie celebrating your achievement

Keep coding, creating, and unlocking new achievements!

๐Ÿ†โœจ

Save Your Achievements!

Don't lose your hard-earned points and badges! Log in or sign up to save your progress and keep your achievements for your next visit.

Great job! You've earned points and badges! Log in or sign up to save your achievements.

๐ŸŽ“โœจ

Personalize Your Certificate!

Your certificate deserves your correct name! Please log in or edit your name before generating your certificate.

๐ŸŽ“โœจ

Your Certificate Name

Enter your full name exactly as you would like it to appear on your certificate.

โœจ โญ โœจ
Code Genie with Crown

Congratulations!

You've earned

0 ๐Ÿ…

Keep coding and collecting badges!