Skip to content

An Automated Way to Take Screenshots of any Website – Free

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: 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.

Share

Join me, me, Reid, maxbuttlies. They're all chatting about "An Automated Way to Take Screenshots of any Website – Free" below ›

Read Comments

96 Comments »

    • 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.

  1. 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).

  2. 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*

    • 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.

  3. 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.

  4. 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!

  5. 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.

  6. 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.

  7. 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?

  8. 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.

  9. wow that is so cool, i have been looking for an automated solution for screenshots for quite some time now.

  10. 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.

  11. 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!

  12. 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)

    • 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.

    • 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 :(

  13. 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.

  14. 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?

      • 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 :)

  15. Ben,

    Thank you again for the response. I am using the plugin. I was not aware that I could do this via html.

  16. 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

  17. 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

  18. 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?

  19. 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.

  20. 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?

  21. 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.

  22. 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!

  23. 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… :)

    • It won’t increase load time any more than any other image would. The screenshots are generated the first time a page is accessed. If a page hasn’t been accessed before then it will show a ‘processing’ thumbnail. Once the screenshot is generated it will show that instead.

  24. Hi,

    Great solution to a very common problem.

    However I like some other posters here have been trying to add it directly to the template, not via shortcodes, but with no luck.

    It seems that every time this is mentioned, there is a general response without much detail.

    Could you please advise which function code precisely I need to copy and paste into my template. many many thanks

    • Each website is different. I am afraid I can’t give precise information without you explaining your theme in detail.

      The process is quite simple so I am not sure how to explain it any clearer.

  25. This is an awesome tool! Any ideas on how to use this service for sites hosted on an intranet? Internet sites load right away, intranet sites just display the spinning generating preview image.

    • I am afraid intranets won’t work. The service is external and needs to be able to access the website that you want to screenshot. If the intranet is private (which is the whole point) then I am afraid it won’t work :(

  26. Great plugin, you can see it working on my gaming web site.
    A nice feature would be if the plugin could grab the webshot image and store it on my host. Maybe after the initial render, the plugin replaces the remote image with a local image 24 hours later on a cron or something. :D

  27. Nice plugin!

    A question that I did not yet see answerd:

    using the plugin is it possible to make the links open in new window/tab, and how would I go about doing that?

    Thanks!

    • Yes that possible.

      Open browser-shots.php

      Goto line no 56

      Replace this line
      return '<a href="' . $url . '" rel="nofollow">' . $image . '</a>';
      With
      return '<a href="' . $url . '" rel="nofollow">' . $image . '</a>';

      You are done

  28. Pingback: Super useful WordPress hacks and snippets | Kapun.ORG
  29. good plungin, but after install it,can I storage remote image into my own hosting using those image graber plungin?

  30. Good Plugin,

    Though I have a question. Is there a way to get full Page screenshot. Right nows its taking screenshot of half or some part of page which is also fine but is it possible to grab screenshot of complete page ?

Comments are closed. Let's continue the conversation on Twitter.