Capture Screenshots of Web Pages with WordPress API
There are innumerous software apps that let you capture screenshots of web pages with a click. You open some page in your browser, hit the capture button and the screenshot gets saved as a static image.
Simple. There can however be instances when you may want to capture ‘dynamic’ screenshots of web pages – images that refresh automatically if the content, or the layout, of the underlying web page has changed. How do you do that?
The short answer is this simple web form. Just fill in the URL of any web page, the width of the screenshot and hit the Go button. It will create a link that points to the dynamic screenshot of that web page while the screenshot image itself will open in another window.
Generate Screenshots of Web Pages
Here’s a sample screenshot image that is 1024 pixels wide that is also ‘dynamic.’
You may be wondering why would anyone want such ‘dynamic’ screenshots? Well these are regular images so you can use the standard
<img> tag of HTML to directly embed these screenshot on to any another web page. There’s no need to upload screenshot images to a server first before embedding them on a page – see the following example:
<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Flabnol.org%2F?w=1024" />
There are other potential uses as well. If a particular web page is inaccessible from your current location, say due to some restrictions, you may use these server-side screenshots to at least get some idea of the content of that page.
Behind the scenes – The Geeky part
WordPress has a Python based tool called Mshots that they use internally to generate screenshots of these featured sites. This is also available as a WordPress plugin.
WordPress MShots may take a few seconds to generate the first screenshot of a new web page but subsequent requests for that same URL will fetch almost instantly. The WordPress user-agent string, that is responsible for generating screenshots, reads something like this:
HEAD / HTTP/1.1" 200 367 "-" "WordPress.com mShots; http://support.wordpress.com/contact/" GET / HTTP/1.1" 200 23475 "-" "WordPress.com mShots; http://support.wordpress.com/contact/" GET / HTTP/1.1" 200 5959 "-" "Mozilla/5.0 (X11; U; Linux x86_64; en-us) AppleWebKit/525.1+ (KHTML, like Gecko, Safari/525.1+) pythumbnail.py"
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory