Wednesday, July 17, 2013

How to embed documents with preview in a blog

To embed documents inside our blog, we first need to store those files. Google Drive, Dropbox and Box are the three safe, secure and enterprise-grade file storage service which we can be reasonably sure of not being shutdown in future(remember megashare.com?). Each of these services provide enough free storage for personal use (Google Drive gives 15 GB for free, Dropbox 2 GB and Box gives 5 GB).
Of these, Box.com is the most liberal both in terms of storage and features which it offers for free. We will use box.com for storing our files. So make an account, log in and and upload the files(files can be organised into folders). Get the link for sharing the file:


This will bring up the dialog which gives the link:
Copy the embed code(after changing width and height of preview as per requirement), go to HTML editor of blog(which allows putting in HTML code, normal text editor won't recognize the html we are pasting) and paste the code. That's all!

The final result: 


This is an example of embedding a doc inside the blog along with preview. The document can be zoomed, viewed full screen or downloaded. Width and height of the preview can be changed.

No comments:

Post a Comment