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.

imac-automated-screenshot

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.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

25 Nov 2010

WordPress Advent – Seasonal WordPress Savings

In January or February this year I had the idea of making some sort of advent calendar website for christmas. I wanted to share something with the online community – I just wasn’t sure what.In mid October I started thinking...
29 May 2008

How I built BenGillbanks.co.uk in a little over 2 hours

Quite some time ago I purchased BenGillbanks.co.uk thinking it would be a good idea to own my own name as a domain. But then I didn’t do anything with it.The other day I decided it was time to sort it...
30 Jun 2007

WordPress tips and tricks – Custom Page Templates

Some time ago I posted the first of my tips and tricks for WordPress, and I thought it was about time I posted some more so, to start things off, here is a short tutorial on custom page templates in...
13 Mar 2018

WordPress: The Difference Between is_home and is_front_page

When making WordPress themes there’s 2 functions that are really handy. is_home and is_front_page. I use them all the time in both themes and plugins. But I can never remember the difference between them.is_home vs is_front_pageOn the surface they are...
28 Aug 2009

Binary Moon WordPress design vIII

As I briefly mentioned on Monday, I have finally redesigned Binary Moon.I actually started redesigning about 2 years ago. Initially it was going to be an update rather than a totally new look, and I even built most of it,...
27 Oct 2012

Browser Shots WordPress Plugin

I didn’t realise it had been so long but in February 2010 I wrote a little blog post about creating screenshots of websites automatically.I wrote this after finding that the team at WordPress had created their own system for doing...