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: http://wordpress.org/#
Description: A plugin to take advantage of the mshots functionality on WordPress.com
Author: Ben Gillbanks
Version: 0.8
Author URI: http://www.binarymoon.co.uk/
*/
// [browsershot url="http://link-to-website" width="foo-value"]
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.
32 Responses to “An Automated Way to Take Screenshots of any Website – Free” Leave a reply ›
Bonus points if you can spot the deliberate mistake in this post
Matts reply.
I've seen this done before, but it would seem not as good as this method. Good work!
You think Matts reply is the deliberate mistake? Nope - I wouldn't lie about that - it's a copy and paste of what he wrote
So did you know about this screenshot thing they built then? I hadn't heard of it before, and thought it was fantastic when I realised. I am probably just really behind the times though.
Wrong end of the stick. Should be Matt's reply, not Matts reply.
The old WPVote was using something that got screencshots automatically don't know the name though.
You omitted the initial
<?of the plugin code.This is a great solution; I was also looking for an automated thumbnail solution recently, but came to the same conclusions as you regarding the existing range of external screenshot services.
Do you know if the mshot service caches the screenshots or reproduces them as new with every request?
Oops - thanks for the pointer.
The mshots service caches the requests for a certain amount of time, but I don't know how long. I don't think it would be feasible to generate the screenshots in real time.
Generating Thumbnail in realtime: Don't you think that will increase the page load time? Just my thought...How about enabling a cache along with it..?
It's not entirely real time. The images are cached already by the server on the generators side. This means that once created they only update once every X hours (not entirely sure how often they update, but it seems to stay cached for a few days).
I believe you mean "<?php"
Not everyone has short tags enabled, and the feature might even be deprecated in PHP 6.x.
originally I had just entered the php part
I think I had forgotten to encode the < and the post editor ate it.
This is great! WordPress.tv had a video by Douglas Hanna describing the WordPress showcase. I thought the automated screenshots was an awesome feature but couldn't quite figure out how it was done.
I noticied it on WpVote
Seems like a cool solution. I have chosen to manuallmy add thumbs on couponsforblogger.com, hapilly I don't have more than 3/4 coupons per week 
I saw this on WP Vote a couple days ago, and it jumped out at me when I was making a submission. I didn't know Automattic had a thumbnail system, or that it was even publicly accessible.
*Bookmarks*
Yeah - it's quite cool. I wasn't expecting Matt to say yes when I asked about it either.
Totally awesome, will have to give this function some play time somewhere.
Sorry if I seemed abrupt, it was not my intention.
Hey Matt - wasn't expecting you to comment. I totally understand the short emails. I think I tend to write too much
I was happy that you deemed it worth responding to at all - especially so quickly.
I see a 404 error page, if I would to download the plugin.
I'm sad about my bad english, but I hope you understand me.
How did nobody else notice this? Thanks for pointing it out! I've fixed the link now.
Thank you, great work!
This is awesome. I have tried to create something that did this in the past but ended up never being able to do it.
I will be referring to this in the near future, so thanks!
Excellent news. Ive been wanting to implement this type of function to Buddypress to call up each sites screenshot as their site avatar. Been messing around with other ideas but this seems to be the winner. Thanks Matt & Ben.
I've been looking for something similar, but that does things a little differently. Not sure if this is going to do it though?
I'd like to keep the first screenshot, rather then having it update, and I'm looking for a capture of the whole page as well as some other thumbnail sizes.
First off, this is a really cool plugin. One question though. Is there any way you know of to deal with the situation where generating a screen shot takes an inordinate amount of time? Say I'm using this method to generate 5 screen shots on a page, yet 2 of them just display the "Generating Preview" spinner indefinitely. Is there any way to gracefully handle these?
thnx for such a nice plugin ,but is their a way that we could use this plugin to show the websites thumbnail,when the link to that website or page is hovered over? Something like snapshots that wordpress.com blogs have.
wow that is so cool, i have been looking for an automated solution for screenshots for quite some time now.
Great work Ben,
I really like your idea, most people even do not even know that WordPress has an option which lets you take screenshots of any website.
I just downloaded this cool plugin for one of my project, and this will really make things easy for me.
Other nice thing i liked about this plugin is its light weighted and built in short-code.
You have done an amazing job.
Many thanks.