DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.

Did you know that WordPress .com have a service called mShots, which allow you to get snapshots of any website? In today’s recipe, I’m going to show you how to create a shortcode in order to easily display a snapshot of a specific website.

The first step is to create the shortcode. To do so, simply paste the code below into your functions.php file.

function wpr_snap($atts, $content = null) {
        extract(shortcode_atts(array(
			"snap" => 'http://s.wordpress.com/mshots/v1/',
			"url" => 'http://www.catswhocode.com',
			"alt" => 'My image',
			"w" => '400', // width
			"h" => '300' // height
        ), $atts));

	$img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
        return $img;
}

add_shortcode("snap", "wpr_snap");

Once done, you can use the snap shortcode, as shown in the following example:

[snap url="http://www.catswhocode.com" alt="My description" w="400" h="300"]

This will display a snapshot of CatsWhoCode. Please note that the height parameter can be ommitted.

Thanks to Valentin Brandt for the cool tip!

20 Comments

  1. Love this tip. Much easier than manually taking and uploading screenshots. Thanks!

  2. I never heard about this service but to inform. Let me try, thanks.

  3. I visit often… absolutely love this recipe, works like a charm =D

    thanks!

  4. Lovely find. Finally, taht’s one responsive thumbnail service that does not suck!

  5. Looks good, but don’t abuse WordPress.com 😉

  6. Another useful snippet, thanks!

  7. Few days ago i was tried to do something like this but now it is more easy for me. Thanks Jean!

  8. This is awesome. This will be bookmarked. This reminds me of the delicious.com site and how they have thumbnail. I wonder if they do it this way. This is a much easier way of getting thumbnail shots for a website. Awesome

  9. This shortcode is fantastic!

  10. Ah awesome!!!! Hmm, is there anyway that I could make the image / screengrab clickable? Once clicked (image) it would go to said site url?

  11. Sometimes “Generating preview…” picture keeps appearing. Does anyone know why?

    Thanks for this cool tip!

  12. Thanks for sharing !
    It’s now available on the extend : http://wordpress.org/extend/plugins/wordpress-snap/

  13. Ben Gillbanks created a plugin for this a long time ago.

  14. I absolutely love this! Have been looking for something like this for EVER!

  15. Yeah it works . but I like to know if I replace your url with mine will it still work with out crashing my test site and also what code can I put into code below to make the websites thumb nail clickable with a no follow link or do follow link ? .

    “url” => ‘http://www.catswhocode.com’,
    “alt” => ‘My image’,
    “w” => ‘400’, // width
    “h” => ‘300’ // height

  16. @Chuckie : Use my plugin : http://wordpress.org/extend/plugins/wordpress-snap/ for this. I have improved my shortcode.

    [snap url=”http://www.geekeries.fr” alt=”My description” w=”400″ h=”300″ link=”on” title=”My Title”]

  17. This is one of those small but really useful tips that one would wonder how I’ve done without until now. Thanks!

  18. Unfortunately, MShots ignores the height parameter, you cannot have a custom width AND height.

    Height is generated dynamically according to width, which makes Mshots semi-useless 🙁

  19. I’ve used this on my own site, very useful for putting a quick blog post together without having to manually create screenshots.

  20. Didn’t know this one yet. Guess I learned something today! 🙂 Thanks for giving the code for the footer.php file. Will try it out. I guess we all have to thank Valentin!

Leave a Comment

Your email address will not be published. Required fields are marked *