HTML & Gadgets‎ > ‎

How-tos

Google Drive Web Hosting

posted Oct 20, 2013, 8:05 PM by Morteza Mirmojarabian   [ updated Jan 20, 2014, 9:43 PM ]

You can store your files on Google Sites, mainly for download. However, I strongly recommend that you take advantage of the Google Drive site publishing feature to host and link to your files.
For instance, let's see how to upload an animated GIF image to Drive, get its URL, and embed it in your Site.

Instructions

  • Go to your Google Drive ► click CreateFolder ► enter a name for the new folder ► click Create.
  • Right-click on the new folder ► click ShareChange...Public on the webSaveDone.
  • Open the public folder ► click the red Upload button ► Files... ► select the image file ► click Upload and share.
    If the Upload settings dialog appears, make sure that the conversion options are unchecked and then click Start upload.
  • When the upload is complete, close the box that indicates the progress of your upload.
  • Right-click on the file ► select Details and activityDetails ► click the link under Hosting ► copy the image URL in the address bar of your browser.
  • Now go to your Google Site ► click Edit pageInsertImageWeb address (URL) ► paste the URL ► OKSave.

Result

Live Landscape

Notes

  1. You can take similar steps to get the public folder URL:
    Right-click on the folder ► select Details and activityDetails ► click the link under Hosting. Now you can see the folder URL as well as a listing of its contents.
    As an alternative to the directory listing, you might want to display a custom page when navigating to the folder URL:
    • Download the index page template.
    • Open it with a plain text editor, e.g. Notepad, and customize it to meet your needs.
    • Upload index.html to your folder.
  2. If you'd like to upload a new version of a file, right-click on the file ► click Manage revisions...Upload new revision.
  3. To organize the files in your folder, you can create a hierarchy of subfolders. It's also possible to create other public folders in your Drive.
DiscussPlease note that all posts are moderated.

Google+ Share Button

posted Jun 15, 2012, 4:36 AM by Morteza Mirmojarabian   [ updated Dec 21, 2013, 10:54 PM ]

Google+ Share Button When a user finds something interesting on the web, sometimes a lightweight endorsement, like +1, feels right. Other times a user just wants to share it with friends, right away. Add this button to content across your site to more easily encourage visitors to share on Google+. This button is perfect for private Google Sites or content that users may want to directly share but not publicly +1, such as news or controversial content.

Instructions
  • Click Edit pageInsertMore gadgetsSearch gadgets: "Google+ Share Button" by Mori ► Select ► customize the user preferences.

    Note: The share box height is dynamically adjusted to its content.

  • Customize the gadget DisplayOKSave.
Result



Google+ Share Link Generator Create a lite version of Google+ Share Button to use on your site sidebar and footer or if you'd prefer not to use a gadget in the page content area.
Note: Search the public gadgets for "Google+ Share Link Generator" by Mori If you'd like to embed the following form into your site.


Instructions
  • Sidebar
    Click MoreEdit site layout ► Sidebar plus icon ► Add Text ► hover your mouse over the Sidebar Text Box and open it ► click the HTML button ► insert the generated code ► click UpdateOKClose.

  • Footer
    Click MoreEdit site layout ► enable Custom footer ► hover your mouse over the custom footer content area and open it ► click the HTML button ► insert the generated code ► click UpdateOKClose.

  • Page content area
    Click Edit pageHTML button ► insert the generated code ► click UpdateSave.
DiscussPlease note that all posts are moderated.

Google Calendar

posted Dec 10, 2011, 9:34 AM by Morteza Mirmojarabian   [ updated Dec 21, 2013, 10:54 PM ]

Here's how to customize a Google Calendar and embed it on Google Sites.

Instructions
  • Get the URL:
Go to your Google Calendar ► in the calendar list on the left, click on the down-arrow button next to the calendar you want to embed ► select Calendar settings ► in the Embed This Calendar section, click the Customize the color, size, and other options link ► in the Google Embeddable Calendar Helper, select your options and the calendars you wish to display ► copy the iframe source. For example:

