Atwp Blog

how to take a screenshot of your favorite website in WordPress (2020 Updated)

Hello everyone and we are here again with another tutorial in Atwp Worpress Hosting Blog

Sometimes you may need to take a screenshot of a specific website and display it on your WordPress website.For example, you may want to introduce a website for your users.

step by step guide how to take a screenshot of your favorite website

In this case, the ability to take a screenshot of the desired address automatically will be a very useful way that can save your time and allow you to address the main issue instead of dealing with sub-issues. In today’s tutorial, we teach you how can you take a screenshot of any website that you want in two simple methods and display it on your website

First way: by using coding

This method is suitable for people who have no problem with using different codes on their website. If you are one of these people and do not want to add a new plugin to your website, just put the following code in the functions.php file of your template or the Site-Specific plugin that you have already created.

function atwp_screenshots($atts, $content = NULL) {
	extract(shortcode_atts(array(
		"snap" => 'http://s.wordpress.com/mshots/v1/',
		"url" => 'http://atwp.dev',
		"alt" => 'screenshot',
		"w" => '600', // width
		"h" => '450' // height
	), $atts));
 
	$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '">';

	return $img;
}
add_shortcode("makeshot", "atwp_screenshots)

After placing the above code in one of the mentioned places and saving the changes, you now have a new shortcode that you can place in the WordPress editor to create a screenshot of your favorite address. Use this shortcode as follows:

[makeshot url="https://atwp.dev" alt="atwp.dev" w="500" h="300"]

As you can see in the above line we have used our new shortcode called makeshot. We set the URL value equal to our favorite site address, alt is the description of our image, and by defining ​​w and h, we set the width and height of the screenshot.Of course, it is not necessary to determine the size of the image, and if you do not specify a size for it, the created image will have a size of 600 by 450 pixels.

Second way: with the browser shots plugin

we are going to use a plugin In the second method.To use this method, it is enough to install and activate the Browser Shots plugin on your website. This plugin does not require any settings and you can use it immediately after activation.After activating the plugin on your site, if you go to the WordPress editor, you will see that a new button in the form of a camera has been added to the buttons of your visual editor:

When you click this button, you will see a window:

Now it is enough to fill in the requested information to create a screenshot according to your settings.The following is a brief description of these settings:

Image Url: Here you have to enter the URL of the website which you want to take a screenshot.

Image Link Url: If you want the created image to be linked to a specific address, enter the desired address here

Image Width and Image Height: Enter the image dimensions here

Image Caption: Here you can enter a description to be displayed below the image

Image Alt Text: Here you can specify the text that is displayed by placing the mouse on the image.

Open Link In New Window: Selecting this option will cause the link that you specified in the Image Link Url section to be displayed on a new page for users.

After entering the necessary information, click Ok to create the relevant shortcode based on your settings and place it in the editor. Note that you only see one intermediate code in your editor, and this shortcut code becomes a screenshot when you access the relevant text on the user side of your site.

Finally, you can use much better services to take screenshots. Some websites such as snapitoulrbox, and ScreenshotMachine, all have free screenshot services and can be useful for you too.

Exit mobile version