Embed Google content

Leverage Ryerson’s GSuite tools for media objects in your blog. Let’s see what works!

GSuite (Google for Education) offers a collection of tools that are great for creating and collaborating on content. Some of this work can even be embedded in a WordPress post or page! These tools are available to the Ryerson community via your my.ryerson login – so no separate account is required!

A quick note:

Google content can be divided into two categories: content created using a Google tool (a Google Doc, Google Slides, Google Drawing, Google Sheets) and third-party files uploaded to Google and viewed through a preview (audio and video files, Word documents, PDFs).

The embed methods are different for these two things. For now, I am focusing on the native Google tools. For the most part, this involves opening the Google content and, in the menu, going to File > “Publish to the web” and copying the embed code, which can be pasted into a “Custom HTML” WordPress block.

The following demos were completing by a user with an “Author” role in the blog, as a way to confirm that the embed code will still work mostly as expected by any content creator. The ability to display in full-screen is stripped out of the code. (Embed code from other applications is sometimes stripped for security reasons – this did not happen with the Google embed codes below).

On this page:

Google slides presentations

Google Slides is like a stripped-down version of Powerpoint, and can be a great way to add content with a sequence, integrating images and text.

This is the sample Google Drawing used in this demo – it has been shared with the public, so it can be embedded here: https://docs.google.com/presentation/d/1-d8c3TJ34EyBDkSDuumUX8M8jofDZLdsJTuNbfsd3Xk/edit?usp=sharing

When editing your Google Slides, go to File (in the menu) > Publish to the web & get the embed code. I used the small size, 640 x 389, which fits the blog post size well.

Here is the code I got from Google:

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSuYz6WBYJ2Zg7VzQBXtjOpqsDhKkPUaXVn2gyUq62uhjOVyf5YoYS0mA_uOzV_Wnr4oo6LxH64aNUg/embed?<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSuYz6WBYJ2Zg7VzQBXtjOpqsDhKkPUaXVn2gyUq62uhjOVyf5YoYS0mA_uOzV_Wnr4oo6LxH64aNUg/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

This code was then pasted into a Custom HTML block, below:

Note: I tested this both as a blog admin and an author (the usual role for students), and the embed code was not stripped by WordPress.

Google Drawings

Google Drawings allows you to create basic visuals, using simple shapes, text, and colour.

This is the sample Google Drawing used in this demo – it has been shared with the public, so it can be embedded here: https://docs.google.com/drawings/d/1SUdJwNb15PPhpxIhFPQ75xa7PMVvnw0Qr6V8WKMCRd0/edit?usp=sharing

When editing your Google Drawing, go to File (in the menu) > Publish to the web & get the embed code.

Settings: I selected the medium size, 960×720, which fits the blog post size a bit better than the small version (the text was harder to read).

Just be careful not to make a drawing that is too big to fit in your post. Test it out, to make sure the text is easy to read after being embedded.

Here is the code I got from Google:

<img src="https://docs.google.com/drawings/d/e/2PACX-1vQDXRZgF2lzTC8aPYrlU8rYqpD4Mz1qWq--7H40AAMfC9tttk0RZZPJ2-p2XWSPBLXbMwz0xlDpECM7/pub?w=960&amp;h=720">

This code was then pasted into a Custom HTML block, below:

Note: This was tested using an author role.

Google Docs

Google Docs is an online, collaborative document creation tool. Apart from adding and organizing text, you can also add images, charts, symbols, etc.

This is the sample doc being demonstrated below, and it has been shared with the public: https://docs.google.com/document/d/1KaUxw6sxtxisRjMytHtq9bHEn-30Qc1MyjN6nVCPR4Q/edit

When editing your Google Doc, go to File (in the menu) > Publish to the web & get the embed code.

As you can see from the sample below, this doesn’t quite work out-of-the box. Adding some simple sizing instructions can make the embed work better – with or without a scrollbar (it will take some trial and error to find the right values).

Here is the embed code I got from Google:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vQpBF5Z9a02DALDxXD652VicZ2hOz_Rw7KHf30rF_20ITFCmpLVPSNxAHunuHDtWBqfPFBl6kGf622H/pub?embedded=true"></iframe>

Test below created by a blog author.

Here is a version where I added width & height values to the iframe code, as well as a frame border so you can see the edges of the doc. A width of 100% will take up the width available in the post. You’ll need to do some trial and error with the height value, and find a value large enough to display your post without too much extra whitespace. I’ve made it just long enough to show most of the doc, with a scrollbar.

All of my additions are in bold:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vQpBF5Z9a02DALDxXD652VicZ2hOz_Rw7KHf30rF_20ITFCmpLVPSNxAHunuHDtWBqfPFBl6kGf622H/pub?embedded=true" frameborder="1" width="100%" height="1500"></iframe>

What can’t be embedded?

After some testing, I couldn’t find a way to embed the following native Google content types…

  • Jamboard / Jam
  • Google Sites

Leave a Reply

Your email address will not be published. Required fields are marked *