An Automated Way to Take Screenshots of any Website, for Free, using Automattics MShots API

Note: We’ve now released a plugin called Browser Shots that wraps up this functionality into something a little more official.

When I was building WPVote I wanted to have screenshots of the webpages that were submitted. Clearly I didn’t want to take the screenshots myself so I spent some time searching for an automated method to do the work for me. There are a few websites that do this but they cost money, or watermark the images, or limit the amount of requests, so I wanted to find something better.

And then I spotted the commercial themes page on WordPress.org. Because Pro Theme Design is on the site I knew that the thumbnails updated automatically but I didn’t know how.

A quick look at the image info showed me an interesting thing:

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fprothemedesign.com%2F?w=250

The url was dynamic. Awesome! This means any site can just link to a special url and it will generate an image of the website.

I thought this was fantastic but I didn’t want to get in trouble with Automattic or the WordPress foundation (or whoever owns this tech) so I emailed Matt suggesting he charge for the service (I’d happily pay a small amount for this). This was Matts reply:

You can use it and link to it, but it’s not official. It’s not worth the effort to try to make it into a business – we have to support it anyway for our own apps.

A little abrupt but I suspect Matt gets more emails a day than most people get in a year, so I’ll let him off 🙂

So I then went and wrote a really quick plugin that I could use – and I tested it here on Binary Moon on my post about art direction in web design. The plugin code is below.

<?php
/*
Plugin Name: BM_Shots
Plugin URI: https://wordpress.org/#
Description: A plugin to take advantage of the mshots functionality on WordPress.com
Author: Ben Gillbanks
Version: 0.8
Author URI: https://www.binarymoon.co.uk/
*/

function bm_sc_mshot ($attributes, $content = '', $code = '') {

	extract(shortcode_atts(array(
		'url' => '',
		'width' => 250,
	), $attributes));

	$imageUrl = bm_mshot ($url, $width);

	if ($imageUrl == '') {
		return '';
	} else {
		$image = '<img src="' . $imageUrl . '" alt="' . $url . '" width="' . $width . '"/>';
		return '<div class="browsershot mshot"><a href="' . $url . '">' . $image . '</a></div>';
	}

}

function bm_mshot ($url = '', $width = 250) {

	if ($url != '') {
		return 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) . '?w=' . $width;
	} else {
		return '';
	}

}

add_shortcode('browsershot', 'bm_sc_mshot');
?>

To use this yourself all you have to do is download the BM Shots plugin, and upload it to your plugins directory. You can either call the plugin via a function in your theme or use the built-in shortcode inside your posts themselves. For full details check out the BM Shots plugin page.

Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.