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.

How was it for you? Let me know on BlueSky or Mastodon

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.