How to easily embed (iframe) Google Docs on your Web Pages!

Google Docs are pretty neat, they save as you type, you can easily share them with other gDrive users and even use them as a collaboration platform with up to 10 people working on it at the same time!

But sharing a Google Doc can go beyond simply sharing it with other gDrive users, if you go to:
File - Publish on the Web...


And click the Start Publishing bottom you'll get a Document Link and an Embeddable Code.


The Document Link its basically a special webpage that shows the contents of your Google Doc, and it gets automatically updated every 5 minutes! So anyone with the link can see it on their web browser, no extra software needed! And don't worry, unless you specifically allow public editing, no one can edit or delete your document.

This is very convenient, and to make it even more convenient, daddy Google is a big spoiler and added a few gadgets at the bottom so you can easily share your new and super cool Doc on a Webpage via G+, Gmail, Facebook or Twitter and save you some precious time!

But if you feel this is way too common user for your standards, there are more fancy ways to use this feature so you can use them embedded on your Webpage or Blog thanks to iframes, you can use this to show your Doc in 2 ways, with or without the "embedded" tag:

This is how it looks without the embedded tag:


Note that when the embedded tag isn't active, the background of the document its transparent and it shows the Doc's name on a speacial header and a footer from Google.

And this is how it looks with the embedded tag:


Note that when the embedded tag is active, the iframe height only affects the container, but not the document itself, so a scrollbar appears in case the document needs more space, the advantage is that you can use it without the document's title and footer.

Feel free to change the width and height to best fit your needs, you can also choose to use it with or without a frameborder.

So, what's the advantage of using an embedded Doc inside a webpage? Well they are great for content you wish to be able to update easily, it's way easier to update a Google Doc than a normal webpage, you can even do it from your mobile... also you can choose to allow specific people to be able to do edit the Doc and the copy on your site will get updated automatically. You can even choose to place different documents on a single page, each one with access to different users and you can even add some that can be edited by anyone!

So all this dynamic content doesn't sound appealing enough for you? Well, you can add some CSS3 goodness to your site and can make those Docs look like announcement boards with some cool animations and/or 3D effects... Also remember that with CSS3, all this special iframes can get this effects automatically, you just need to plan your code carefully.

Use Google Draws instead of Docs and you might find a new way to create easily updated banners for your pages...

Hope you liked this article, feel free to post your comments, thoughts or share your ideas at the bottom of the article. Happy coding!