HTML code:
<iframe src="https://www.google.com/calendar/b/0/embed?height=450&amp;wkst=1&amp;bgcolor=%23cc9933&amp;src=id9d9thjcre2heq31f8gjeot4k%40group.calendar.google.com&amp;color=%23711616&amp;ctz=Asia%2FTehran" style="border-width:0" width="600" height="450" frameborder="0" scrolling="no"></iframe>
Iframe source: https://www.google.com/calendar/b/0/embed?height=450&amp;wkst=1&amp;bgcolor=%23cc9933&amp;src=id9d9thjcre2heq31f8gjeot4k%40group.calendar.google.com&amp;color=%23711616&amp;ctz=Asia%2FTehran
  • Insert the URL:
Get back to your Google Site ► click Edit pageInsertMore gadgetsPublic ► Search Templates: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget DisplayOKSave.

Result

DiscussPlease note that all posts are moderated.

Comment Form & Board

posted May 11, 2011, 8:39 AM by Morteza Mirmojarabian   [ updated Jan 9, 2014, 8:19 PM ]

The comment system at the bottom of this page is a live example of my approach to viewers comments in Google Sites.


Comment Form
Comment Form
A form to receive comments


Insert

Click Edit pageInsertMore gadgetsPublic ► Search gadgets: "Comment Form" by Mori ► Select.

Some settings
  • Google form key
    Go to the Comment Form & Board template ► click Use this template ► copy the form key, which is at the bottom of the page.
    For example: dEZzbmM1V21IdWcwYm9RWFNFeTJ1SVE6MA
  • Speech bubble border color
    You can pick any HTML color and its darker/lighter shades.
  • Form elements background image
    The default is a 1×50px gradient image. Feel free to use it or create yours.
  • On submit
    As an alternative to displaying the confirmation message, you might want to reload the page. You can also redirect users to a custom 'thank you' page or anywhere else you wish.
  • Width
    800px, i.e. multi-line text field width:492px + single-line text fields width:244px + margins and borders:64px
  • Include a border around gadget
    Uncheck it.
  • Display title on gadget
    Uncheck it.


Comment Board
Comment Board
A guestbook to display comments


Insert

Click Edit pageInsertMore gadgetsPublic ► Search gadgets: "Comment Board" by Mori ► Select.
Note: As you see, Comment Form and Comment Board are two gadgets.

Some settings
  • Google spreadsheet URL
    Go to your Google Drive ► open the template copy ► click File ► Publish to the web ► select Comments under Sheets to publish.
    Note: A common mistake to avoid is publishing All sheets.
    Uncheck Automatically republish when changes are made if you're going to moderate comments before they appear on the board and then manually republish them ► click Start publishing ► copy the generated link. For example:
    https://docs.google.com/spreadsheet/pub?key=0Aliqp0kGPjWsdEZzbmM1V21IdWcwYm9RWFNFeTJ1SVE&single=true&gid=1&output=html
  • Feed URL
    S
    elect ATOM under Get a link to the published data ► copy the generated link and click Close. For example:
    https://spreadsheets.google.com/feeds/list/0Aliqp0kGPjWsdEZzbmM1V21IdWcwYm9RWFNFeTJ1SVE/od7/public/basic
    Option: Activate your feed at Google FeedBurner to get more subscription options and keep track of your statistics.
    Go to FeedBurner ► change https to http on your ATOM link and paste it ► click Next ► click Next ► copy the feed URL.
    For example: http://feeds.feedburner.com/google/fWTL
    Click Skip directly to feed management ► Publicize ► Email Subscriptions ► Activate.
    You're done although there are still many other things to customize on FeedBurner.
  • Dynamic height
    • Yes: Your gadget grows as users add comments.
    • No: Specify a static height. The default value is 86px.
  • Feed icon
    Like Admin & Viewers comment icons should be 16×16px.
  • Include a border around gadget
    Uncheck it.
  • Display title on gadget
    Uncheck it.
Hide Comments sheet

It makes your spreadsheet interface cleaner. But before that there are two things you might want to do:
  • Customize the timestamps format
    Click on the Comments sheet tab ► click the Timestamp column letter to highlight the entire column ► click FormatNumber.
  • Rename the sheet
    Select Rename from the same sheet tab menu.
Now select Hide sheet from the same menu.
Note: To unhide it at any time, click View ► Hidden sheets.

Format Source sheet

It improves the spreadsheet usability.
  • Resize columns
    There are two ways to change column width:
    • Place your mouse pointer on the columns dividing border ► click and drag the arrow in the direction you'd like your column to expand or contract.
    • Click on the column letter menu ► select Resize column  enter a new value ► click OK.
  • Highlight admin's comments
    Click on the Name column letter menu ► select Conditional formatting ► select Text is exactly from the drop-down menu ► enter the admin display name ► set a text color and/or cell background color ► click Save rules.
