I love finding cool guides and documents on websites. And when I can, I love to provide such documents on my websites. There are lots of documents and files (Excel spreadsheets, Word documents, PDFs, slideshows, etc) on the Internet and many of them contain very useful information.
The problem is, though, that you and I never know if the document is something we really want until we download the file and open it up. It would be a lot simpler if we could quickly view the document before we decided whether or not we wanted to download it. With this cool little trick, you'll be able to provide your website visitors with that ability.
GView - Google's Cool (and Free) Embed Tool
While at work, I mostly share MS Word and MS Excel documents. But when I share files on my websites, PDFs and PowerPoint slideshows make up the bulk of the shared files. Google Drive (formerly Google Docs) provides a very cool little tool for embedding all four of these files types into your website. And you don't even have to upload the files to your Google Drive account. You can do it with files located on your website or, probably, just about anywhere on the Internet. All it takes is a little bit of cutting & pasting & editing on your part.
Step 1 - Open up your website editor and got to the page (or post) in which you want to embed the document. Once you're there, go into HTML mode. For WordPress this is the "Text" tab in the upper right corner of the editor. In Blogger it's the "HTML" button at the upper left corner of the editor. Now read through the text until you find where you want to embed your document. There may be a little HTML code that you have to look around, but it won't be too much. If need be, go back to your normal editor mode ("Visual" in WordPress and "Compose" in Blogger) and type in the words EMBED DOCUMENT HERE. Then when you go back to the HTML mode, you'll be able to find that text easily, remove it, and replace it with the proper code in Steps 2 & 3.
Step 2 - Copy the following code and paste it into your website (in HTML editing mode) where you want the embedded document to appear.
<iframe width="600" height="800" frameborder="0" src="http://docs.google.com/gview?url=**YOUR_FILE_NAME_HERE**&embedded=true"></iframe>
Step 3 - Replace **YOUR_FILE_NAME_HERE** with the full path to the document that you're wanting to embed. It could be from Google Drive or it could exist right on your website (as all my examples below do.) So, in the case of my first example, your code should look something like this:
<iframe width="600" height="800" frameborder="0" src="http://docs.google.com/gview?url=http://www.15minutemondays.com/wp-content/uploads/2014/07/Domain-Name-Brainstorming-15-Minute-Mondays.pdf&embedded=true"></iframe>
Step 4 - Preview your newly embedded file. If needed, adjust the width and height values so that your document is displayed in the size box that you prefer.
At the very bottom of this post, I've embedded four different documents: a PDF, a PowerPoint, a Word document, and an Excel spreadsheet. The sample code for each is just below the embedded document.
Other Embedding Tools
GView is just one of the ways you can do this. There's even a WordPress plugin that makes using the GView tool easier. However, as much as I like WordPress plugins, I also try to avoid them if there's an easy enough work-around. In this case, I think cutting & pasting & editing that line above (in Step 2) is simple enough. But if you want some other options, here are a few:
Embed PDF - Uses GView but only works for PDFs. Also, as of this writing, it had not been updated in six months. That's like a decade in WordPress plugin time.
Google Drive - You can embed documents in Google Drive by having it give you the proper embed code. I've done this with Word, Excel, and PowerPoint, but not PDFs. Open the document in question, go to the File menu, choose "Publish to the web ..." and follow the directions to get the necessary HTML code. Then paste it into your website as we did in Steps 1 & 2 above. You won't need to do the editing that we did in Step 3.
SlideShare - SlideShare is sort of like the YouTube of slideshows. It will store your slideshows, let people find them on SlideShare (it has its own search engine,) and then you can embed them. This is a cool tool, but it only works for SlideShows.
The Quick Takeaway
Embedding documents directly into your website makes it easy for your website visitors to see the documents before they download them. These can also become the "images" on your website to break up your text. Embedding these will give new life to your documents that used to just be boring links.
"Embedded Mechanic" by Mike_tn is licensed under CC BY-NC-ND 2.0
Examples
Code: <iframe width="600" height="800" frameborder="0" src="http://docs.google.com/gview?url=http://www.15minutemondays.com/wp-content/uploads/2014/07/Domain-Name-Brainstorming-15-Minute-Mondays.pdf&embedded=true"></iframe>
PowerPoint
Code: <iframe width="600" height="400" frameborder="0" src="http://docs.google.com/gview?url=http://www.15minutemondays.com/wp-content/uploads/2015/02/EmbeddedPowerpointExample.ppt&embedded=true"></iframe>
Word
Code: <iframe width="600" height="800" frameborder="0" src="http://docs.google.com/gview?url=http://www.15minutemondays.com/wp-content/uploads/2015/02/EmbeddedWordDocExample.doc&embedded=true"></iframe>
Excel
Code: <iframe width="600" height="400" frameborder="0" src="http://docs.google.com/gview?url=http://www.15minutemondays.com/wp-content/uploads/2015/02/EmbeddedExcelExample.xls&embedded=true"></iframe>