Not sure how to display a screenshot of any website using the WordPress API? There will be times when we want to showcase the screenshot from one or more websites in our blog posts, and when those times come, we will have to manually take the screenshot, optimize it, and then upload it on our site.
But why do we have to go through so much hassle when we could use the WordPress default screenshot API to serve those images?
So to make it easier for you to embed screenshots of websites into your posts, we’re back with another exclusive post about WordPress Screenshot API. Here we’ll show you how to use the screenshot API named “mshot” to showcase screenshots of websites.
Now let’s get started…
What is WordPress Screenshot API?
WordPress has a few APIs that let you add and do a few things on your website with ease. One of them is the Screenshot API which allows you to take screenshots of the website and display them on your blog posts and pages.
The API is named as “mshot” API and it is basically a RESTful API that you can access by making HTTP requests through a web browser. You just need to enter the URL of the website in encoded format along with the height and width and it will automatically generate the screenshot for you.
By using this API, you can save your time and efforts of manually generating screenshots and uploading them to your server. The WordPress repository also contains several plugins based on this API, that allow you to take screenshots of a website using shortcodes.
Some cool features of using “mshot” API;
- You can take screenshots of any website and display them on your blog.
- You can set the width and height of the screenshot as you like.
- By using this API, you will be able to generate tons of screenshots faster.
- Also, it can reduce the amount of storage on your server since it uses its API’s server to serve images.
Now that you know what WordPress Screenshot API is, let’s get started by displaying screenshots from different websites in our blog posts.
How to Use “mshot” API to Serve Screenshots?
You now know what the screenshot API is and how to use it. Now let’s see how we can use this API to display screenshots of the website on our WordPress website.
For the purpose of this demonstration, I will be using the “mshot” API to display a screenshot of my website’s homepage in this blog post. In addition, it’s important to note that there are a number of different ways through which we can use this API to serve screenshots, and in this blog post I will share the three most common methods for doing so.
These methods are as follows:
- Using Official API URL to Request Website’s Screenshot
- Creating Shortcode Using API to Serve Images (Developer Friendly Guide)
- Using “BrowserShot” WordPress Plugin for Serving Screenshots (for Non-techy Users)
So, Let’s learn by example…
1. Using Official API URL to Request Website’s Screenshot
Using the official API URL to serve images directly within the <img* tag is one of the easiest ways to do this. By using this method, you will be able to send HTTP requests directly from your browser and you will not have to write huge lines of codes.
For example, I wanted to display the image of my website’s homepage (https://thewpx.com) in this blog post, so I did the following:
- First, I encoded the URL for which I wanted to get a screenshot of; in my case, that URL is: https://thewpx.com
- The next step in this process would be to encode the URL (you may use functions like
urlencode( $url; )or any online URL encoder for this.)
In order to do this, I have to pass the URL to the WordPress API;
Taking a look at it now, it would look something like this;
In case I do decide to use screenshots in my blog post, I will use this official API URL inside of the <img* tag, as shown below;
<img src=" https://s0.wp.com/mshots/v1/http%3A%2F%2Fthewpx.com" alt=" Screenshot of TheWPX" />
In the following example, you’ll see a screenshot of my website’s homepage. If you wish, you can follow the same procedure to display a screenshot of any website or web page. Additionally, you can also pass
?w=600 to display the screenshot with a width of 600px.
2. Creating Shortcode Using API to Serve Images (Developer Friendly Guide)
So we’ve seen how to use the official API URL to serve images directly. But what if we want more flexibility while displaying screenshots? In this case, we can use the 20 lines of PHP code, which I’ve shared below to create a WordPress Shortcode. This will enable us to easily output screenshots of any website.
In order to make it work, you will need to install the “Code Snippets” plugin on your website and paste the following code:
Once you have pasted the code and activated it, you will be able to create a shortcode as shown below;
[simply_screenshot url="https://thewpx.com" width="1024" height="768" alt="Screenshot of TheWPX"]
With this shortcode, you will be able to display screenshots of any website on your blog posts or pages without any trouble.
3. Using “BrowserShot” WordPress Plugin for Serving Screenshots (for Non-techy Users)
Now, let’s look at the most convenient way to use WordPress Screenshot API via a plugin called “BrowserShot”. This plugin is used to take screenshots of a specific webpage and then show them on your blog post or page using shortcodes.
There is no coding required to use this plugin, and it is extremely easy to use. There is no need to do anything other than installing the plugin from the WordPress repository and activating it on your website.
After the plugin is installed and activated, you will be able to use the shortcode which is given below. Afterward, it will start taking screenshots of the website and display them in your blog posts or pages.
[browser-shot url="https://thewpx.com" width="600"]
Additionally, it is possible to customize the look and feel of its shortcodes by using a comprehensive set of parameters and by passing the class, image_class, display_link, etc alongside the shortcode. It’s that simple!
Frequently Asked Questions (FAQs)
Still, have doubts? We all get confused sometimes, and there are times when we have several questions in our minds. So here are some questions we usually get asked by our readers.
I hope these FAQs help you to answer all your questions.
Q. Can we take screenshots using this method and use them on our blog posts?
The answer is yes, you can use any of these three methods to display screenshots of any website on your blog posts or pages.
The only difference is whether you use a shortcode or a plugin for your screenshots or not.
Q. Do I need to use plugins for using this API?
No, you do not have to install any plugins or scripts on your website in order to use Screenshot API. There is no problem in directly encoding the URLs in your blog post and it will work just fine!
However, if you would like to use the “BrowserShot” plugin, then you must install it on your website and activate it.
Q. Is there a limit to the number of screenshots I can request from API?
There is no limit on the number of screenshots that you can request from the API. The only thing you should keep in mind is that each API request takes a few milliseconds or seconds, which is why you should cache all screenshots to avoid any API response caching issues.
In conclusion, WordPress Screenshot API is a useful tool that allows us to display images of any website in our blog posts and pages. In this blog post, we’ve seen how to use the official API URL to serve images directly and also shared three easy steps for doing so.
We’ve also seen how to create a shortcode for the purpose of displaying screenshots of any website and adding them inside our posts or pages. Finally, we explored the “BrowserShot” plugin for quickly serving screenshots from your WordPress site.
Hopefully, this blog post was helpful in explaining the usage of the screenshot API and how to use it in your blog posts.
Do let me know if you need any help or have any queries.