Embedding Google Apps

Shortcode Builder Overview

This tool is part of the Shortcode Builder. If the "Williams Shortcode Builder" plugin is activated, an extra row of icons will appear in your page or post's visual editor, as shown below. sc-builder-icons
General usage (more specific instructions follow):
  1. place your cursor in the editor where you would like the content inserted
  2. click one of the shortcode builder icons
  3. fill out the form in the popup window
  4. click the "OK" button

Use the Google embedder to add a map, calendar, form, presentation or document to your page/post.

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

Google Maps

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" height="450" width="600" 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 your URL into the shortcode builder popup.

Shortcode

[wms_google 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" width="100%" height="400"]

Results

Google Calendar

How to create 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.

Shortcode

[wms_google url="https://www.google.com/calendar/embed?src=cdnpt534mmpuln9rf2emj2lv7s%40group.calendar.google.com&ctz=America/New_York" height="400" width="100%" ]

Results

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

Google Documents, Spreadsheets & Presentations

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

Documents

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

gdoc_publish2

Shortcode

[wms_google url="https://docs.google.com/document/d/1UH15lEiGSYCAEf1xJH8WK8QQakHMxCvQyEPHcH7Oneo/pub" width="100%" height="300" ]

Results

Spreadsheets

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

Shortcode

[wms_google url="https://docs.google.com/spreadsheet/pub?key=0AjLi3VDGYQcfdE4xSm9OTkpDV0psLUdqclhUOENiS3c&output=html" width="100%" height="250" ]

Results

Presentations

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

Shortcode

[wms_google url="https://docs.google.com/presentation/d/1ohPjEpgJBuYGoB2EdI1DnhiJiL72_hXvG_5A31hjXgM/embed?start=false&loop=false&delayms=3000" width="100%" height="400"]

Results

Google 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.

Last modified on May 8, 2014