Friday, January 24

Embed Google Drive Folder On A Website

Ever wanted to embed a folder on your Google Drive to give public access to it for downloads or something else. Google sites provides an easy way to do it by using the insert option, but not everyone uses Google Sites. Also the method mentioned in the developers section is a bit extensive for common users. Well here is the easiest way using iframe. It should look something like in this image on the right.

Things you need
  • Create a folder in Google Drive and put all your necessary files in it.
  • Share that folder and set access such as to allow public access or anyone with the link can view the content.
  • Copy the folder id from the link to share.
Now wherever you want to embed this folder on your website enter this code - 

<iframe frameborder="0" height="330px" src="http://drive.google.com/embeddedfolderview?hl=en&amp;id=0B18YRYq_f_eCeHVhdFlnUGR3cmM#grid" width="100%"></iframe>

Replace the id= with the id you copied from the link to share (red part) and if you wish you can also change the #grid to #list (green part) to display a list instead of grid.

Note: The minimum height for grid mode should be around 330px, else id would cut off the icons and would display scroll bars. Use css to do the rest you need with styling.



4 comments:

  1. This is great! Thanks. Do you know how to make the google docs links download links rather than redirect links to google docs? I want people to be able to click them, and they download.

    ReplyDelete
    Replies
    1. It can be done and its very simple actually. Click here for an example.
      Step 1 - Create a folder on google driver and share it making it public.
      Step 2 - Select that folder and click details button.
      Step 3 - Click details tab.
      Step 4 - Copy the HOSTING link from it.
      Step 5 - Upload your files in that folder and then link your downloads as HOSTING LINK/FILE_NAME.EXTENSION

      Delete
  2. thanks for it,but i am bit confused with ur blog template, coding is out box to copy, r to read

    ReplyDelete
  3. Perfect! Thanks for the missing link. It’s a shame G doesn’t make it simpler using iframes.

    ReplyDelete

Comment anything you want. Just be polite and give respect to others!
I am simply going to remove the comments which are offensive or are off topic.
And please don't spam your website links in comments. I don't, neither should you.