How to Link a Clickable Image to A Document or PDF?

How to link a clickable image to an online document?

I’m going to teach you how to do it really quickly, it’s actually very simple!

This is a question I get asked quite often by newer bloggers. Even veteran bloggers will ask me about it if they notice I’ve done it on a recent post!

Disclaimers:

First off, if there is a way to “embed” the document itself into your content, I don’t know about it. This is just how I personally link to a document using a small image of the document.

Secondly, the process is pretty similar for Blogger or WordPress, but my directions will primarily be from a WordPress point of view.

How to make a clickable image link to a document online

    1. First off, I’m going to assume you have your document or PDF uploaded to the internet already. If not, you can upload to Google Docs or you can actually upload PDF’s (not the documents) onto your own site using the Add Media tab (WordPress only?).
      :: For Google Docs, make sure you grab the Share URL.  (Go to Share in the upper right hand corner. Choose your privacy settings. You’ll need to either choose “anyone with a link” or “public” for  your readers to be able to access the document. Then you’ll be taken to a page with the link you need to use to share the document. Do not use the url you see in your browser. That won’t work. You have to use the sharing url.)
      :: For Media uploaded to your website, you’ll just use the link to the media after you upload it. This is the link to the PDF shown above: https://www.familyfriendlyfrugality.com/wp-content/uploads/2012/01/2011-Goals-Wrapped-Up.pdf

       

I usually have to hit Control A and then Control C to grab these links
  • Next you want to take a screen shot of the image you want to be clickable. I use either Snagit (costs $$$ or use the free version) or Awesome Screenshot (free extension for most browsers) to get my screen shot.
  • Now, just re-size the image to the size you want. Tip: I don’t necessarily want the image to be readable within the blog post. Why? Well because in the past, when I’ve made it readable on the blog post, sometimes people think that the image is NOT clickable (despite the caption “Click to Print”) and they mistakingly believe they have to print the entire blog post to print the document. I know, it sounds a bit crazy, but seriously? Just ask me how I know this.
  • Here’s where the magic happens 😉 . Upload the image to your blog post the same way you upload any other image. In the link field, put the link to the online document. In the caption field, write out Click to Print. (for Bloggers users, I think you have to upload the image first, then click the image and then click the attachment link to add the link).
  • Voila!
  • Super easy, and it looks really great too.

    Now you can offer your readers PDF’s and documents and make them even more attractive by linking to them via clickable images!

    Enjoy!

    Here are some posts where I have linked to documents with clickable images:

    Published by

    Heather

    Heather is the creator and owner of Family Friendly Frugality. She calls Texas home and is married to her best friend. With 2 children 22 months apart, she has her hands full. So full that she decided to start blogging as a hobby. That hobby blew up into a full time job. Now she's got the husband, the kids and the blog. We're not exactly sure what she was thinking, but she's too busy for us to ask. Find Me On Google + View all posts by Heather

    Leave a Reply

    Your email address will not be published.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.