Get notifications

Here are a couple of options:
  • Click Subscribe to comments to get updates in your feed reader or via email.
  • Define a notification rule on the spreadsheet
    Click the Tools drop-down menu ► Notification rules ► check A user submits a form ► check Email - right away or Email - daily digest ► click SaveDone.
Answer comments

Simply type in your answer on the row below the viewer's comment. If the row below is already filled, right-click the comment row number to highlight the entire row ► select Insert 1 below from the drop-down menu ► enter your comment.

Remove spam

Right-click the spam comment row number to highlight the entire row ► select Delete row from the drop-down menu.

Republish comments

After you've done moderating comments, click the File drop-down menu ► Publish to the webRepublish now.

FAQ

  1. Can I customize the Comment Form and Board fields?

    This comment system includes four common fields (name, email, URL, comment) that you're not supposed to customize, add to or subtract from.
  2. Why don't comments appear on the board immediately?

    It can take Google servers a short time to republish spreadsheets as web pages. So here are the best things to do:
    • Select Automatically republish when changes are made.
    • Set Comment Form On submit to Reload the page.
    • Put a notice like this above your form:
      Please reload the page shortly after submission if your comment doesn't appear immediately.
  3. Why isn't there the ATOM option under Get a link to the published data?

    It's a known issue in Google Apps accounts. As a workaround, invite your regular Google Account, e.g. you@gmail.com, to the spreadsheet as an editor, sign in to the spreadsheet through that account, and get the ATOM link.
  4. Do I need to make a new Comment Form & Board for each page?

    Yes. But to make things a little easier, create a page template including the gadgets and use it whenever you create a new page or even to change existing pages templates. Obviously, however, you'll need to customize some gadgets settings on each page.
  5. Do both gadgets need to be on the same page?

    No: one can be placed on page A and the other on page B; or you can even put just one of them on your site. Imagine you'd like to close comments for some reason, e.g. because your post/article is too old. Then simply remove Comment Form and leave Comment Board for review. Or you can embed Comment Form only, e.g. to keep comments private.
    Although these two gadgets are related, they can work independently.
DiscussPlease note that all posts are moderated.

Google Docs Viewer

posted Jul 20, 2010, 3:42 AM by Morteza Mirmojarabian   [ updated Dec 31, 2013, 9:59 AM ]

Google Docs Viewer It's a gadget to embed the Google Docs Viewer and display PDF documents, PowerPoint presentations, Word documents and many more file types online right in your web page without using any plug-in/software.



Instructions

  • Click Edit pageInsertMore gadgetsPublic ► Search gadgets: "Google Docs Viewer" by Mori ► Select ► enter the URL.
Tip: Host your files on Google Drive as per the instructions.
  • Customize the gadget Display ► OK ► Save.

Example


DiscussPlease note that all posts are moderated.

Iframe Wrapper

posted Jul 10, 2010, 7:38 AM by Morteza Mirmojarabian   [ updated Dec 31, 2013, 8:36 AM ]

Iframe Wrapper Use this gadget to embed another document/page in your web page, e.g. Google Drive items, YouTube videos, Google Calendars, Google maps, blogs, forums, Facebook Like and Twitter Tweet buttons.



Instructions

Here's a sample Google map embed code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=42.85226,56.513672&amp;t=h&amp;z=4&amp;output=embed"></iframe>
Click Edit page ► Insert ► More gadgets ► Public Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.


Result



A Twitter Tweet button embed code:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?count=vertical&url=http%3A%2F%2Fsites.google.com%2Fsite%2Fmori79%2Fhtml-gadgets%2Fhow-tos%2Fiframe-wrapper&text=Iframe%20Wrapper%20-%20Mori79%3A%20Google%20Sites%20School" style="width:59px; height:62px;"></iframe>

Result

DiscussPlease note that all posts are moderated.

Dynamic Content Writer

posted Jul 9, 2010, 4:06 AM by Morteza Mirmojarabian   [ updated Dec 31, 2013, 8:01 AM ]

