How to display a G Suite folder on a blog

Here are two examples of schools using G Suite to collect documents for public display.

The first is an example of the contents of a folder being displayed as a list:

http://plymouthgrove.net/policies/

The second displays thumbnails of a folder.

http://wiganstandrews.net/policies/policies/

The ability to display these on a school website or blog re very useful because by simply adding the document to the relevant folder it will display on the school website without having to upload it. You can therefore, simply keep all public documents up to date by managing an online folder.

Step 1. Make sure the folder on G Suite is public.

Click on the folder in your Google Drive that you want to make public, then use the dropdown to access the folder options. Click Share

Screen_Shot_2017-09-11_at_16.14.03.png

A window will open and use the dropdown arrow to set the folder to "Anyone on the internet can find and view.

Screen_Shot_2017-09-11_at_16.14.27.png

Then click "Copy Link" and "Done"

Important: Anything in this folder and anything you subsequently add to the folder will be publicly viewable.

 

Step 2. Embed the folder in a blog post or page

Paste the link onto a notepad or blank document. It will look something like this:

https://drive.google.com/drive/folders/0BzBVO-_JOsR9a1lkSjNHWEw3NXM?usp=sharing

Note: the part highlighted by me in red is the unique Google Drive folder identifier.

 

Open a page or post on your blog and click on "Text" to open the text editor.

Add the following text (use copy and paste):

<iframe src="https://drive.google.com/embeddedfolderview?id=

Then, from the full link you pasted into a document or notepad, copy the Google Drive identifier and paste it after the initial piece of code (make sure there are no spaces).

<iframe src="https://drive.google.com/embeddedfolderview?id=0BzBVO-_JOsR9a1lkSjNHWEw3NXM

Now add the following code after the identifier: 

#list" width="600" height="2000" frameborder="0"></iframe>

or

#grid" width="600" height="2000" frameborder="0"></iframe>

Note: #list gives you a list view, and #grid gives you a thumbnail view.

 

Your final code should look like this (with your own unique folder identifier):

<iframe src="https://drive.google.com/embeddedfolderview?id=0BzBVO-_JOsR9a1lkSjNHWEw3NXM#list" width="600" height="2000" frameborder="0"></iframe>

Note: You can change the dimensions of the frame that the documents are displayed in page by changing the width="x" and height="y" settings

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk