Embedding Google Apps

Related Content

Use the [wms_google] shortcode to embed content from Google into your page/post. Possibilities include:

  • maps
  • calendars
  • presentations
  • documents
  • spreadsheets
  • forms

Creating the shortcode

To use the shortcode builder interface, you will need to have the Williams Shortcode Builder plugin activated, and be using the visual editor.

To create the [wms_google] shortcode:

  1. Place your cursor in the visual editor where you’d like the Google map/calendar/document to appear.
  2. Click on the “Shortcodes” button, located in the 2nd row of your visual editor’s toolbar (outlined in orange below). If you only see 1 row of tools, click on the kitchen sink (outlined in green below) to reveal the 2nd row.
  3. Hover over the “Embed External Content” menu to reveal its submenu, and select “Google Docs/Cal/Maps”, outlined in red below.

sc-menu-wms_google

Fill out the form in the dialog popup box, shown below. Hovering over the input boxes will reveal hints, helping you fill out the form. Clicking “OK” will insert the shortcode into the visual editor.

sc-dialog-google

See the Getting a Google URL section for more details on how to the the correct URL for each type of Google application.

Editing the shortcode

In the editor (in both visual and text modes), the shortcode will look something like this:
[wms_google url="https://www.google.com/calendar/embed?src=cdnpt534mmpuln9rf2emj2lv7s%40group.calendar.google.com&ctz=America/New_York" height="400" width="100%"]

You can edit the shortcode attributes (the values inside the quotes above) directly, or you can delete the shortcode, and create a new one using the shortcode builder tool again.

Getting a Google URL

Expand the sections below for directions on getting the correct URL to use in the popup window.

  • gmap_embed_pop1Generate the map you want at maps.google.com. While viewing the map you just made, click on the gear icon on the bottom right of your screen (shown to the right outlined in red). Select "Share and embed map", which will launch a popup window.

    In the popup window, click on "Embed map" (shown outlined in red below).

    gmap_embed_pop2

    Copy and paste the iframe info (outlined in orange above) into a text editor of your choice. We only want the iframe src URL, and need to get rid of the surrounding HTML. Strip out everything but the URL.

    Full iframe tag
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2931.531974739123!2d-73.2040565!3d42.7136299!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e0ba14e1cb0eb1%3A0x58387d3ec7d4dccf!2s54+Chapin+Hall+Dr!5e0!3m2!1sen!2sus!4v1393613117040" width="600" height="450" frameborder="0"></iframe>

    What you want- just the src URL
    https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2931.531974739123!2d-73.2040565!3d42.7136299!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e0ba14e1cb0eb1%3A0x58387d3ec7d4dccf!2s54+Chapin+Hall+Dr!5e0!3m2!1sen!2sus!4v1393613117040

    Copy & paste this URL into the shortcode builder popup.

    Demo

    Here's what an embedded Google map looks like:

  • How to create Google calendars

    Embedding Google Calendars

    Go to Google calendar and log in with your Google user ID. Under "My calendars" (see red arrow below), locate the calendar you'd like to embed, and the click on the down arrow next to its name (outlined in red) to reveal an options menu.

    myCalendarSettings

    Select "Share this Calendar" (green arrow above) and check off the "Make this calendar public" box.

    Next, go to "Calendar Settings" (orange arrow) to get the calendar's URL. You should be redirected to a page that contains the following:

    Copy the iframe src URL (highlighted in purple above) to use in the Shortcode Builder popup.

    Demo

    Here's what an embedded Google calendar looks like:

    Composite calendars

    You can combine multiple calendars owned by the same Google user into a single calendar view. From any calendar, go into "Calendar Settings" and find the "Customize the color, size, and other options" link (outlined in red below)

    sc-google-cal-customize

    sc-google-cal-multiselectIn the lower left, find your list of calendars. Check off the calendars you want to include in this composite calendar.

    In the upper left, provide a title for the composite calendar.

    Customize additional options displayed below the title as desired.

    In the upper right, click the "Update HTML" button and select the iframe src URL (only the part outlined in red below) to paste into the shortcode builder.

    sc-google-multiembed

    Appointment slots

    To create a signup sheet, click & drag to select a time range on your calendar, which will pop up the event creation dialog. Click on the "Appointment slots" link outlined in red below. Set the length of the time slots under "Type" (orange arrow below).

    gcal-appt-slot

    Lynda.com movie for appointments
    Google documentation for appointments

  • gdoc_publishGo to Google drive and log in with your Google user ID. Edit the document you'd like to embed.

    Select File -> Publish to the web (outlined in red to the left). If you publish a Google document to the web, it will be public regardless of what share settings you select for the document.

    More on visibility of published documents

    The exact details of getting the URL depend on which type of Google Doc you're using. Select the appropriate tab below for more information.

    • Click the "Start publishing" button.
      Copy the document link in the popup window (red arrow below) to paste into the Shortcode Builder.

      gdoc_publish2

      Demo

      Here's what an embedded Google document looks like:

    • Click the "Start publishing" button.
      Copy the URL at the bottom of the popup window (red arrow below) to paste into the Shortcode Builder.

      sc-google-ss-url

      Demo

      Here's what an embedded Google spreadsheet looks like:

    • Click the "Start publishing" button.
      Find the embed code in the popup window (red arrow below). Copy just the iframe src URL (only the part outlined in green) to paste into the Shortcode Builder.

      sc-google-pres-url

      Demo

      Here's what an embedded Google presentation looks like:

  • In most cases, we recommend using Gravity Forms instead of Google Forms. Gravity Forms

    To embed a Google form, go to Google drive and log in with your Google user ID. Go to the edit form screen of the desired form, and click on the more actions -> embed option at the top right of your screen (see below).

    gform_embed

    This will give you a popup:

    gform_embed_pop

    You'll want to copy ONLY the iframe src URL (https://spreadsheets.google.com/spreadsheet/embeddedform?formkey=dEVvbEpzbVFKME44R1RVRi1aWVFuVWc6MQ in the example above), and paste it into the Shortcode Builder. The forms tend to be tall, so make sure you give it plenty of height so you don't cut off your submit button.