WordPress shortcode: Display a thumbnail of any website

August 8, 2011 at 3:04 pm

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) {
			"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!