Tutorials and walkthroughs are a wonderful resource. Scroll through Pinterest and you’ll see plenty of visually striking step-by-step guides from eager bloggers trying to help out their readers.
The difficult thing about creating written tutorials however, is that they take an age to organise. First you need to take screenshots of the steps in your guide. Then you need to name them, open them in a photo editor and annotate them. Then there’s the process of uploading them to your blog, adding your meta data, scaling and inserting them into your post. That’s all before you manage to hit publish!
What if I told you there’s a way you can do all of this, while almost halving the time it takes? Today I’m guiding you through a tutorial for a tool that does this and much more. The tool is called FooCapture and you’re going to love it.
The Chrome Extension That Packs A Powerful Punch
Created by the creative team at FooPlugins, FooCapture is no ordinary screen capture tool. Sure, it takes screenshots but where it sells itself is by allowing you to automatically upload your screenshots to WordPress with just a click of a button.
Forget the mess of using multiple applications to get your images from A to B. With FooCapture you can snap away, annotate, save and upload from one handy little Chrome extension.
Using The FooCapture Chrome Extension
Now you might be wondering what’s involved with this whole uploading process. Do you need to give away your WordPress login details? Is it only available for self-hosted blogs? Do you have to install anything? How the heck does it even work?
Let me clear some of those questions up before we get stuck in with our walk-through.
Q: Do you need to give away your WordPress login details?
A: No. FooCapture uses the WordPress.com OAuth2 Protocol to connect to your WordPress installation. All of your information will be encrypted through the WP API, meaning the guys at FooCapture won’t have access to your details.
Q: Is it only available for self-hosted blogs?
A: Nope. Regardless of whether you use a self-hosted or a WordPress.com blog, you’ll still be able to use the app.
Q: Do you have to install anything?
A: Yes. FooCapture requires the installation of the Chrome extension from the Chrome web store. This will install into your browser only.
If you’re a self-hosted blogger using the app, you’ll also need to install the Jetpack plugin for WordPress. Once installed, you need to activate the “Jason API” module, in order to allow FooCapture to upload your images.
Note: The API is planned to be included in WP 4.1 and when that happens, FooPlugins will be able to discontinue the Jetpack requirement for self hosted .org sites.
With those questions cleared up, let’s walk you through the process of getting your first screenshot captured, annotated, saved and uploaded to WordPress!
Step 1. Installing The Extension
Click the “Add to Chrome” button to install and then close and reload your browser. This will refresh the Chrome browser session and enable you to start using FooCapture.
Step 2. Taking A Screenshot
Select the FooCapture browser icon as shown above. As you can see the extension allows you to capture:
- Part of the Page
- the Visible Page
- the Full Page
Therefore you’re given some wriggle room if you only want to capture a small portion of a page. For this guide I’m going to use the “Part of the Page” option.
To take a screenshot, click and drag over the element you’d like to capture. Once you’ve released the curser, your screenshot will open within the extension for editing.
Step 3. Editing and Annotating your Screenshot
With your capture now fully loaded into the FooCapture image editor, you’re free to edit your image. The tools provided are simple, yet provide a little more versatility compared to other screen capture apps.
Some of the functions include:
- Shape creation
- Pixelate parts of your image
- Add text
- Use arrows to point out important information
- Description, Caption and Titles for SEO
- Colour options
- Font size and style customization
You can also flip or rotate your image if you wish, giving you full control over how your screenshot looks and feels before uploading it to your website.
Once you’re happy with the image, click “Save” to store it in your library.
Step 4. Uploading to WordPress
There’s a few steps involved when uploading an image using FooCapture for the first time. Once you’ve set things up, you won’t have to do it again, so it’s worth getting this stage out of the way.
From your main FooCapture screen, select the “My Captures” option. Here you’ll see an overview of the screenshots you’ve taken. Select the image you’d like to upload and then click on “Upload Media”.
Tip: FooCapture lets you upload multiple images in one go.
The first prompt you’ll see after clicking the upload button, will be a request asking you to Connect with FooMedia.io.
Here you’ll be able to login to your FooPlugins account if you already have one. If this is your first time however, follow the steps required to create an account and then select your subscription plan.
Once you’re all signed up you’ve got two options for connecting your blog to FooCapture.
- Connect a WordPress.com site
- Connect a WordPress.org site
Select the option most appropriate to your WordPress installation.
As mentioned earlier, FooCapture requires that WordPress.org sites (self-hosted), have the JetPack plugin installed. If you don’t already have this plugin, you can easily download it here.
Ensure that once you’ve downloaded Jetpack, that you have the Jason API Module activated within your plugin settings, then select “OK, Continue.”
The next screen you’ll see will ask you to login to WordPress.com. Enter your WordPress.com email address or username, add your password and click “Sign In”.
You’ll then be able to select your blog from a drop-down list of active websites either hosted on WordPress.com or using the JetPack plugin.
There’s also an option to manually enter your site’s URL into the box below. Click “Authorize” after making your selection.
The final step in the set-up process, is to login to your WordPress blog via FooMedia. This completes the circuit and allows FooCapture to upload your images, directly into your Media library.
Enter your WordPress “Username”, “Password” and click “Log In”.
Step 5. Viewing Uploads In WordPress
Now here’s the good news – you did it! You also won’t need to go through that entire process again. The next time you upload a screenshot, all you’ll need to do is login and you’re good to go.
Now all that’s left, is for you to check that your image has uploaded to your WordPress Media library.
Head to your website or blog, login to your dashboard and navigate to “Media”. Your most recent uploads will be at the very top left of your library. The image will contain all of the changes you made during editing and will be ready to add to a post and publish.
So What’s the Verdict?
If you regularly take screenshots that you use on your blog, then FooCapture is definitely for you. The extension is smooth, clean and easy to use. Everything’s labelled clearly and the features offer a good deal of versatility.
The initial connecting process feels a bit time consuming. However since you only need to do this once, it’s worth the small amount of time it takes to connect. When WordPress 4.1 is released, I can imagine that connecting will be much more fluid.
One thing I’d love to see added, is the ability to capture not just screenshots, but videos too. This would open it up to people who regularly film their screen flows for instructional purposes.
Ultimately though it’s a neat, compact, incredibly useful and cost effective app that pretty much anyone could get the hang of quickly.
If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.