Embedding a website screenshot of a site in WordPress can be challenging, with many options available. I’ll go over several WordPress plugins that aid in embedding site screenshots on your site.
Let’s go over the first plugin, Browser Screenshots.
Browser Screenshots (free)
Browsershots is a free plugin that uses the mshots service, which runs on WordPress.com. According to the WordPress.org description, the API is free for non-commercial use.
You can use the built-in block or shortcode when adding a screenshot to your site. I’ll be demonstrating the block.
Inserting the block is as easy as typing in /browser
into the block editor.
You can then enter the site URL you’d like a screenshot of, and the screenshot will be generated behind-the-scenes.
When adding the image for the first time, it may be blank. It depends on when the page was last visited by the mshots
service.
Refreshing will show the screenshot, which you can preview on the frontend.
WP Screenshot is a similar plugin to Browser Screenshots, which uses a basic shortcode to output your screenshots. Both plugins use the mshots
service.
The mshots service doesn't allow image saving on the fly
Both plugins mentioned in this section use mshots
, but neither can save website screenshots back to your WordPress install. This is a limitation of the mshots service.
Since mshots requires a recent visit to show a cached screenshot, a common side-effect is a “Generating Preview” image.
Website Screenshot to Media Library (Free) and the ScreenshotOne Service
The Website Screenshots to Media Library plugin uses the free(ish) ScreenshotOne service.
At the time of this writing, ScreenshotOne allows you to take 100 free screenshots a month, which will work for light use.
The plugin works by adding an admin panel screen where you can input a website URL. The image will then be downloaded back to your WordPress install. You can then use the image in a post or page by adding it from your WordPress media library.
Using Photo Block (Free) and the ScreenshotOne Service
Photo Block is a free plugin that makes adding images and styling them in the Block Editor as pain-free as possible. To take website screenshots, the plugin integrates with ScreenshotOne.
To add a website screenshot, you’ll first want to visit Photo Block’s settings page and enter your ScreenshotOne API credentials.
From there, you can insert the block and select ScreenshotOne, and the image will be generated and downloaded for you.
Conclusion
Several WordPress plugins aid in adding screenshots using WordPress, but the more reliable ones use the ScreenshotOne service as it allows local image downloading/saving.