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.
68 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.
Wow! it's very useful piece of kode
Tanks!
Just stumbled on this one from a search; technique works brilliantly. Nice one!
ust downloaded this cool plugin for one of my project, and this will really make things easy for me.!!
The plugin sounds great. But I'm not trying it now. 1st, don't dare to just in case it mess up with my theme slider, talking from past experience... I'm not very codes-savvy. 2nd, I don't need it right now. But nice to know. Thank you for sharing!
Thanks for a great plugin. One question... How do i use it in my template files? For instance I would like to add it different places in my theme files and feed them URL's from the wordpress admin.
I can only get the shortcode to work :/
You can use the functions individually as well - if you open up the plugin file you will see the functions and should be able to work out which ones you need (I can't remember them off the top of my head)
Thanks Ben - I got it working now
Hey Nice plugin!
Just one question... how often the server updates the screenshot? I'm using the plugin for my customers portfolio (showcase)
BTW: Thank you! Keep up the good work.
Hi. I am afraid I don't know the answer to this. The service is controlled by Automattic and not me. In my experience it seems to be about once every 48 hours though.
That would be just perfect! thank you
Nice wordpress plugin! But you should try to reduce page load time nearly negligible. My page load time is increased
Hi, I am afraid I can't control the speed of this plugin. The script itself is very fast, so the issue is loading the content from an external domain. The domain is not mine so there's nothing I can to speed it up
No prob man still its a nice plugin and i like it very much
cheers
This has been a lifesaver on my new theme coming out. Lets hope the API stays up and going.
Hi Ben
This is an awesome work. I too need a similar to post screenshots for a wp showcase website.
Thanks for share.
Thanks for the nice tool. However, I still prefer the traditional method of taking screen shots. This may be useful to people who want to take bulk screen shots.
Thank you for this. Everything seems to be working fine, but when I click on the image, how do I get it to open in a new tab/page?
you need to change the html for the link (add target="_blank" to the anchor tag)
Ben,
I did that, but for some reason it did not work. Can you provide me with an example of what should be written inside the brackets?
are you using the plugin or html? If html then you should use the code I pasted in my last comment - if the plugin then I will need to double check it's actually possible
Ben,
Thank you again for the response. I am using the plugin. I was not aware that I could do this via html.
Hi ben,
Do you know if it's possible to use a cache system with the image from wordpress or use timthumb to do this job?
Thanks for the reply!
+++
Hi Henri - I am afraid I'm not aware of anything that does this. Please do let me know if you work something out though
Hi Ben, I was wondering if you knew of a program/application which would grab the screenshots of all pages on the web which links to your website? Not only the page but also makes sure that the screenshot includes the area of the page where the link is located?
S
Unfortunately, MShots dynamically sets the height of the image based on the width you specify.
Even when specifying a certain height, it ignores it. Has anyone else noticed this?
Yeah - this is exactly the case. I don't know of any way around this at the moment.
A combination of MShots and TimThumb comes to mind
Thanks Ben for this.
Do you know a way I can quickly put a list 100 different URL's into the shortcode : [browsershot url="http://www.sample.com/" width="foo-value"]
As I have a long list of websites I want to have on one web page, but want to know a quick way of doing this.
I have now been battling for hours with this plugin. Yes it works fine with just the shortcode into a post. What I am trying to do though is to automate the process ie: Whenever a url or web address appears in a post it should render an image automatically from the address.
I did try and insert the following, , into my index.php and single.php file but it just doesn't seem to want to do the trick.
Am I using the correct code and what should be added to my function.php file?
Ooops here's my code
hi
Thanx for the useful work! I need to generate screenshots of websites for a directory model website. I wanna have the thumbnail just besite the title. I'm fed up with free online services like thumbshot !!! I want a built-in code so as my own server do the job. can u plz do me a favor and explain how it is possible ?
Thanx in advance
Hi there. Sounds like a great idea. Unfortunately I have no idea how the service works. I'm simply using another free service so don't know how I would begin to serve screenshots in this way.
This is amazing! I am a little concerned about that will happen if they discontinue the service, but so far this is really awesome, thanks for sharing!
How can we display the Bookmarks Links with screenshots using wp_list_bookmarks and BM Shots plugin?
Anyone try that? It will make the WP Links really useful...