Google Drive has several productivity applications, which allow you to easily share and collaborate with others. Did you know that Google Drive can also really help your web pages shine too?
How to create engaging web pages with Google Drive
Firstly, Google Drive documents can be made public, which means they are indexed by Google Search and appear in search results. Just click on the Share button and change the visibility and you are done. Great!
If you want to send the link to your new creation as a full on web page in it’s own right, then go to the File menu (while you are editing the document) and select Publish to the web…
In the dialogue box that appears, select Start publishing (which will change to say Stop publishing). You’ll see the link to the web page appear near the bottom. Copy and paste this to wherever you want to share it.
That is all well and good, but what if you could add a spreadsheet directly into a blog post?
How to embed a Google Drive document into a web page
Using the same dialogue that you used to publish your document, under Get a link to the published data, click on Web page and a drop down list will appear. Clicking on HTML to embed in a page will produce the code you need.
With your newly acquired code, paste that into any webpage’s HTML and you will have a nicely embedded Drive document.
Below is a sample spreadsheet I made earlier.
[iframe width=’500′ height=’300′ frameborder=’0′ src=’https://docs.google.com/spreadsheet/pub?key=0AqM-1wYf86pJdGdHS3R5Q3ZKNEc0THdKVHl4Qm8wM0E&single=true&gid=0&output=html&widget=true’][/iframe]
The code to embed your nicely crafted document uses an iframe. As you are displaying the actual document, it means it is kept up to date. So changes you make to the original will be visible on your web page.
If you are using WordPress, you will find that it does not support iframes by default. However, there is a handy plugin called iframe which does the trick. When you have installed it, just replace the html brackets < and > surrounding the iframe tag with [ and ]. Easy!
You aren’t limited to boring spreadsheets
Take a look at the below example. I created a nice chart using the previous spreadsheet. The chart is on it’s own worksheet, which can then be displayed separately.
[iframe width=’500′ height=’420′ frameborder=’0′ src=’https://docs.google.com/spreadsheet/pub?key=0AqM-1wYf86pJdGdHS3R5Q3ZKNEc0THdKVHl4Qm8wM0E&single=true&gid=1&output=html&widget=true’][/iframe]
Not convinced? How about embedding an entire presentation within your web page?
[iframe src=”https://docs.google.com/presentation/d/1-sgjTeXDo8cIzh81PG_tSuhi6o9tBSfMnvCViMEXpco/embed?start=false&loop=false&delayms=3000″ frameborder=”0″ width=”500″ height=”300″ allowfullscreen=”true” mozallowfullscreen=”true” webkitallowfullscreen=”true”][/iframe]
Or even embedding a survey for your visitors using Forms.
[iframe src=”https://docs.google.com/forms/d/1AN1Gi_dz2NpYDPp1J4EADQX-Z9nCDBqOYS_82NOt2cI/viewform?embedded=true” width=”760″ height=”500″ frameborder=”0″ marginheight=”0″ marginwidth=”0″]Loading…[/iframe]
Summary
There is a lot you can do with Google Drive to make your web pages and posts stand out from the crowd. The possibilities for making interactive pages with a diverse range of content is enormous.
What will you do with Google Drive?