Home » How To's » How to Take and Embed Website Screenshots in WordPress

How to Take and Embed Website Screenshots in WordPress

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)

Browser Screenshots on WordPress.org

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.

Slash Command in the Block Editor for Browser Screenshots

You can then enter the site URL you’d like a screenshot of, and the screenshot will be generated behind-the-scenes.

Browserstack Plugin Block Interface

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.

A Loading Screen When a Site is First Accessed

Refreshing will show the screenshot, which you can preview on the frontend.

Screenshot of a Site in Browser Screenshots

WP Screenshot is a similar plugin to Browser Screenshots, which uses a basic shortcode to output your screenshots. Both plugins use the mshots service.

Website Screenshot to Media Library (Free) and the ScreenshotOne Service

Website Screenshots via ScreenshotOne

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 Works with the Block Editor

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.

Animated Gif of Generating a Screenshot With Photo Block and ScreenshotOne

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.

Leave Your Valuable Feedback

Your email address will not be published. Required fields are marked *

Shopping Cart
  • Your cart is empty.
Scroll to Top