Dynamic Content Writer Google Sites HTML editor doesn't let you insert and preview most codes and you almost always need to use gadgets for your embeddings. In addition, it can be a pain constantly having to switch to HTML editor and gadgets properties to make changes and adjustments and sometimes the preview is different from what you see on the page. That's where Dynamic Content Writer comes in handy. It helps you edit and view HTML in real time and get a preview of what a gadget would actually look like on your page.

Credit

Thanks to Jesse Ruderman for Real-time HTML Editor!


Instructions

Click Edit page InsertMore gadgets Public ► Search gadgets: "Dynamic Content Writer" by Mori Select ► customize the gadget DisplayOKSave.


Result


DiscussPlease note that all posts are moderated.

Navigation Menus

posted Feb 8, 2010, 9:15 AM by Morteza Mirmojarabian   [ updated Jan 6, 2014, 1:42 AM ]

The following tutorial shows you how to create a simple custom navigation bar, both horizontal and vertical.

Instructions
  • Button menus

    • Build your image buttons on GRSites or using any other button maker or image editor.
    • As per the instructions, upload them to a public folder in Drive and get their URLs.
    • Use Dynamic Content Writer to customize the following code and monitor changes in real time:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; float:left; margin-right:3px; outline:none;}
      a:hover img, a:focus img {visibility:hidden;}
      img {border:0;}
      #home {background-image:url(http://www.example.com/home-on.jpg);}
      #top-pics {background-image:url(http://www.example.com/top-pics-on.jpg);}
      </style>

      <nav>
      <a id="home" href="http://sites.google.com/site/mori79/home"><img src="http://www.example.com/home-off.jpg"></a>

      <a id="top-pics" href="http://sites.google.com/site/mori79/top-pics"><img src="http://www.example.com/top-pics-off.jpg"></a>
      </nav>
Result




    • To set it vertically, customize the following code and take similar steps:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:105px;  /* equal to the images width */
      margin-bottom:3px; outline:none;}
      a:hover img, a:focus img {visibility:hidden;}
      img {border:0;}
      #home {background-image:url(http://www.example.com/home-on.jpg);}
      #top-pics {background-image:url(http://www.example.com/top-pics-on.jpg);}
      </style>

      <nav>
      <a id="home" href="http://sites.google.com/site/mori79/home"><img src="http://www.example.com/home-off.jpg"></a>

      <a id="top-pics" href="http://sites.google.com/site/mori79/top-pics"><img src="http://www.example.com/top-pics-off.jpg"></a>
      </nav>

