How to display Google Drive folders and documents on a blog

Google Drive is a cloud based document store. It is included with Google Apps for Education which is free for schools to use. All you need is a domain to create your drive on. We allow any school to use their blog's domain to host a Google Apps for Education domain and we only charge £50 to set this up for you. Thereafter Google Drive is yours to use in school for free for as long as you maintain your blogsite with us.

Why should I use this?

There are lots of benefits to moving to a cloud based document store in school, not least in building a truly collaborative learning environment accessible from home and school. Here, however we are focusing on one particular workflow aspect which can be a huge timesaver for schools.

Typically, when a school produces a document it needs uploading to a website, then whenever a new version of the same document is created then the old one needs removing from the website and the new one uploading to replace. This is a hugely time consuming task and often gets forgotten in the busy school day. It would be much simpler if you could just edit the original document and that edit be reflected in every place where that document is shared automatically. This is exactly what cloud based document stores can do.

Here is an example Wigan St Andrews have a folder in their Ggogle Drive where they upload policies and that folder is automatically displayed on the website. If you click on a policy then it display from Google Drive. If they upload a new policy to the folder it displays automatically on the website. If they edit a policy, any changes are immediately viewable from the website.

First Steps

The first steps that you need to take are in setting up a place in Google Drive to share your documents from.

From Google Drive click "New" and then "Folder".

Give your folder an appropriate name e.g. "Public Policies" or "Website Newsletters". Note: because these folders are going to be public I think it's a good idea to reflect that fact in the title of the folder so that everyone in school knows that the contents of the folders will be public. You can create as many public folders as you need.

Next make the folder public so that anyone on the Internet can view it. Important Note: this does not mean they can edit the documents in the folder.

Right click on the name of the folder in your folder list and click "Share" from the dropdown menu. A dialogue box will open like this: click "Advanced"

A further dialogue box will open: click "Change" on the privacy settings.


Now amend the privacy settings to make the folder public on the web. Note that you only want to allow visitors to view, so DO NOT change the access settings.

Your Drive folder is now publicly viewable (all other folders will remain private).

Uploading documents to the folder

Once you have created the folder you can simply open it and drag and drop documents to this folder. These documents could be in Microsoft Word format or in pdf format. Note that if you upload a Word Document you can open it and edit it with Google Docs, but it will save the new version in Google Docs format. It makes sense, therefore to create documents that you intend to share in this way in Google and not in Word or elsewhere. This might take a bit of learning but for simple documents such as a policy it is easy. If your document is saved in Google's own format you can then edit the original document in the folder and all changes are automatically viewable. If you choose to upload apdf or Word document you will need to edit these in the original software package and upload a new version to the folder, and remove the old one.

Embedding individual documents

If the document you have put in your public folder is in Google Docs format you can embed it into a blog post where it can be linked to, enlarged, printed etc. For pdf documents and Word documents you can't do this but can get a link to share.

To embed a document open it in Google Drive then click "File" > "Publish to the web". This opens a dialogue box which gives you the ability to copy a link to the document or grab the embed code.


Copy the embed code, write a blog post and paste the code in after clicking on the "Text" tab in the editor.

Embedding a whole folder

Unfortunately, Google doesn't provide an embed code to display a whole folder but it's not beyond the technical capability of most bloggers.

Firstly, open the folder that you want to embed. The URL of that folder will look something like this:

The last part (highlighted in blue) is the actual unique folder id assigned by Google to the folder. Copy this.

Now, in your blogpost you will need to add the code for an iframe (make sure you have clicked on the "Text" tab before writing code.

Here is the code you would need to embed the above folder into your blog. Copy it and paste it into your blog, replacing the bit in blue with the id of your own folder.

"" width="700" height="500"

Note the word "list" highlighted in red. This tells the website to display the contents of the folder as a list. To display your folder as a grid of small thumbnails of the documents as in the Wigan example above then simply replace the word "list" with "grid" (note, replace the word directly, do not include the quote marks as all the necessary quote marks are in the right place.

If you look at the Wigan example, you will see that the document name is displayed underneath the thumbnail so make sure that document names are meaningful to the visitor to your site.

Finally, you can change the width and height dimensions in the code to fit your own blogsite. 

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk