• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Pint Sized Sites

Web Sites for Your Small Business

  • About
    • Contact
  • Blog
  • Ask a Question
  • Tutorials
    • Website Basics
    • Web Marketing
    • Blogging
    • WordPress
  • Podcast Episodes

Website Basics · August 30, 2013

How To Embed a PDF As A Viewable Image

You are here: Home / Website Basics / How To Embed a PDF As A Viewable Image

What do you do if you want to put your sales flier on your site, but you want it to look like the sales flier and not some clickable link?

You’ve spent a lot of time and/or money crafting a beautiful sales flier. You’ve got it saved as an Adobe .pdf file that people can download and print. But you want the actual information and the graphics to show up on the website along with that link.

It’s easy to do this using Google Docs Viewer. I’m going to walk you through the process, step by step.

1 – Edit or Add the page where you want your pdf file to be posted.

2 – Click the “Add Media” button at the top of the Edit window. Upload your pdf file.

3 – Copy the link URL for the document. You might also just click “Insert into post” at this point and it will add the clickable link for the document. Here’s a link to the pdf file. Embedding a pdf as a viewable image

4 – Open a new browser window or tab and go to Google Docs Viewer.

5 – Paste the document URL in the “Enter a document URL below to generate a link to view it” box.

6 – Click “Generate link”

7 – Copy the code snippet from the box “For an embedded viewer, use this HTML tag instead:” It will look a little weird, but it should include the beginning <iframe> and the ending </iframe> code.

8 – Go to your WordPress page where you are editing the page. Click on the “Text” tab in the upper right corner of your editing box. You might see some strange looking code here. This is the html code for the page. Don’t mess with it.

9 – Go to the bottom of the text and paste the code snippet.

10 – Click Update or Publish. Note, if all you do is preview the changes, you won’t see the pdf in the preview. That’s normal behavior.

11 – Click on “View Page”

You should now see your pdf and it should look like this:

Filed Under: Website Basics Tagged With: editing posts and pages, embedding media, pdf, Wordpress

Kelli

Footer

  • Facebook
  • LinkedIn
  • RSS
  • Twitter
  • YouTube

Phone:

(360) 701-7823

Copyright © 2023 — Pint Sized Sites • All rights reserved. • Photo Credits • Privacy Policy •