Result




  • Table menus

    • You can style your links in a tabular format. Here's a sample code to take similar steps:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      table {border-collapse:collapse;}
      table, td {padding:0; border:1px solid #330000;}
      a {display:block; font:bold 12px Verdana; color:#FFFFFF; background-color:#660000; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {background-color:#330000;}
      </style>

      <table>
      <tr>
      <td><a href="http://sites.google.com/site/mori79/home">Home</a></td>
      <td><a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a></td>
      </tr>
      </table>

Result




    • To set it vertically, take similar steps with the following code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      table {border-collapse:collapse;}
      table, td {padding:0; border:1px solid #330000;}
      a {display:block; width:120px; font:bold 12px Verdana; color:#FFFFFF; background-color:#660000; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {background-color:#330000;}
      </style>

      <table>
      <tr><td><a href="http://sites.google.com/site/mori79/home">Home</a></td></tr>
      <tr><td><a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a></td></tr>
      </table>

Result





  • Tableless menus

    • Here's a sample code to take similar steps:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; float:left; width:74px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; text-align:center; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result




    • To set it vertically, take similar steps with the following code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:120px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result



    • Here's another sample code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; float:left; margin-right:2px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result




    • The vertical menu code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:120px; margin-bottom:2px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result



    • Another sample code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      div {background-image:url(http://www.example.com/brown-gradient.png); overflow:hidden;}
      a {display:block; float:left; width:74px; border-right:1px solid #ffb894; font:bold 12px Verdana; color:#662900; text-align:center; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {padding-top:9px; padding-bottom:7px;}
      </style>

      <nav>
      <div>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </div>
      </nav>

Result




    • The vertical menu code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:120px; font:bold 12px Verdana; color:#662900; background-image:url(http://www.example.com/brown-gradient.png); padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {padding-right:11px; padding-left:13px;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result



* * * * * * *

Notes:
  1. You can pick any HTML color and its darker/lighter shades.
  2. You might also want to use a gradient image in the background.
  3. Click Edit pageLayout ► select the right one, e.g. One column or Left sidebar.
  4. Now you can create a page template including your desired menu and use it whenever you make a new page or even to change existing pages templates. That way you won't have to build a menu on each page and it will be gotten from your page template. To make changes in your menu such as renaming a page, adding/removing pages, etc, just change the gadget code.
DiscussPlease note that all posts are moderated.

Content Background

posted Dec 9, 2009, 1:34 PM by Morteza Mirmojarabian   [ updated Dec 24, 2013, 3:41 AM ]

Content Background

You probably know how to configure your site content area background color or image:
click the More button Manage site Themes, Colors, and Fonts Content areaBackgroundColorImage.
However, these settings are under Site Appearance, i.e. they're site-wide, not page-specific. What if you'd like to set a background color or image on a particular page content?


Instructions
  • Background color

    In edit mode click the HTML button ► insert the following code:
    <div style="background-color:#FFE4E1; padding:3px;">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

Notes: 
  1. If you have an existing page with content, just add the red code to the very top of your HTML editor and the blue code to the very bottom of it.

  2. You can pick any HTML color and its darker/lighter shades.


Click Update ► add anything (else) you wish to your page ► SaveThat's how I created this page.




  • Background image


    Take similar steps with the following code:

    <table width="100%" border="0" cellspacing="0" cellpadding="3" background="http://www.example.com/image.jpg">
    <tr>
    <td>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </td>
    </tr>
    </table>


See the example on my home page.

Notes:
  1. As seen on this page you can set a background color or image in a part of your page content. Simply set your <div> or <table> width and height values in pixels, e.g. width:500px or percent, e.g. width="80%" and insert the code wherever you want.
  2. By default, a background image is repeated, and placed at the top-left corner of the table. To display it only one time set the table tag like this:
    <table style="background-repeat:no-repeat;" width="100%" .....
    To change the image position it might help to change its canvas size using an image editor, e.g. Pixlr Editor.


DiscussPlease note that all posts are moderated.

Google Drive

posted Nov 25, 2009, 5:53 AM by Morteza Mirmojarabian   [ updated Dec 24, 2013, 7:21 PM ]

Google DriveNow Google Docs, files, and folders are widely used on Google Sites. But how are they embedded? The built-in gadgets listed on the insert menu enable you to easily embed some types of them in your web page. However, the easiest way isn't always the best — sometimes it has disadvantages and causes less usability and customization.
Let's go through the instructions and see some examples.

Google Docs

Documents

Instructions 
  • Get the URL:

    Go to your Google Drive ► open the document ► click File  Publish to the web ► Start publishing ► OK ► copy the iframe source. For example:

    Embed code:
    <iframe src="https://docs.google.com/document/d/1iXiy9n-p6KWkVjIqet7_se7ODXAvoBQkPmywPUU2Gto/pub?embedded=true"></iframe>
Iframe source:
https://docs.google.com/document/d/1iXiy9n-p6KWkVjIqet7_se7ODXAvoBQkPmywPUU2Gto/pub?embedded=true
  • Insert the URL:

    Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Public Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.


    Result





Presentations

At the moment you have to embed presentations through the insert menu if you're going to use their full screen feature.
Disadvantages: You can't customize the slides transition delay and the size options are limited.

Instructions
  • Get the URL:

    Go to your Google Drive ► open the presentation ► click FilePublish to the webStart publishingOK ► customize the presentation player ► copy the iframe source. For example:

    Embed code:
    <iframe src="https://docs.google.com/presentation/d/1IoxZ9_8TrDYYZAo5GuFAt4x9S9aoPCiSuqJ5eg7XWjM/embed?start=true&loop=true&delayms=5000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
Iframe source:
https://docs.google.com/presentation/d/1IoxZ9_8TrDYYZAo5GuFAt4x9S9aoPCiSuqJ5eg7XWjM/embed?start=true&loop=true&delayms=5000
  • Insert the URL:

    Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Public Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.


    Result





Spreadsheets

Instructions
  • Get the URL:

    Go to your Google Drive ► open the spreadsheet
    ► click File ► Publish to the web ► Start publishing ► select HTML to embed in a page under Get a link to the published data ► copy the iframe source. For example:

    Embed code:
    <iframe width='500' height='300' frameborder='0' src='https://docs.google.com/spreadsheet/pub?key=0Aliqp0kGPjWsdC1vZk9rdEhLTnFuODBKeWo1NWxhWmc&output=html&widget=true'></iframe>
Iframe source:
https://docs.google.com/spreadsheet/pub?key=0Aliqp0kGPjWsdC1vZk9rdEhLTnFuODBKeWo1NWxhWmc&output=html&widget=true

Notes:
  1. To remove the spreadsheet header, add &chrome=false to the URL:
    https://docs.google.com/spreadsheet/pub?key=0Aliqp0kGPjWsdC1vZk9rdEhLTnFuODBKeWo1NWxhWmc&output=html&widget=true&chrome=false
  2. To remove the header and footer, replace widget=true with chrome=false:
    https://docs.google.com/spreadsheet/pub?key=0Aliqp0kGPjWsdC1vZk9rdEhLTnFuODBKeWo1NWxhWmc&output=html&chrome=false
  3. You can get a link to a specific sheet or range of cells under Get a link to the published data.
  • Insert the URL:

    Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Public Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.

Result





Forms

Instructions
  • Get the URL:

    Go to your Google Drive ► open the form spreadsheet ► click Form ► Embed form in a webpage ► copy the iframe source. For example:

    Embed code:
    <iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dHltcWVZZFJvVUIwak00bUJnUXM1ZEE6MQ" width="760" height="638" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
Iframe source:
https://docs.google.com/spreadsheet/embeddedform?formkey=dHltcWVZZFJvVUIwak00bUJnUXM1ZEE6MQ
  • Insert the URL:

    Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Public Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.


    Result



Drawings

Instructions
  • Get the URL:

    Go to your Google Drive ► open the drawing ► click File ► Publish to the webStart publishingOK ► select Image size ► copy Document link. For example:
    https://docs.google.com/drawings/d/1IS8NMP5eJZn9Lm3XM-otVWMhrmRcPw4lwkad5kTCi6g/pub?w=480&h=360

    Note: You can manually customize the link width and height parameters values and keep the same proportions, e.g.
    https://docs.google.com/drawings/d/1IS8NMP5eJZn9Lm3XM-otVWMhrmRcPw4lwkad5kTCi6g/pub?w=600&h=450
  • Insert the URL:

    Get back to your Google Site ► click Edit pageInsertImageWeb address (URL) ► enter the link ► OKSave.

Result





Files

You can embed almost any file type supported by the Google Drive Viewer. For instance, here's how to embed a video.

Instructions 
  • Get the URL:

    Go to your Google Drive ► open the video ► click File ► Embed this video ► copy the iframe source. For example:

    Embed code:
    <iframe src="https://docs.google.com/file/d/0B1iqp0kGPjWsZGNiOTBiMDYtYjRlNS00NjdmLWE1NDYtNWE3NDU1Mzc1ZjEx/preview" width="640" height="385"></iframe>
Iframe source:
https://docs.google.com/file/d/0B1iqp0kGPjWsZGNiOTBiMDYtYjRlNS00NjdmLWE1NDYtNWE3NDU1Mzc1ZjEx/preview
  • Insert the URL:

    Get back to your Google Site ► click Edit pageInsertMore gadgetsPublic Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget DisplayOKSave.


    Result




Take the same steps to embed a PDF.

Embed code:
<iframe src="https://docs.google.com/file/d/1khZbPisjRRBXCY7UhgX5jdC0d6z7GaQ1y-JTA84oytCQLcdLXwcRnhMDtnjf/preview" width="640" height="480"></iframe>
Iframe source:
https://docs.google.com/file/d/1khZbPisjRRBXCY7UhgX5jdC0d6z7GaQ1y-JTA84oytCQLcdLXwcRnhMDtnjf/preview


Result





Folders

Google Drive folders can be embedded and displayed in list and grid views.

Instructions
  • Get the URL:

    Go to your Google Drive ► open the folder ► look at the address bar of your browser and copy the folder ID. For example:

    Folder URL:
    https://drive.google.com/#folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

    Folder ID:
    0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2
List view:
https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list
https://drive.google.com/embeddedfolderview?id=0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2#list

Grid view:
https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid
https://drive.google.com/embeddedfolderview?id=0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2#grid
  • Insert the URL:

    Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Public Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.


    Result

DiscussPlease note that all posts are moderated.

1-10 of 12